LCP 사례 소견과 뒤처리

사례 기록 앞머리의 개요

LCP는 진단 기록에서는 Largest Contentful Paint, 최대 콘텐츠 표시 시간 라는 이름으로도 붙는다.¹ 사례지 분류로는 테크니컬 SEO 용어 쪽에 놓인다.² 방문자 눈에 들어오는 영역에서 덩치가 가장 큰 요소가 다 그려진 시점을 열기 시작한 순간과 견주어 나타낸 값이다.

예를 세우게 된 경위

홈페이지상위노출을 겨냥한 사이트의 상태를 적어 둘 때 LCP가 자주 지적되는 배경은 이렇다. 첫 응답이나 전체 로딩 완료 시점만으로는 방문자가 내용을 봤는지 알 수 없어, 주요 내용이 보이는 순간을 재는 지표가 필요해졌다.

가상의 상태

기록지에 적히는 상황을 떠올려 보기 위해 LCP를 두고 가정한 사례 하나를 적는다. 예를 들어 첫 화면을 큰 사진으로 채운 소개 페이지라면 그 사진 한 장을 먼저 받게 하는 설정만으로 값이 눈에 띄게 줄어든다.

기록에 드러난 경로

기록지 뒤쪽의 근거를 펼치면 움직임은 다음과 같다. 브라우저는 화면에 그려지는 요소 가운데 가장 큰 것을 계속 갱신해 기록하고, 방문자가 조작을 시작하면 그때까지의 마지막 값을 확정한다.

고치다 생긴 문제

사례지에 같은 지적이 되풀이되는 대목을 모아 보면 LCP와 닿아 있는 함정은 이렇다. 대표 이미지에 지연 로드를 걸거나 글꼴을 늦게 받으면 값이 크게 나빠지고, 느린 서버 응답은 이후 단계를 모두 밀어낸다.

결과를 확인하는 방법

사이트 전체를 훑는 진단은 콘텐츠전략 항목 쪽으로 넘어간다.³ 측정 도구의 진단 화면에서 어떤 요소가 가장 큰 것으로 잡혔는지 확인하고, 실사용 기록에서 느린 쪽 방문의 값을 함께 본다.

고치는 쪽이 한 일

소견을 받은 쪽이 손에 쥔 일로 옮기면 손댄 작업은 이렇다. 진단 화면에서 지목된 요소를 찾아 지연 로드를 끄고 미리 불러오기를 걸며, 이미지 크기를 화면 폭에 맞게 줄여 다시 측정한다.

옆 칸의 항목과 맞대어 보는 칸

고치는 방법이 비슷해 보여서 LCP와 대조할 항목 하나를 함께 적는다. 첫 바이트 도달 시간과 보는 자리가 다르다. 그쪽은 서버가 응답을 시작한 순간이고 이 지표는 방문자가 내용을 눈으로 보는 순간이다.

오래된 해석

짧은 요약글에서 옮겨진 말 중에 LCP에 대한 속설은 이렇게 정리된다. 전체 로딩이 끝난 시간으로 생각하는 사람이 많지만 화면에 보이는 가장 큰 요소가 기준이라, 아래쪽 내용이 늦게 와도 값은 좋을 수 있다.

압축한 정리

홈페이지상위노출을 두고 주고받는 작업 메모에 LCP를 정리해 넣는다면 다음과 같다. 화면에서 가장 큰 알맹이가 그려질 때까지 기다린 시간으로 체감 속도를 나타낸다.

함께 볼 읽을거리

이 칸 다음에 넘겨 볼 표제어로 코어 웹 바이탈과 INP가 옆에 놓여 있다. 리포트 색인 아래쪽에는 CLS와 클릭 뎁스 칸도 같은 묶음에 들어 있다. 코어 웹 바이탈을 이루는 세 지표 가운데 화면 표시 속도를 맡고, 서버 응답이 늦어지면 값이 함께 밀린다.