Home 기술 문서 내 사이트의 핵심 웹 바이탈을 측정하는 방법

내 사이트의 핵심 웹 바이탈을 측정하는 방법

About The Author

Outline

원본 소스: Layer0

2021년 4월, 구글은 검색 결과에서 최고 성능의 웹 페이지를 선호하는 순위 알고리즘 변경을 포함하는 페이지 경험 업데이트를 출시하기 시작했다. 성능은 사용자 경험에 큰 영향을 미치는 웹 페이지 지표인 웹 사이트의 핵심 웹 바이탈(Core Web Vitals)을 기반으로 합니다.

사이트가 Core Web Vitals를 통과했는지 또는 실패했는지 여부를 빠르게 파악하려면 계속 읽어보십시오.

핵심 웹 바이탈이란?

모두를 위한 더 빠른 웹을 만들기 위한 구글의 노력의 일환으로, 크롬 팀은 사용자가 페이지의 성능을 경험하는 방법을 측정하기 위해 일련의 메트릭을 표준화하기 위해 노력하고 있다. Core Web Vitals는 이러한 성능 퍼즐을 해결하는 데 중요한 요소가 되었습니다. 이러한 지표는 로딩, 상호 작용 및 시각적 안정성에 중점을 둡니다.

다음 메트릭은 핵심 웹 바이탈을 구성합니다.

  • LCP(Largest Contentful Paint): 가장 큰 콘텐츠 요소가 화면에 완전히 표시될 때를 측정합니다. 2.5초 이하의 LCP는 양호한 로딩 경험으로 간주됩니다.
  • 첫 번째 입력 지연(FID): 사용자가 처음으로 페이지와 상호 작용(클릭 또는 탭)한 시간부터 브라우저가 실제로 해당 상호 작용에 응답할 수 있는 시간까지의 시간을 측정합니다. 100밀리초 이하의 FID는 양호한 대화형 경험으로 간주됩니다.
  • CLS(Cumulative Layout Shift): 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 측정합니다. 0.1 이하의 CLS는 시각적으로 매우 안정적인 경험으로 간주됩니다.

Core Web Vitals를 통과하려면 위의 각 메트릭이 모바일 및 데스크탑 디바이스로 구분되어 페이지를 방문하는 모든 사용자 중 75%의 권장 목표를 달성해야 합니다.

핵심 웹 바이탈 측정 방법

사이트가 Core Web Vitals를 통과하면 사용자가 페이지를 이탈할 확률이 24% 낮아집니다. 즉, 모든 웹 사이트 소유자는 이러한 메트릭을 측정 할 수 있으며 측정해야합니다. 사이트가 핵심 웹 바이탈을 통과하는지 확인하는 가장 쉬운 방법은 PageSpeed Insights를 사용하는 것입니다.

1. 이동 https://developers.google.com/speed/pagespeed/insights

2. 검색 상자에 웹 사이트 URL을 입력하고 분석을 누르고 5-10 초를 기다립니다.

PageSpeed 인사이트 분석기

3. 아래로 스크롤하여 필드 데이터. 막대 차트 위의 텍스트에서 귀하의 사이트가 핵심 웹 바이탈 평가를 통과했는지 또는 통과하지 못했는지 여부를 즉시 확인할 수 있습니다.

필드 데이터

4. 핵심 웹 바이탈 메트릭을 평가하려면 LCP, FID 및 CLS 측정에주의를 기울이십시오. 파란색 책갈피 기호도 이러한 기호를 표시합니다.

최대 내용 페인트(LCP), 첫 번째 입력 지연(FID), 누적 레이아웃 이동(CLS)

5. 평균 점수를 확인하십시오. 2.5초 이하의 LCP, 100밀리초 이하의 FID, 0.1 이하의 CLS는 우수한 사용자 경험으로 간주됩니다.

평균 메트릭 데이터

6. 단일 Core Web Vital 메트릭을 통과했는지 확인하려면 녹색 막대에서 백분율을 확인하십시오. 75% 이상이면 합격합니다. 즉, 웹 페이지는 특정 메트릭에 대한 좋은 사용자 경험을 제공한다는 의미이며, 누군가가 방문하는 시간의 75 % 이상입니다.

핵심 웹 바이탈 임계값 – 75번째 백분위수

검사실 데이터 무시

PageSpeed Insights 페이지에는 실습 및 현장 데이터가 모두 있습니다. 필드 데이터는 실제로 페이지를 로드하고 상호 작용하는 실제 사용자의 데이터입니다. 실험실 데이터는 이상적인 조건에서 제어된 테스트를 통해 측정되며 실제 병목 현상(예: 장치, 네트워크 상태, 설정 등)을 포착하지 않습니다.

Google은 실험실 데이터나 Lighthouse 성능 점수를 사용하여 사이트의 순위를 매기지 않습니다. 순위는 아래 이미지에 표시된 필드 데이터만 기준으로 합니다.

순위는 필드 데이터를 기준으로 합니다.

핵심 웹 바이탈을 개선하는 방법

여러 가지 이유로 인해 핵심 웹 바이탈을 통과하지 못할 수 있습니다. PageSpeed Insights는 LCP 및 CLS에 대한 감사를 제공합니다. FID는 포함되지 않지만 TBT(총 차단 시간)를 개선하는 최적화는 현장의 FID도 개선해야 합니다.

감사를 보려면 아래 단계를 따르십시오.

페이지의 Opportunities 섹션까지 아래로 스크롤하여 특정 메트릭에 대한 감사를 확인합니다.

PageSpeed 인사이트 기회

2. 개선하려는 지표를 클릭하면 웹 페이지에서 로드 시간, 상호 작용 또는 시각적 안정성을 개선하기위한 심층적 인 기술에 액세스 할 수 있습니다.

PageSpeed 인사이트 감사

일반적으로 핵심 웹 바이탈이 실패하는 몇 가지 일반적인 이유가 있습니다.

가장 큰 Contentful 페인트는 다음과 같은 요인에 의해 쉽게 영향을받습니다 :

  1. 느린 서브 응답 시간
  2. 렌더링을 차단하는 JavaScript 및 CSS
  3. 긴 리소스 로드 시간
  4. 클라이언트 측 렌더링 문제

첫 번째 입력 지연의 영향을 받는 요소:

  1. 50밀리초 이상 메인 스레드를 차단하는 긴 작업
  2. 상호작용 준비를 지연시키는 자사 스크립트 실행
  3. JavaScript 실행 시간이 많이 걸림

시각적 불안정성 또는 누적 레이아웃 변경은 다음과 같은 경우에 문제가 됩니다.

  1. 이미지, 비디오 또는 광고의 크기가 자동으로 조정됩니다.
  2. 글꼴이 늦게 로드되고 의도한 것보다 크거나 작게 표시됩니다.

이러한 각 문제를 해결하는 방법에 대한 해결 방법은 이 핵심 웹 바이탈 최적화 블로그를 참조하십시오.

우수한 사용자 환경을 위한 사이트 준비

8월까지 Google은 페이지 경험 업데이트 순위를 완전히 변경할 예정입니다. 사이트가 핵심 웹 바이탈을 통과하면 SEO가 높고 이탈률이 낮습니다. 더 중요한 것은 사용자가 머물고 돌아올 수있을만큼 만족스러운 탁월한 경험을 제공 할 수 있다는 것입니다.

Layer0은 핵심 웹 바이탈을 추적, 측정 및 최적화하는 무료 도구를 구축했습니다. 이러한 분석을 활용하기 위해 사이트를 Layer0에서 호스팅할 필요는 없습니다. 그것은 단지 스크립트 태그 당신입니다.

아이슬란드 최대의 여행 웹사이트인 Guide to Iceland는 Layer0 플랫폼에 오기 전에 세 가지 지표를 모두 실패했습니다. 사이트 속도가 55% 향상되었으며 Core Web Vitals를 날아다니는 색상으로 통과했습니다.

페이지 환경 업데이트나 사이트 속도를 높이는 방법에 대해 궁금한 점이 있으면 지금 바로 사이트 속도 전문가에게 문의하세요. 플랫폼을 시험해 볼 준비가 되었다면 여기에서 가입하십시오!