Core Web Vitals 최적화와 사이트 속도: 적용 전후를 측정

Google의 기준값

실제 방문의 75번째 백분위수를 기준으로, 모바일과 데스크톱을 각각 평가합니다.

• LCP, 주요 콘텐츠의 로딩: 2.5초 이하이면 양호
• INP, 클릭, 탭, 키 입력에 대한 반응: 200ms 이하이면 양호. 2024년 3월에 FID를 대체했습니다
• CLS, 시각적 안정성: 0.1 이하이면 양호

랩 데이터

Lighthouse, Chrome DevTools, WebPageTest는 시뮬레이션된 반복 가능한 조건에서 페이지를 로드합니다. 문제를 진단하고 수정 사항을 즉시 확인하는 데 이상적입니다. 시뮬레이션된 페이지 로드에는 실제 상호작용이 없으므로 INP는 측정할 수 없고, 대신 총 차단 시간(TBT)을 대리 지표로 사용합니다.

현장 데이터

PageSpeed Insights와 Search Console에 표시되는 CrUX 보고서의 실제 Chrome 사용자 데이터입니다. Google이 실제로 사용하는 데이터이며 28일을 기준으로 하므로, 개선 효과가 온전히 나타나려면 몇 주가 걸립니다.

LCP

• 주요 이미지를 AVIF 또는 WebP로 제공하고, 크기를 맞추며, 높은 가져오기 우선순위 적용
• 가장 먼저 보이는 요소에는 지연 로딩 적용하지 않음
• 더 빠른 서버: 캐싱, CDN 또는 더 나은 호스팅

INP

• 긴 JavaScript 작업을 나누고 필수가 아닌 코드는 지연
• 제3자 스크립트 검토: 채팅 위젯, 지도, 픽셀, 쌓인 태그
• 매우 무거운 페이지에서 DOM을 더 가볍게 만들기

CLS

• 이미지, 동영상, 광고, iframe을 위해 공간을 미리 확보
• 콘텐츠를 밀어내지 않는 쿠키 배너
• 레이아웃 이동 없이 로드되는 웹 폰트

측정, 수정, 다시 측정

• 템플릿별 기준선: 홈, 서비스, 카테고리, 상품
• 실패한 지표마다 원인 진단
• 영향도와 노력에 따라 순위를 매기고, 출시 전에 테스트한 수정 사항
• 모든 변경 후 랩 검증
• 28일 동안의 현장 추적과 Search Console에서의 검증

가치가 있는 경우

• Search Console에서 URL이 부실하거나 개선이 필요하다고 표시되는 경우
• 광고비를 쓰고 있는데 모바일에서 랜딩 페이지가 느린 경우
• 스토어의 상품 페이지나 장바구니가 느린 경우

우선순위가 아닌 경우

• 현장 지표는 이미 양호하고 문제는 콘텐츠인 경우
• 속도만으로 순위가 오를 것이라고 기대하는 경우. 관련성이 더 중요합니다
• 곧 사이트를 새로 만들 예정인 경우. 새 프로젝트에 성능을 처음부터 반영하십시오

보고서와 변경 사항

• 현장 데이터와 랩 데이터가 포함된 템플릿별 기준선 보고서
• 지표별로 우선순위가 매겨진 원인
• 적용되고 문서화된 수정 사항
• 인계 시점의 랩 결과와 28일 후의 현장 결과 비교
• 성과를 유지하기 위한 페이지 용량과 스크립트 한도

템플릿 하나를 측정하고 수정

함께 상품 페이지나 광고 랜딩 페이지처럼 핵심 템플릿을 하나 고르고, 가장 나쁜 지표의 주요 원인을 수정하며, 랩에서 개선을 확인합니다. 28일이 필요한 현장 비교는 나중으로 예약됩니다. 범위와 조건은 시작 전에 서면으로 합의합니다.