Core Web Vitals란 무엇이며 최적화하는 방법

2021년 Google은 페이지 경험을 순위 요소로 통합했습니다. 주요 목적은 웹 성능을 향상시키는 것입니다. 페이지 경험 업데이트를 통해 Core Web Vitals는 사이트가 Google 검색 결과에서 순위를 매기길 원하는 경우 고려해야 할 중요한 요소가 되었습니다.

누군가 Google에서 특정 키워드를 검색할 때 Google이 어떤 사이트를 맨 위에 렌더링하고 어떤 사이트를 맨 아래에 렌더링할지 결정하는 방법입니다. 글쎄, 그것은 의심의 여지없이 내용을 먼저 고려합니다. 콘텐츠는 항상 순위를 지배하지만 콘텐츠와 별도로 Google은 키워드, 페이지에서 해당 키워드의 사용, 백링크 등과 같은 웹페이지의 다른 많은 요소도 측정합니다. 페이지 성능도 그중 하나입니다. Google은 핵심 웹 바이탈로 페이지 성능을 측정합니다.

이 기사에서는 Core Web Vitals에 대해 설명하고 이를 최적화하여 검색 결과에서 더 높은 순위를 차지하고 더 많은 트래픽을 확보하는 방법에 대해 설명합니다.

핵심 성능 보고서란?

가장 큰 콘텐츠 페인트, 첫 번째 입력 지연 및 누적 레이아웃 이동은 Core Web Vital을 구성하는 세 가지 주요 성능 지표이며, 사용자를 위해 페이지가 얼마나 빠르고 효율적으로 로드되는지, 웹 사이트 요소가 얼마나 상호 작용하고 안정적인지 측정합니다. 로드 프로세스 내내 유지됩니다.

더 나은 이해를 위해 더 자세히 분석해 보겠습니다.

1. LCP(최대 콘텐츠 페인트)

LCP는 스크롤 없이 볼 수 있는 사이트의 가장 큰 요소(사진, 비디오, 애니메이션, 텍스트 등)가 얼마나 빨리 로드되고 나타날 수 있는지 평가합니다.

좋은 LCP는 2.5초이며, 2.5~4초 사이는 개선이 필요하고 4초를 초과하면 Google에서 좋지 않은 것으로 간주합니다.

가장 큰 콘텐츠 페인트 통계

1. 가장 큰 콘텐츠가 있는 페인트는 Google Lighthouse 성능 점수의 25%를 차지합니다.
2. 모바일 URL의 43%와 데스크톱 URL의 44%가 2.5초의 최대 콘텐츠 페인트 벤치마크를 통과합니다.
3. 연구에 따르면 평균 B2B 웹 사이트의 모바일 최대 콘텐츠 페인트 점수는 7.05s로 합격 점수를 받는 데 필요한 2.5s보다 훨씬 높습니다.
4. 연구에 따르면 평균 소매 웹사이트의 모바일 최대 콘텐츠 페인트 점수는 9.17s로 합격 점수를 받는 데 필요한 2.5s보다 훨씬 높습니다.

2. FID(첫 번째 입력 지연)

페이지의 FID는 클릭, 탭과 같은 페이지와의 첫 번째 사용자 상호 작용에 대한 응답으로 브라우저가 이벤트 핸들러 처리를 시작하는 데 걸리는 시간입니다.

좋은 FID는 100ms 미만이고 100-300ms 사이에는 개선이 필요하며 300ms 이상은 좋지 않은 것으로 간주됩니다.

첫 번째 입력 지연 통계

1. 최초 입력 지연은 Google Lighthouse 성능 점수의 25%를 차지합니다.
2. 모바일 URL의 89%와 데스크톱 URL의 99%가 100밀리초 첫 입력 지연 벤치마크를 충족합니다.

3. CLS(누적 레이아웃 시프트)

CLS는 사용자가 예기치 않은 레이아웃 변경을 경험하는 빈도를 정량화하는 데 도움이 되므로 시각적 안정성을 측정하는 데 유용한 사용자 중심 메트릭입니다. 이것은 시각적 안정성 측정의 필수적인 측면입니다.

좋은 CLS는 0.1 미만이며 0.1에서 0.25 사이는 개선이 필요하고 0.25 이상은 좋지 않은 것으로 간주됩니다.

누적 레이아웃 이동 통계

1. 누적 레이아웃 이동은 Google Lighthouse 성능 점수의 5%를 차지합니다.
2. 모바일 URL의 46%와 데스크톱 URL의 47%가 누적 레이아웃 변경 벤치마크인 .1을 통과합니다.

이제 Core Web Vitals가 중요한 이유

Core Web Vitals와 같은 도구는 검색 결과에서 사이트의 위치를 ​​높이는 데 도움이 됩니다. 사이트가 얼마나 잘 작동하고 있으며 어디에서 향상될 수 있는지 Google에 알려주기 때문에 중요합니다.

Core Web Vitals는 순위 요소로서 UX의 중요성을 부정할 수 없이 높입니다.

따라서 콘텐츠 품질이 거의 비슷한 분야에서 경쟁하는 경우 Core Web Vitals에 대한 최적화는 엄청난 차이를 만들 수 있습니다. 즉, Google이 콘텐츠 품질이 동일한 두 페이지를 표시해야 하는 경우 좋은 핵심 웹 바이탈 점수. 귀하의 웹사이트에서 양질의 콘텐츠를 대신할 수 있는 것은 아무것도 없다는 것을 기억하십시오.

Core Web Vitals에 대한 Google의 John Mueller의 의견

Core Web Vitals에 대해 기억해야 할 또 다른 사항은 무작위 순위 요소 이상이라는 것입니다. 또한 순위가 매겨진 후(사람들이 방문할 때) 사이트의 유용성에 영향을 미칩니다. 다른 SEO 노력에서 더 많은 트래픽을 얻고 전환율이 낮다면 해당 트래픽은 전환율이 높을 때만큼 가치가 없을 것입니다(UX/속도가 일반적으로 전환율에 영향을 미친다고 가정).

견고한 Core Web Vitals를 보유하는 것은 간단히 말해서 검색 엔진 최적화 그 이상입니다. 모든 웹사이트 소유자는 방문자의 전반적인 경험을 향상시키기 위해 노력해야 합니다.

페이지의 콘텐츠가 우수하더라도 웹 사이트의 모든 측면이 높은 검색 엔진 순위를 받도록 최적화되어 사이트가 대상 고객에게 표시되도록 해야 합니다. Core Web Vitals는 또한 사용자 경험의 중요성을 강조합니다.

핵심 성능 보고서를 측정하는 방법

여러 테스트, 보고서 및 확장 기능을 사용하여 사이트의 핵심 성능 보고서를 검사할 수 있습니다.

이들 중 가장 중요한 것은 다음과 같습니다.

• PageSpeed ​​Insights의 Core Web Vitals 평가
• Google Search Console의 핵심 성능 보고서
• Core Web Vitals Chrome 확장 프로그램.

1. PageSpeed ​​Insights의 핵심 성능 보고서 평가

Google PageSpeed ​​Insights(PSI)는 두 섹션으로 나뉩니다.

• 실제 사용자가 경험하는 것을 확인합니다(Core Web Vitals 평가).
• 성능 문제를 식별합니다(실험실 데이터, PSI 점수).

Core Web Vitals 점수를 높이려면 첫 번째 부분에 집중하세요. 필드 데이터 보고서는 이 분석을 통합합니다. 이 연구의 데이터는 Chrome 사용자 경험 보고서(CrUX)에서 수집되었습니다. 이 데이터는 사이트와 실제 사용자의 상호 작용을 기반으로 합니다. Google은 검색 엔진 순위를 결정할 때 이러한 필드 결과를 고려합니다.

PSI의 "진단" 섹션은 또한 세 가지 지표 중 하나를 변경할 수 있는 요인에 대해 자세히 알아볼 수 있는 좋은 리소스입니다.

PSI는 전체 최적화 점수를 결정하고 최적화 권장 사항을 제공할 때 실제 사용자 메트릭과 랩 데이터를 고려합니다.

이 정보는 유용하지만 실험실의 특정 장치와 네트워크를 사용하여 통제된 환경에서 수집됩니다. 그러나 일부 사이트 게스트는 오래된 기술이나 전원이 부족한 연결을 사용할 수 있습니다. 이것이 실험실 결과를 사이트의 실제 성능과 비교하는 것이 좋은 생각이 아닌 이유입니다.

PSI는 항상 필드 요약을 제공하지는 않습니다.

소규모 웹사이트에서 자주 발생하는 것처럼 CrUX가 현장에서 충분한 데이터를 수집하지 않으면 이와 같은 문제가 발생합니다. 고맙게도 현장 데이터를 수집할 수 있는 추가 소스가 있습니다.

2. Google Search Console의 핵심 성능 보고서

Google Search Console(GSC)에 두 개의 새로운 핵심 성능 보고서(모바일용 및 데스크톱용)가 추가되었습니다.

각 보고서는 URL 그룹의 필드 데이터 및 성능에 관한 정보를 제공합니다.

이러한 보고서는 여러 URL에서 일반적인 문제를 발견하는 데 탁월합니다. 따라서 한 페이지가 아니라 전체 웹 사이트에 대한 정보를 받게 됩니다.

예를 들어, 가장 큰 요소가 이미지인 동일한 페이지가 많이 있는 경우 LCP 메트릭은 각 페이지에 대해 동일합니다. 이 상황에서 GSC는 각 페이지에서 LCP 문제를 발견합니다.

간단히 말해서 이러한 새로운 GSC 보고서는 전체 사이트에서 Core Web Vitals의 성능을 추적하는 가장 놀라운 접근 방식입니다.

3. Chrome 사용자 경험 보고서(CrUX)를 사용하여 필드 데이터 가져오기

CrUX 데이터 세트는 다음 두 가지 방법으로 액세스할 수 있습니다.

• Chrome UX 보고서 API - 이 개발자에 액세스하려면 JavaScript 및 JSON에 익숙해야 합니다.
• BigQuery – Google Cloud 프로젝트 및 SQL 기술이 필요합니다.

PSI 또는 GSC를 통해 페이지를 전달하는 것보다 더 많은 작업을 수행해야 합니다. 그러나 데이터를 정렬하고 시각화하기 위한 더 많은 옵션을 제공합니다. 예를 들어 BigQuery에는 데이터 슬라이싱 및 다른 데이터 세트와의 조인 기능이 있습니다.

두 가지 전략을 구현할 수 있는 자원과 기술 지식이 있다면 두 가지 전략을 모두 시도하십시오.

핵심 성능 보고서에 대한 몇 가지 중요한 통계

1. 상위 100개 데스크톱 도메인 중 56%가 Core Web Vitals 통과
2. 무거운 브랜드 효과 – 주요 브랜드는 실적이 좋지 않아도 높은 순위를 차지합니다.
3. 2022년 2월 모바일 상위 100대 기업의 61%가 Core Web Vitals를 통과했습니다.
4. 2022년 2월 미국 상위 100개 도메인의 평균 로딩 시간은 데스크톱에서 2.38초, 모바일에서 2.32초로 Google의 합리적인 임계값인 2.5초보다 낮습니다.
5. 2022년 2월 데스크톱 및 모바일의 평균 CLS 점수는 각각 0.11 및 0.08이었습니다. 상위 100개 사이트의 모바일 평균 CLS가 Google의 적절한 임계값인 0.1 아래로 떨어진 것은 이번이 처음입니다.
6. 2020년 1월에는 데스크톱의 22%와 모바일 상위 100개 도메인의 27%만이 Core Web Vitals를 각각 통과했습니다. 2022년 2월에 이 비율은 데스크톱에서 56%, 모바일에서 62%로 두 배 이상 증가했습니다. 이것은 최고 성능의 도메인이 웹 성능에서 상당한 이득을 얻었다는 것을 보여줍니다.
7. 상위 100개, B2B, 의료 및 Dict/Reference 사이트는 두 장치에서 평균 LCP가 2.5초 이하입니다.
8. 평균적으로 여행용 모바일 LCP는 사전/참고 사이트보다 1.6배 더 나쁩니다.
9. 평균적으로 여행용 데스크탑 LCP는 B2B 도메인보다 1.5배 더 나쁩니다.
10. 위치 1에 있는 URL은 위치 9에 있는 URL보다 Core Web Vitals 평가를 통과할 가능성이 10% 더 높습니다.
11. 위치 1에서 위치 5까지 각 위치에 대한 Core Web Vitals 평가의 합격률이 2% 감소합니다.

핵심 성능 보고서를 최적화하는 방법

이제 Core Web Vitals와 작동 방식을 확실하게 파악했으므로 Core Web Vitals를 개선하기 위한 몇 가지 권장 단계에 주의를 기울일 수 있습니다. 시험 결과에 따라 점수를 올리기 위해 취해야 할 단계가 결정된다는 점을 기억하십시오. 따라서 PageSpeed ​​Insights(또는 귀하가 사용하는 다른 테스트 도구)의 조언과 제안을 고려하는 것이 중요합니다.

다음은 Core Web Vitals 점수를 높이기 위한 입증된 기본 전략입니다.

1. 콘텐츠 전송 네트워크 사용

CDN을 사용하면 사이트 성능이 크게 향상됩니다. CDN을 사용하는 사이트는 비교적 빠르게 로드됩니다. 왜? CDN은 서버와 최종 사용자 간의 데이터 전송을 빠르게 하기 때문입니다.

CDN은 상호 연결된 서버의 방대한 네트워크입니다. CDN을 사용하여 웹 사이트의 콘텐츠를 여러 서버에 저장할 수 있습니다. 사용자가 사이트에 액세스하면 지리적으로 가장 가까운 서버가 사용자에게 웹 사이트를 렌더링하여 데이터 전송 시간을 줄입니다.

CDN을 사용하면 사용자의 LCP 로딩 시간을 줄일 수 있습니다. TTFB(Time-to-First-Byte)를 사용하면 Time-to-First-Byte도 줄일 수 있습니다.

2. 이미지 최적화

LCP를 높이는 또 다른 방법은 이미지 최적화입니다. 이미지는 고해상도인 경우 크기가 크며 로드하는 데 상당한 시간이 걸리므로 LCP 점수에 부정적인 영향을 미칩니다.

압축 이미지를 사용하면 로딩 속도가 빨라집니다. TinyJPG와 같은 많은 사이트에서 품질 저하 없이 무료로 이미지 크기를 줄일 수 있습니다. 이미지의 크기와 크기가 올바른지 확인하여 이미지를 더욱 최적화할 수 있습니다.

따라서 사이트의 특정 영역에 불필요한 이미지 크기를 사용하지 않는 것이 좋습니다. 적절한 속성을 포함하면 브라우저가 페이지 부분에 이상적인 공간을 제공하여 지속적인 레이아웃 변경의 필요성을 줄이는 데 도움이 될 수 있습니다.

소스 코드를 변경하여 미디어 파일의 너비 및 높이 속성을 변경할 수 있습니다.

3. 지연 로딩 구현

LCP와 페이지 로드 시간 모두 지연 로드를 사용하면 이점을 얻을 수 있습니다. Smush는 지연 로딩을 제공하는 여러 WordPress 플러그인의 한 예일 뿐입니다.

지연 로딩은 온디맨드 로딩이라고도 하며 웹 콘텐츠의 성능을 향상시키는 방법입니다.

레이지 로딩은 전체 웹 페이지를 한 번에 로드하고 한 번에 렌더링하는 대량 로딩과 달리 필요한 부분만 로드하고 나머지는 사용자가 필요할 때까지 지연시키는 데 도움이 됩니다.

4. 웹사이트 글꼴 최적화

웹 사이트에서 사용하는 글꼴은 이미지와 같은 방식으로 로드 시간에 영향을 줄 수 있습니다. 이는 각 글꼴 가중치 조합이 브라우저에서 전체 글꼴 모음을 로드해야 하기 때문입니다.

웹 글꼴 최적화는 사이트 속도를 높이는 간단한 방법입니다. 이는 최적화된 웹 글꼴이 사용자 컴퓨터에서 더 적은 공간을 차지하고 훨씬 빠르게 로드되기 때문입니다.

반면에 관련 웹 글꼴이 아직 로드되지 않은 경우 브라우저가 텍스트 구성 요소를 자동으로 렌더링하지 않을 수 있습니다. 그러나 대체 글꼴로 전환하면 원치 않는 레이아웃 변경이 발생하여 CLS 점수가 낮아질 수 있습니다.

웹 사이트의 글꼴을 결정할 때 주의하십시오. 각 요소에 하나씩 적용하는 것보다 2개 이상의 글꼴을 활용하는 경우 필요한 유형과 가중치를 선택적으로 적용하기 위해 전역 글꼴을 사용하는 것이 가장 좋습니다. 이 방법을 사용하면 콘텐츠에 꼭 필요한 글꼴만 다운로드하도록 제한할 수 있습니다.

5. WordPress 호스팅 업그레이드

사이트 로딩 시간이 너무 길면 호스팅 계획을 변경하라는 표시일 수 있습니다. 공유에서 전용으로 호스팅을 변경하면 FCP를 크게 높일 수 있습니다.

가장 저렴한 것을 선택하는 것보다 필요한 모든 기능을 제공하는 최고의 호스팅 사이트를 선택하는 것이 현명한 결정입니다. WordPress 호스트가 제공하는 서비스 품질은 웹 사이트의 성공에 매우 중요합니다. 페이지 로드 시간에서 안전에 이르기까지 광범위한 결과를 가져옵니다. 특히 규모가 크거나 정교한 웹사이트가 있는 경우, 이곳은 절차를 생략할 수 있는 곳이 아닙니다. 대신 호스팅 공급자 또는 계획을 업그레이드하는 것은 웹 사이트를 최적화하고 로딩 시간을 향상시키는 가장 빠르고 강력한 전략 중 하나입니다.

호스팅 읽기: Bluehost 검토

6. 렌더링 차단 리소스 제거

함께 제공되는 HTML, CSS 및 JavaScript 파일 없이는 웹 사이트 페이지를 렌더링할 수 없습니다. 이러한 파일에는 모두 사람들이 보려고 하는 항목에 액세스하지 못하게 하는 스크립트가 포함되어 있습니다.

그러나 렌더링 차단 리소스와 불필요한 CSS 또는 스크립트를 제거하여 이러한 스크립트가 UX에 부정적인 영향을 미치지 않도록 방지할 수 있습니다.

이를 달성하기 위한 수많은 방법이 존재합니다. 첫 번째는 JavaScript 및 CSS에서 추가 공백이나 주석을 제거하는 것입니다. 또한 파일을 병합하여 JavaScript 및 CSS의 크기를 줄일 수 있습니다.

7. JavaScript 로딩 지연

렌더링 차단 요소를 제거하는 또 다른 방법으로 FID를 크게 향상시킵니다.

이렇게 하면 JavaScript 파일의 로드를 차단하여 웹 페이지를 빠르게 로드할 수 있습니다.

JS 파일이 로드되기를 기다리지 않고 페이지의 다른 콘텐츠를 로드합니다. 이 외에도 스크롤 없이 볼 수 있는 부분 위에 나타나는 중요한 CSS 스크립트를 빠르게 로드하도록 사이트를 구성할 수 있습니다. 기본 CSS 파일에서 자료를 추출하고 웹 사이트 코드 내에 인라인하여 이를 달성할 수 있습니다.

8. 콘텐츠 캐싱을 구현합니다.

사용자 경험 향상과 관련하여 스마트 콘텐츠 캐싱은 마음대로 사용할 수 있는 가장 강력한 도구 중 하나입니다. HTTP 프로토콜의 중앙 콘텐츠 전달 기술은 캐싱 또는 이전 요청의 콘텐츠 임시 저장소를 사용합니다. 콘텐츠의 캐싱 정책에서 허용하는 경우 전달 체인의 모든 지점에 있는 구성 요소는 콘텐츠의 복사본을 저장하여 후속 요청 속도를 높일 수 있습니다.

캐싱은 Core Web Vital Scores를 개선하는 데 많은 도움이 됩니다.

9. 영웅 이미지 미리 로드

영웅 이미지는 일반적으로 스크롤 없이 볼 수 있는 콘텐츠 위에 표시되는 가장 중요한 요소입니다. 따라서 로드 속도가 빠르면 전체 UX가 크게 향상됩니다. LCP는 "rel=preload" 링크 속성을 사용하여 크게 줄일 수 있는데, 이는 특히 CSS 또는 JavaScript로 로드된 영웅 사진에 유용합니다.

10. 다른 콘텐츠보다 광고나 팝업을 우선시하지 않는다.

낮은 CLS 점수는 상단에 콘텐츠를 추가하여 페이지의 콘텐츠를 이동한 결과입니다.

광고, iframe 및 기타 형태의 동적 콘텐츠를 위한 공간을 확보하십시오.

특정 공간을 할당하지 않는 것은 이미지 및 비디오와 마찬가지로 레이아웃을 방해하는 확실한 방법입니다. 콘텐츠가 컨테이너 밖으로 넘치지 않도록 overflow: hidden 속성을 사용하고 적절한 크기의 컨테이너를 선택합니다.

11. 긴 작업을 나누기

이것이 당신의 최우선 순위여야 합니다. 긴 작업으로 인해 메인 스레드가 지연되면 사용자의 요청에 신속하게 대응할 수 없습니다. 웹사이트 성능은 웹사이트를 분해함으로써 크게 향상될 수 있습니다. 이것은 FID를 줄이고 UX를 향상시킵니다.

12. 불필요한 타사 스크립트 실행 중지 또는 연기

자신의 웹사이트 스크립트가 제3자의 스크립트와 충돌하는 경우 제 시간에 실행되지 않을 수 있습니다. 최종 사용자에게 가장 도움이 되는 스크립트를 고려하고 더 높은 우선 순위를 부여합니다. 광고 및 팝업 스크립트는 목록의 맨 위에 있어서는 안 됩니다.

Searchmetrics SEO Visibility를 기반으로 하는 Core Web Vitals 측면에서 미국 상위 10개 도메인이 수행하는 방식.

모든 메트릭과 도메인이 Core Web Vitals를 통과하는지 여부는 도메인 수준에서 매월 보고됩니다. 2022년 2월에는 모든 Wikipedia 데스크톱 페이지 로드의 75%가 1.1초 미만이 걸렸고 도메인은 FID(밀리초 단위로 표시)와 CLS 모두에서 0점을 받아 Core Web Vitals를 통과했습니다.

Searchmetrics SEO Visibility 메트릭을 기반으로 하는 모바일 장치 CWV의 상위 10개입니다 .

가능한 경우 모바일 버전의 도메인이 사용되었습니다. 그러나 이것은 주로 CrUX 데이터 수집에 의존합니다. 모바일 사이트의 더 높은 비율은 데스크톱보다 Core Web Vitals를 통과합니다.

결론

Core Web Vitals는 모두를 위한 웹 경험을 개선하기 위한 게임 체인저입니다. 이러한 측정값은 Google의 순위 시스템에 계속 포함됩니다.

그렇기 때문에 잘못된 것이 보이지 않더라도 계속 주시하는 것이 중요합니다.

성공적인 웹 사이트를 계속 운영하려면 사용자 경험을 지속적으로 향상시키는 것이 중요합니다. 수많은 유용한 도구와 플러그인을 사용할 수 있기 때문에 이 프로세스를 훨씬 간단하고 쉽게 만들 수 있습니다. 또는 벅차다고 생각되면 개발자를 고용하여 대신 수행할 수 있습니다.