LCP·INP·CLS — 점수 올리려면 무엇부터 고쳐야 하나 (우선순위 정리)

PageSpeed Insights 에 사이트를 넣어 보면 점수와 함께 LCP, INP, CLS 라는 지표가 나옵니다. 셋 다 "개선 필요"라고 나왔을 때 무엇부터 손대야 할까요? 결론부터: 대부분의 사이트는 LCP(이미지) → CLS(광고·배너 영역) → INP(스크립트) 순서로 고치는 것이 효율이 좋습니다. 각 지표가 무엇이고 왜 이 순서인지 설명드립니다.

세 지표의 의미와 합격선

• LCP(Largest Contentful Paint): 화면에서 가장 큰 요소가 뜨는 시간. 2.5초 이하가 양호, 4초를 넘으면 나쁨.
• INP(Interaction to Next Paint): 클릭·입력에 화면이 반응하는 시간. 200ms 이하 양호, 500ms 초과 나쁨. 2024년 3월부터 기존 FID 를 대체했습니다.
• CLS(Cumulative Layout Shift): 로딩 중 화면이 밀리는 정도. 0.1 이하 양호, 0.25 초과 나쁨.

주의할 점 하나. PSI 상단의 "실제 사용자 데이터"(CrUX)와 하단의 "실험실 데이터"는 다른 것입니다. 순위에 관여하는 것은 실제 사용자 데이터 쪽이므로, 실험실 점수 100점에 집착할 필요는 없습니다.

LCP 부터 고치는 이유 — 원인의 8할이 이미지입니다

한국 사이트의 LCP 요소는 대부분 메인 배너 이미지입니다. 원본 4~5MB 사진을 그대로 올려 둔 경우가 흔한데, WebP 변환과 적정 크기 리사이즈만으로 LCP 가 1초 이상 줄어드는 일이 드물지 않습니다. 첫 화면 이미지에는 lazy loading 을 걸지 않는 것, 웹폰트가 렌더링을 막지 않게 하는 것까지가 LCP 기본 처방입니다.

CLS — 광고·배너·이미지에 자리를 미리 잡아 주세요

읽는 중에 화면이 아래로 밀리는 경험, 대부분 크기 지정 없는 이미지나 나중에 로드되는 광고 때문입니다. img 태그에 width/height 를 명시하고, 광고·배너가 들어갈 영역은 CSS 로 높이를 예약해 두면 CLS 는 대부분 잡힙니다. 고치는 비용 대비 효과가 가장 확실한 지표입니다.

INP — 마지막에 보는 이유

INP 악화의 주범은 과도한 자바스크립트입니다. 채팅 위젯, 분석 스크립트, 슬라이더 라이브러리가 겹겹이 쌓인 사이트가 특히 그렇습니다. 다만 원인 추적에 기술적 분석이 필요해서, 이미지·레이아웃부터 잡고 마지막에 손대는 것이 실무적으로 효율적입니다. 워드프레스 사이트라면 플러그인 정리가 먼저인데, 이 부분은 워드프레스가 느릴 때 점검 순서에서 따로 다룹니다.

흔한 착각 — 점수 100점이 목표가 아닙니다

PSI 실험실 점수를 100점으로 만드는 데 집착해 기능을 다 걷어내는 것은 본말전도입니다. 구글이 보는 것은 실제 방문자들의 28일 누적 데이터이고, 판정도 양호/개선 필요/나쁨의 구간이지 1점 단위 경쟁이 아닙니다. LCP 2.4초와 2.1초의 순위 차이보다, 4초에서 2.5초 안으로 들어오는 것이 의미 있는 변화입니다. 세 지표가 모두 "양호" 구간에 들어왔다면 속도보다 콘텐츠에 시간을 쓰는 것이 남는 장사입니다.

측정 환경도 통제하세요

같은 페이지도 측정 시점의 서버 상태·광고 로드에 따라 값이 출렁입니다. 개선 전후 비교는 최소 3회 측정의 중앙값으로 하고, 실제 사용자 데이터(CrUX)는 변경 후 4주가 지나야 온전히 반영된다는 점을 감안해서 판단하세요. 어제 고쳤는데 오늘 CrUX 값이 그대로인 것은 정상입니다.

측정 → 수정 → 재측정의 반복입니다

Core Web Vitals 는 한 번 고치고 끝나는 것이 아니라, 실제 사용자 데이터가 쌓이는 28일 주기로 재확인해야 합니다. 서치콘솔의 전용 리포트로 추세를 보는 방법은 서치콘솔 리포트 가이드에 있습니다. 속도 문제는 원인이 사이트마다 달라서, 저희는 유지보수 서비스에서 측정값 기준으로 관리합니다. 용어가 어려우면 용어사전의 LCP/INP/CLS 항목을 먼저 봐 주세요.

마지막으로 순서를 정리하면 이렇습니다. 오늘 PSI 로 세 지표의 현재 구간을 기록해 두고, 이미지 최적화(LCP)부터 적용 → 이미지·배너 영역 크기 예약(CLS) → 스크립트 정리(INP) 순으로 진행하면서 각 단계마다 재측정값을 기록하세요. 기록이 남아야 어떤 조치가 효과였는지 알 수 있고, 다음 사이트에서는 그 순서가 곧 체크리스트가 됩니다.