세 지표와 각각이 잡아내는 것
각 지표는 페이지가 잘못됐다고 느껴지는 서로 다른 방식을 맡고 있고, 서로 독립적으로 실패합니다. 빠르게 불러오면서도 읽는 사람 엄지 아래에서 밀려나는 페이지가 있고, 완벽하게 안정적이면서 무언가를 보여주기까지 4초가 걸리는 페이지도 있습니다.
| 지표 | 다루는 것 | 좋음 | 이 값을 넘으면 개선 필요 |
|---|---|---|---|
| LCP | 로딩 | 2.5초 이하 | 4.0초 초과 |
| INP | 응답성 | 200밀리초 이하 | 500밀리초 초과 |
| CLS | 시각적 안정성 | 0.1 이하 | 0.25 초과 |
Largest Contentful Paint는 화면 안에서 가장 큰 요소의 렌더링이 끝난 순간을 표시합니다. 보통은 대표 이미지나 제목 블록이죠. «페이지가 도착한 것처럼 보인다»의 대역이며, 그래서 첫 페인트 같은 옛 표지를 이깁니다. 빈 화면이 빨리 칠해진다고 페이지가 빨리 불러와진 것은 아니니까요.
Interaction to Next Paint는 2024년 3월에 First Input Delay를 대신해 안정 Core Web Vital이 되었고, 그 교체에는 의미가 있었습니다. FID는 첫 상호작용이 처리되기 전의 지연만 재서, 첫 탭에는 날쌔게 답하고 이후 늘어지는 페이지를 실제보다 좋게 보이게 했습니다. INP는 방문 전체에 걸친 상호작용의 전체 지연을 보고, 그중 가장 나쁜 쪽에 가까운 값을 보고합니다.
Cumulative Layout Shift는 이미 그려진 다음에 움직이는 콘텐츠를 잽니다. 링크를 향해 손을 뻗었다가 그 아래로 도착한 광고를 누르게 되는 그 보편적 경험 뒤에 있는 지표입니다. 시간이 아니라 점수이기 때문에, 페이지 후반의 심한 밀림 한 번이 숫자 전체를 지배할 수 있습니다.
75번째 백분위에서, 필드 데이터로 평가
팀들이 발이 걸리는 지점이 여기입니다. 평가는 28일 이동 창에서 페이지 로드의 75번째 백분위를 쓰고, 모바일과 데스크톱을 나눠 봅니다. 중앙값이 편안해도 느린 꼬리가 있으면 그대로 떨어집니다. 의도된 설계이고, 이 지표가 말하는 대상은 가장 힘든 4분의 1이지 평범한 방문자가 아닙니다.
또한 데이터가 필드 데이터라는 뜻이기도 합니다. 실제 방문에서 모은 것이지 실험실 실행이 아닙니다. 실험실 도구는 진단 기구입니다. 어떤 리소스가 렌더링을 붙잡고 있는지 알려주고, 그 일에는 맞는 도구입니다. 평가 자체는 아니며, 초록색 실험실 점수 옆에 떨어진 필드 평가가 있다고 모순은 아닙니다. 진짜 방문자가 당신이 테스트한 기기 앞에 있지 않다는 뜻입니다.
각 지표를 실제로 움직이는 것
원인은 화려하지 않고 사이트를 건너뛰어 반복됩니다. 일의 대부분은 의미 있는 첫 페인트 전에 브라우저가 무엇을 가져야 하는지 정하고, 나머지 전부에 그 줄의 자리를 내주지 않는 것입니다.
| 지표 | 흔한 원인 | 흔한 해결 |
|---|---|---|
| LCP | 느린 서버 응답 | 문서 캐싱, 리디렉션 사슬 줄이기 |
| LCP | 대표 이미지가 늦게 발견됨 | 미리 불러오기. 지연 로딩은 절대 금지 |
| LCP | 렌더링을 막는 CSS나 글꼴 | 핵심 CSS 인라인, font-display 사용 |
| INP | 메인 스레드의 긴 자바스크립트 작업 | 쪼개기, 필수 아닌 작업은 미루기 |
| INP | 무거운 서드파티 스크립트 | 늦게 불러오거나, 빼기 |
| CLS | 치수 없는 이미지와 임베드 | width와 height, 또는 aspect-ratio 지정 |
| CLS | 글꼴 교체로 본문이 다시 흐름 | 대체 글꼴 지표 맞추기, 글꼴 미리 불러오기 |
| CLS | 본문 위로 끼어드는 배너 | 채워지기 전에 자리를 잡아두기 |
서드파티 스크립트는 따로 짚을 값이 있습니다. INP 문제의 가장 흔한 원인이면서, 아무도 자기 몫이라 하지 않는 원인이기 때문입니다. 분석, 채팅, 실험, 동의 관리를 위해 넣은 태그 하나하나가 독자의 탭이 필요로 하는 바로 그 메인 스레드를 놓고 다툽니다. 감사에서 물을 만한 질문은 각각이 쓸모 있느냐가 아니라, 75번째 백분위에서 얼마를 치르느냐입니다.
페이지 경험은 신호들 사이에서 어디쯤인가
Google은 핵심 순위 시스템이 Core Web Vitals를 사용하지만 단일 "페이지 경험 신호"는 없다고 말합니다. 여전히 관련성이 최우선이며 좋은 Core Web Vitals가 상위 순위를 보장하지는 않습니다.
통과 임계값을 순위 보장으로 취급하지 않고 특히 중요한 템플릿에서 사용자가 직면하는 문제의 우선순위를 지정합니다. 경험이 좋지 않은 관련 페이지도 여전히 순위를 매길 수 있습니다. 쿼리를 놓치는 빠른 페이지는 빠르기 때문에 관련성이 없습니다.
실무에서 통하는 순서
떨어진 평가에서 출발한다면, 이 순서가 가장 흔한 낭비를 피하게 해줍니다. 이미 통과한 것을 다듬거나, 유입 없는 페이지를 고치는 일 말입니다.
- 필드 데이터를 먼저, 모바일과 데스크톱을 나눠 읽으세요. 보통 모바일만 떨어지고, 데스크톱을 고쳐도 아무것도 달라지지 않습니다.
- 어떤 지표가 어떤 페이지 그룹에서 떨어지는지 찾으세요. 템플릿은 함께 떨어집니다. URL 하나로는 알 수 있는 게 별로 없습니다.
- 원인을 실험실에서, 회선을 조인 채로 재현하세요. 실험실은 무엇이 느린지 알려주고, 필드는 그것이 문제라는 걸 이미 알려줬습니다.
- 가장 큰 단일 기여 요인을 고쳐서 배포하세요. 이 지표들은 부분 개선이 쌓여 움직입니다. 스위치 하나로 되는 일은 거의 없습니다.
- 판단은 28일 창을 기다린 뒤에. 평가는 뒤따라오는 평균이라, 오늘 낸 수정은 서서히 드러납니다.