Core Web Vitals는 Google이 순위를 매긴 세 가지 지표(LCP, CLS, INP)를 표시하며, 현재 보고 있는 페이지에서 실시간으로 측정되고 Google의 임계값에 따라 평가되며 각 숫자 뒤에 있는 정확한 요소를 추적합니다.
Core Web Vitals는 페이지 순위의 일부를 결정하지만 이를 측정하는 일반적인 방법은 어색합니다. 실험실 도구는 누구도 경험하지 못한 합성 부하를 기록합니다. Search Console은 4주 후에 실제 사용자를 URL 버킷으로 그룹화하여 보고합니다. 어느 쪽도 앞에 있는 페이지의 어떤 요소가 문제인지 알려주지 않습니다.
이 도구는 사용하면서 실제로 보고 있는 페이지를 측정합니다. LCP, CLS 및 INP는 각각 해당 가치가 포함된 타일, Google이 게시한 임계값에 대한 좋음, 작업 필요 또는 나쁨 등급과 현재 위치를 표시하는 막대를 얻습니다. 느린 서버로 인한 느린 LCP는 무거운 이미지로 인한 문제와 다르기 때문에 FCP와 TTFB는 맥락을 위해 나란히 배치됩니다.
정의는 Chrome이 CrUX에 보고하는 내용과 일치하며 이는 Search Console과 숫자를 비교하려는 경우 중요합니다. CLS는 모든 교대조를 순진하게 추가하는 대신 1초 간격 또는 5초 후에 창이 종료되고 최악의 창이 승리하는 세션 창을 사용합니다. INP는 상호 작용 지연 시간의 98번째 백분위수로, 일반적인 방문의 경우 가장 느린 상호 작용입니다. LCP는 Chrome과 마찬가지로 첫 번째 상호작용에서 변경을 중지합니다.
가장 유용하게는 모든 숫자가 귀속됩니다. 패널에는 가장 큰 페인트 요소, 이동된 요소 및 가장 느린 상호 작용의 이름이 지정되며 표시 버튼은 해당 요소로 스크롤하여 페이지에 개요를 표시합니다. CLS가 0.31이라는 사실을 아는 대신 콘텐츠를 아래로 밀어내는 배너가 표시됩니다. 보고서 복사는 모든 내용을 티켓 텍스트로 전달합니다.
페이지를 사용하면 세 가지 순위 지표가 업데이트됩니다. 스크롤하면 CLS가 이동하고, 클릭하고 입력하면 INP가 이동합니다. 각 항목은 Google의 기준에 따라 좋음, 작업 필요, 나쁨으로 평가됩니다.
가장 큰 페인트 요소, 이동된 요소 및 가장 느린 상호 작용의 이름을 지정합니다. 표시를 눌러 원하는 항목으로 스크롤하고 페이지에 직접 개요를 표시합니다.
CLS는 1초 간격과 5초 상한선이 있는 세션 창을 사용하고, INP는 상호작용 지연 시간의 98번째 백분위수이며, LCP는 첫 상호작용에서 정지됩니다. 따라서 숫자는 Search Console과 일치합니다.
First Contentful Paint와 Time To First Byte는 세 가지 주요 요소 옆에 있으므로 잘못된 최적화를 시작하기 전에 무거운 히어로 이미지와 느린 서버를 구별할 수 있습니다.
이벤트 유형 및 관련 요소와의 가장 느린 상호 작용을 나열하므로 추측하는 대신 느린 드롭다운이나 필터를 찾을 수 있습니다.
한 번의 클릭으로 모든 지표, 등급 및 문제가 있는 선택기를 일반 텍스트로 복사하여 티켓, 끌어오기 요청 또는 클라이언트 이메일에 붙여넣을 수 있습니다.
한 달 후 Search Console에서 확인하는 대신 새 템플릿이 활성화되기 전에 LCP, CLS 및 INP가 녹색 상태인지 확인하세요.
Search Console에서는 URL 그룹이 CLS에 실패했다고 알려줍니다. 이 도구를 사용하여 그중 하나를 열고 정확히 어떤 요소가 이동하는지 확인하세요.
페이지를 스크롤하고 CLS 상승을 확인한 다음 표시를 눌러 콘텐츠를 이동시키는 늦게 로드되는 광고, 배너 또는 웹 글꼴의 개요를 확인하세요.
필터, 메뉴 및 모달을 클릭한 다음 가장 느린 상호 작용 목록을 읽고 수백 밀리초의 시간이 소요되는 컨트롤을 찾으세요.
숫자를 기록하고 수정 사항을 배포한 다음 동일한 페이지를 다시 측정하고 두 보고서를 나란히 비교하십시오.
DevSuite Pro 도크에서 Core Web Vitals 아이콘을 클릭합니다. 페이지에 이미 기록된 내용을 사용하여 측정항목 타일이 바로 나타납니다.
LCP는 페이지 로드가 시작될 때만 의미가 있으므로 신뢰할 수 있는 읽기를 원할 때 패널을 열어서 다시 로드하세요.
전체 페이지를 스크롤하여 CLS를 실행하고 클릭하고 탭하고 입력하여 INP 측정을 생성합니다. 이동하면서 타일이 업데이트됩니다.
LCP 요소, 레이아웃 변경 소스 또는 느린 상호 작용 옆에 있는 표시를 누릅니다. 페이지가 해당 페이지로 스크롤되어 개요가 설명되므로 어떤 요소가 담당하는지에 대한 모호함이 없습니다.
모든 지표, 등급 및 선택기에 대한 일반 텍스트 요약을 보려면 보고서 복사를 클릭하세요. CLS 및 INP를 처음부터 다시 시작하려면 재설정을 누르세요.
