Core Web Vitals는 Google이 사이트가 사람에게 어떻게 느껴지는지를 설명하는 세 가지 지표입니다. "페이지 용량이 얼마인가"가 아니라, 의미가 얼마나 빨리 나타났는지, 페이지가 클릭에 얼마나 빨리 반응했는지, 손가락 아래에서 콘텐츠가 튀지 않았는지입니다.
쉬운 말로 설명하는 세 가지 지표
-
LCP — 화면에 주요 요소(큰 이미지나 제목)가 나타난 시점. 방문자가 어디에 도달했는지 이해하는 순간입니다.
-
INP — 페이지가 클릭에 얼마나 빨리 반응하는가. FID를 대체했으며 첫 상호작용뿐 아니라 모든 상호작용을 고려합니다.
-
CLS — 레이아웃이 얼마나 튀는가. 전형적인 예: 버튼을 겨냥하는데 위에서 배너가 로드되어 손가락이 엉뚱한 곳을 누릅니다.
필드 데이터와 실험실 데이터
혼란의 주요 원인입니다. PageSpeed는 두 가지 다른 것을 나란히 보여줍니다:
-
실험실 테스트 — 에뮬레이트된 기기에서의 단일 실행. 디버깅에 편리합니다.
-
필드 데이터 — 당신의 방문자들의 브라우저가 28일 동안 실제로 측정한 것. 평가에는 바로 이것이 반영됩니다.
여기서 두 가지 흔한 상황이 나옵니다. 실험실에서는 95인데 필드에서는 "나쁨" — 즉 당신의 사용자들의 기기와 네트워크가 에뮬레이터보다 나쁘다는 뜻입니다. 반대로: 필드 데이터가 아예 없는 경우 — 통계를 낼 만큼 트래픽이 충분하지 않기 때문입니다.
각 지표를 무엇이 망치는가
LCP — 압축되지 않고 최신 포맷이 아닌 첫 화면의 무거운 이미지; 텍스트보다 먼저 로드되는 폰트; 느린 서버 응답.
INP — 클릭 시점에 스레드를 점유하는 무거운 JavaScript. 대부분 당신의 코드가 아니라 서드파티 스크립트 모음입니다: 분석, 채팅, 픽셀, 위젯.
CLS — 크기가 지정되지 않은 이미지, 늦게 적용되는 폰트, 나타나서 모든 것을 아래로 밀어내는 배너와 알림.
거의 모두가 저지르는 실수
너비와 높이 속성이 없는 이미지. 브라우저는 얼마나 공간을 남겨야 할지 모르고 텍스트를 바로 그리다가, 파일이 도착하면 페이지를 밀어냅니다. CLS의 가장 흔하고 고치기 가장 저렴한 원인: 마크업의 속성 두 개.
판매와의 관계에 대해 정직하게
속도는 전환에 영향을 주지만, 판매의 레버가 아니라 진입 조건입니다. 느린 사이트는 사람들이 제안을 보기도 전에 일부를 잃습니다 — 특히 2초와 6초의 차이가 모든 것을 결정하는 모바일 인터넷에서.
동시에 제안이 약한 빠른 사이트는 판매를 시작하지 못합니다. 순서는 이렇습니다: 먼저 명백히 나쁜 것 — 대기 시간, 튀는 레이아웃 — 을 제거하고, 그다음 콘텐츠를 다룹니다. 페이지에 살 것이 없는데 90점에서 98점으로 끌어올리는 것은 잘못된 것을 최적화하는 것입니다.
점검을 어디서부터 시작할까
-
실험실 데이터뿐 아니라 필드 데이터를 확인하십시오.
-
모바일 버전을 확인하십시오: 거의 항상 지표가 더 나쁩니다.
-
하나의 메인 페이지가 아니라 여러 유형의 페이지를 확인하십시오.
-
이미지와 서드파티 스크립트부터 시작하십시오 — 문제의 대부분이 여기서 발생합니다.
PageSpeed가 빨간색을 보여주는데 무엇부터 잡아야 할지 모르겠다면 — 보고서를 분석하여 무엇이 효과가 있고 무엇이 미미한 것인지 알려드릴 수 있습니다.
