Core Web Vitals, 광고 랜딩에서 LCP와 INP를 줄이는 현실적인 방법
LCP, INP, CLS 기준값과 광고 랜딩에서 가장 자주 문제가 되는 원인, 태그와 폰트와 이미지를 다루는 순서를 정리했습니다.
광고를 눌러 들어온 방문자는 첫 화면이 늦게 뜨면 기다려주지 않습니다. 광고비를 내고 데려온 방문자를 첫 화면에서 놓치지 않으려면, 검색엔진이 보는 Core Web Vitals 지표를 기준으로 속도를 점검하는 것이 가장 객관적입니다.
세 가지 지표와 기준값
| 지표 | 의미 | 권장 기준 |
|---|---|---|
| LCP | 가장 큰 콘텐츠가 그려지기까지의 시간 | 2.5초 이하 |
| INP | 클릭, 탭, 키 입력에 반응하기까지의 지연 | 200ms 이하 |
| CLS | 화면이 예기치 않게 밀리는 정도 | 0.1 이하 |
이 기준은 페이지 방문의 75퍼센트가 만족해야 "좋음"으로 평가합니다. INP는 2024년 3월부터 FID를 대체해 Core Web Vitals에 들어갔습니다.
랩 데이터와 실제 데이터의 차이
Lighthouse나 PageSpeed Insights의 위쪽 점수는 정해진 기기와 네트워크로 시뮬레이션한 랩 데이터입니다. 같은 페이지에 대한 크롬 사용자 경험 보고서(CrUX) 기반 실제 사용자 데이터가 함께 표시되는데, 판정은 이 실제 데이터를 쓰는 것이 원칙입니다. 방문자가 적은 신규 랜딩은 실제 데이터가 아예 없을 수 있어, 이때는 랩 데이터로 방향을 잡고 트래픽이 쌓인 뒤 실제 데이터를 확인합니다.
LCP를 줄이는 순서
광고 랜딩의 LCP 요소는 대부분 첫 화면의 큰 이미지나 큰 제목입니다.
- 서버 응답 시간(TTFB): 정적 생성과 엣지 배포로 서버가 응답하는 시간을 줄입니다. 이후 모든 단계의 출발점입니다.
- 히어로 이미지 처리: LCP 이미지는 지연 로딩하지 않습니다.
fetchpriority="high"를 주고, 미리 불러오도록 하며, 현대적인 포맷과 알맞은 크기로 제공합니다. - 렌더링 차단 제거: 첫 화면에 필요한 CSS는 문서 안에 넣고 나머지는 늦춥니다.
- 웹폰트: 쓰는 글자만 담은 서브셋으로 줄이고,
font-display: swap을 둡니다. 한글 폰트는 서브셋 여부에 따라 크기가 크게 달라집니다.
INP를 줄이는 순서
INP는 자바스크립트가 메인 스레드를 오래 붙잡을 때 나빠집니다. 광고 랜딩에서는 대개 서드파티 스크립트가 주범입니다.
- 채팅 위젯, 여러 광고 픽셀, 히트맵, A/B 테스트 도구는 각각 메인 스레드를 쓰므로 정말 필요한 것만 남깁니다.
- 첫 화면과 무관한 스크립트는 사용자 상호작용 이후나 한가한 시간에 불러옵니다.
- 50ms를 넘는 긴 작업을 쪼개고, 클릭 핸들러 안에서 무거운 계산이 돌지 않게 합니다.
- 브라우저에서 돌던 추적 태그의 일부를 서버로 옮기면 클라이언트 스크립트 부담이 줄어듭니다.
CLS를 줄이는 순서
- 이미지, 동영상, 광고 슬롯의 가로세로 크기를 미리 지정해 공간을 확보합니다.
- 쿠키 배너, 프로모션 띠 같은 요소를 뒤늦게 위에 끼워 넣지 않습니다.
- 웹폰트가 늦게 적용되면서 글자 크기가 달라지는 현상은 폰트 대체 규칙과 서브셋으로 줄입니다.
측정과 운영
- PageSpeed Insights에서 URL을 넣어 실제 사용자 데이터와 랩 데이터를 함께 봅니다.
- 서치 콘솔의 Core Web Vitals 보고서로 사이트 전체에서 문제가 되는 URL 그룹을 찾습니다.
- 개선 전에 측정값을 기록해 두고, 배포 후 같은 방법으로 다시 측정합니다.
- 전환율은 속도 외에도 많은 요인이 있으므로, 개선 전후의 전환율 변화를 볼 때는 같은 소재와 예산 조건에서 비교하세요.
속도는 광고 성과를 올려주는 보장된 버튼이 아니라, 방문자를 잃는 이유 하나를 없애는 작업입니다. 그래서 측정으로 시작해서 측정으로 끝내는 것이 좋습니다.