페이지 속도 점검 루틴｜모바일 LCP·INP를 줄이는 주간 체크 시트
요약: 같은 작업이라도 루틴으로 굳히면 성과가 누적됩니다. 이 글은 매주 30분 내에 실행 가능한 LCP·INP 중심 점검 시트와 스크린샷/지표 템플릿, 그리고 이미지·폰트·스크립트 우선순위를 제공합니다. 수치와 증거(로그·샷)를 남기면 ‘가치 부족’ 평가를 피할 만큼 재현 가능한 품질 관리가 됩니다.
서론｜왜 주간 루틴인가
페이지 경험은 한 번의 대수술보다 작은 개선의 반복에 강합니다. 매주 동일한 시각에 동일한 방법으로 측정·기록하면, 테마 교체나 글 누적에 따른 성능 변화를 선제적으로 파악할 수 있습니다. 특히 모바일의 LCP(최대 콘텐츠 표시)와 INP(상호작용 지연)는 새 이미지·폰트·스크립트의 영향에 예민하기에 루틴화가 필수입니다.
배경｜LCP·INP를 좌우하는 3요소
- 이미지: 히어로는 eager 로딩·고정 크기(폭/높이)·적절한 포맷(WebP/AVIF), 폴드 아래는 lazy.
- 폰트:
font-display: swap으로 텍스트 표시 지연 최소화, 서브셋/가변 폰트로 용량 절감. - 스크립트: 필수만 남기고
defer/async우선, 상단 블로킹 스크립트 제거.
실무 루틴｜주간 체크 6단계(30분)
1) 샘플링(5분)
모바일 상위 유입 3페이지 + 최신 발행 2페이지를 선정합니다.
2) 측정(5분)
- 브라우저 개발자도구 → Network/Performance 간단 측정 스샷 채취.
- 첫 뷰의 LCP 후보 요소(SVG/IMG/배경이미지/텍스트 블록)를 식별.
3) 원인 추정(5분)
히어로 이미지 용량·크기, 폰트 로딩, 상단 스크립트를 우선 점검합니다.
4) 수정(10분)
- 히어로:
loading="eager",width/height명시, 1200×630 WebP 재업로드. - 폰트: 불필요한 서체/웨이트 제거,
swap적용. - 스크립트: 위로 올라온 블로킹 스크립트는
defer로 하향.
5) 검증(3분)
수정 전후 스크린샷을 나란히 저장하고, LCP 후보가 바뀌었는지 확인합니다.
6) 기록(2분)
아래 템플릿으로 날짜·대상 URL·수정 항목·결과를 남깁니다.
템플릿｜스크린샷·지표 기록 양식
### 주간 속도 점검 기록 (모바일)
- 날짜: 2025-11-15 07:30
- 대상: /entry/슬러그
- LCP 후보: hero-img(1200×630, 280KB)
- INP 위험: 상단 메뉴 스크립트(초기 바인딩)
- 조치: hero WebP 재압축(210KB), width/height 명시, 메뉴 스크립트 defer
- 결과: LCP 2.6s → 2.0s, 입력 지연 체감 개선
- 스샷: before-1.png, after-1.png
/* LCP 후보 빠르게 찾기(개발자도구 콘솔) */
new PerformanceObserver((list)=>{for(const e of list.getEntries()){
console.log('LCP candidate:', e.element?.tagName, e.element);
}}).observe({type:'largest-contentful-paint', buffered:true});
우선순위｜이미지·폰트·스크립트 정렬
| 자원 | 조치 | 합격 기준 |
|---|---|---|
| 이미지 | 히어로 eager, 폴드 아래 lazy, WebP/AVIF, 크기 고정 | 히어로 ≤300KB, CLS 0.1↓ |
| 폰트 | subset/가변폰트, preload 1종, display:swap |
텍스트 FOUT 허용·지연 표시 없음 |
| 스크립트 | 불필요 제거, defer/async, 하단 배치 |
초기 입력 지연 체감 없음 |
팁: 한 주에 하나의 자원만 집중 개선하세요. 원인-결과가 또렷해집니다.
점검표｜합격 기준과 흔한 실수
- 필수: 히어로에
loading="eager"적용, 크기 속성 지정. - 필수: 폰트는
swap·서브셋화, 불필요 웨이트 삭제. - 필수: 상단 블로킹 스크립트 제거 또는
defer. - 실수: 빈 단락으로 간격 만들기, 원본 JPEG 그대로 업로드, 동일 효과 스크립트 중복.
실천 요약
- 상위 유입 3페이지 + 최신 2페이지로 샘플링.
- 히어로/폰트/스크립트만 골라 원인 추정.
- 이미지 재압축·폰트 swap·스크립트 defer로 수정.
- 전후 스샷과 수치를 템플릿에 기록.