블로그나 웹서비스 운영자에게 페이지 로딩 속도는 사용자 경험과 이탈률에 직접적인 영향을 줍니다. 구글은 웹 성능 지표인 Core Web Vitals(코어 웹 바이탈) 를 검색 품질 평가 요소 중 하나로 활용합니다.
속도가 느린 사이트는 독자가 글을 읽기 전에 이탈할 가능성이 커집니다. 광고를 운영하는 블로그라면 광고 영역의 레이아웃 이동도 함께 관리해야 합니다.
본문에서는 3대 핵심 웹 지표의 개념과 프론트엔드 및 마크다운 블로그에서 개선할 수 있는 실전 방법을 정리합니다.
1. Core Web Vitals 3대 핵심 지표 이해
구글이 PageSpeed Insights나 Search Console을 통해 측정하는 핵심 3대 지표는 다음과 같습니다.
| 지표명 | 약자 | 설명 및 평가 기준 (Good) | 실무 주요 지연 원인 |
|---|---|---|---|
| 최대 콘텐츠 렌더링 시간 | LCP (Largest Contentful Paint) | 화면에서 가장 큰 요소(이미지나 제목)가 완전히 표시되는 시간 👉 2.5초 이내 | 최적화되지 않은 고용량 이미지, 렌더링 차단 폰트 및 JS |
| 누적 레이아웃 이동 | CLS (Cumulative Layout Shift) | 로딩 중 글자나 버튼이 갑자기 위아래로 덜컹거리며 밀리는 현상 👉 0.1 이하 | 사이즈(width/height)가 지정되지 않은 이미지 및 애드센스 광고 |
| 다음 페인트에 대한 반응 | INP (Interaction to Next Paint) | 사용자가 클릭이나 키보드를 입력했을 때 화면이 반응하기까지의 지연 👉 200ms 이내 | 무거운 자바스크립트 연산, 메인 스레드 블로킹 |
⚠️ FID에서 INP로의 완전 대체
과거의 첫 입력 지연(FID) 지표는 2024년 이후 폐지되고, 페이지 전체 생애주기 동안의 반응 속도를 깐깐하게 측정하는 INP(Interaction to Next Paint) 가 표준으로 안착했습니다.
2. 지표별 100점 만점을 위한 실전 해결 전략
① LCP(최대 렌더링 시간) 최적화: 이미지 다이어트와 프리로드
페이지 상단에 위치한 메인 히어로 이미지나 대표 이미지(Thumbnail)는 LCP에 큰 영향을 주는 경우가 많습니다.
- 차세대 포맷(WebP, AVIF) 전환: 기존 PNG, JPG 대비 파일 크기를 50~70%까지 줄여줍니다.
fetchpriority="high"속성 부여: 브라우저에게 메인 이미지를 가장 먼저 다운로드하라고 명시합니다.- Lazy Loading 맹신 금지: 스크롤 아래에 있는 이미지에는
loading="lazy"를 넣어야 하지만, 첫 화면(Above the Fold)에 보이는 이미지에 Lazy Loading을 넣으면 LCP 지표가 오히려 크게 악화됩니다!
<!-- 올바른 메인 히어로 이미지 최적화 예시 -->
<img
src="/images/hero-banner.webp"
alt="메인 배너"
width="1200"
height="630"
fetchpriority="high"
loading="eager"
/>② CLS(레이아웃 이동) 최적화: 광고와 이미지에 ‘공간 지정하기’
글을 읽으려는 순간 배너 광고나 폰트가 로딩되면서 텍스트가 밑으로 밀려 잘못 클릭해 본 경험이 있으실 겁니다. 구글은 이 현상(CLS)을 매우 강력하게 페널티 줍니다.
- 이미지와 비디오에 명시적
width,height지정: 브라우저가 이미지가 다운로드되기 전에도 해당 레이아웃 영역을 미리 비워두어 밀림 현상을 막습니다. - 광고 박스에 고정 최소 높이(
min-height) 부여: 광고가 로딩되기 전에 컨테이너가 0px이었다가 갑자기 250px로 팽창하면서 발생하는 CLS를 줄일 수 있습니다.
/* 애드센스 본문 상단 광고 CLS 방지용 CSS */
.adsense-container {
display: block;
min-height: 280px; /* 광고가 들어올 자리를 미리 확보! */
background-color: #f8f9fa; /* 로딩 전 빈 박스 시각적 안정감 제공 */
}③ INP(반응 지연) 최적화: 무거운 자바스크립트 쪼개기
버튼을 눌렀는데 반응이 느린 이유는 브라우저의 메인 스레드가 무거운 스크립트 실행으로 꽉 막혀있기 때문입니다.
- Web Worker 활용: 무거운 수학적 계산이나 데이터 가공은 메인 스레드가 아닌 백그라운드 워커로 분리합니다.
- Debounce와 Throttle 적용: 검색창 입력 이벤트가 발생할 때마다 API를 호출하지 말고, 입력이 끝난 후 300ms 뒤에 한 번만 실행되도록 제어합니다.
3. 애드센스 블로거를 위한 속도와 수익 최적화 팁
애드센스 광고 스크립트는 외부 도메인에서 수많은 Tracking 자바스크립트를 불러오기 때문에 웹 속도를 저하하는 가장 큰 요소입니다. 속도를 지키면서 수익도 유지하는 2가지 비결입니다.
- 광고 스크립트 지연 로딩 (Lazy Load Adsense)
사용자가 페이지에 접속하자마자 광고를 부르지 않고, 스크롤 이벤트나 마우스 이동 이벤트가 발생할 때 혹은 2~3초 뒤에 애드센스 스크립트를 로드하면 PageSpeed 점수가 50점에서 95점 이상으로 수직 상승합니다. - 웹 폰트 최적화 (
font-display: swap)
구글 폰트 적용 시 CSS에font-display: swap을 추가하면 폰트 파일 다운로드가 완료되기 전까지 시스템 기본 폰트로 글자를 바로 보여주어 빈 화면(FOUT/FOIT) 지연을 막습니다.
요약 및 결론
- Core Web Vitals(LCP, CLS, INP) 최적화는 사용자 경험과 검색 품질 개선에 도움이 되는 기술 작업입니다.
- 첫 화면 이미지 크기를 줄이고, 이미지와 광고 영역에 안정적인 크기를 지정하면 레이아웃 밀림을 줄일 수 있습니다.
- Google PageSpeed Insights로 현재 지표를 확인하고, 영향이 큰 항목부터 하나씩 개선하는 방식이 현실적입니다.