LCP·FID·CLS 수치를 CSS로 개선하는 실전 방법
"Core Web Vitals" 세 지표(LCP, FID, CLS)를 구글 권장 기준치 안으로 맞추면 검색 순위가 오르고 사용자 이탈률이 줄어든다. CSS 관점에서 고칠 수 있는 항목만으로도 CLS는 거의 0에 가깝게 만들 수 있고, LCP도 20~30% 단축이 가능하다. 서버나 JS를 건드리지 않고 CSS만으로 할 수 있는 최적화가 생각보다 많다.
구글 서치콘솔에서 Core Web Vitals 리포트를 처음 봤을 때 빨간 항목이 잔뜩 있어서 당황했던 경험이 있을 거다. 특히 CLS(누적 레이아웃 이동)는 광고 때문에 악화되는 경우가 많고, LCP(최대 콘텐츠 렌더링)는 이미지와 폰트 때문에 느려진다. 이 글에서는 "Core Web Vitals" 각 지표를 CSS 관점에서 체크하고 수치를 잡는 방법을 정리했다.
Core Web Vitals 세 지표 한눈에 이해하기
구글이 정의한 "Core Web Vitals"는 세 가지 지표로 구성된다.
- LCP (Largest Contentful Paint): 페이지에서 가장 큰 콘텐츠(주로 히어로 이미지 또는 큰 텍스트 블록)가 로딩되는 시간. 2.5초 이하 = 좋음, 4초 이상 = 나쁨.
- FID (First Input Delay) / INP (Interaction to Next Paint): 사용자의 첫 상호작용(클릭, 탭)에서 브라우저가 반응하는 시간. 100ms 이하 = 좋음. 2024년부터 FID는 INP로 대체.
- CLS (Cumulative Layout Shift): 페이지 로딩 중 콘텐츠가 얼마나 이동하는지. 0.1 이하 = 좋음, 0.25 이상 = 나쁨.
블로그에서 가장 영향이 큰 것은 CLS와 LCP다. 광고 삽입, 이미지 크기 미지정, 웹폰트 로딩이 주범인 경우가 많다.
LCP 개선 – CSS로 렌더링 속도 높이기
LCP를 CSS 관점에서 개선하는 핵심은 위 화면(above the fold) 렌더링을 빠르게 만드는 것이다.
첫째, 히어로 이미지(첫 화면의 큰 이미지)에 `loading="eager"` 속성 적용. CSS에서는 해당 이미지 컨테이너에 `content-visibility: auto`를 화면 밖 요소에만 적용하고, 첫 화면 요소엔 적용하지 않는다.
/* 화면 밖 콘텐츠만 지연 렌더링 */
.below-fold {
content-visibility: auto;
contain-intrinsic-size: 200px;
}
둘째, CSS 배경 이미지 대신 `
` 태그를 사용한다. CSS `background-image`는 LCP 측정 대상이지만 최적화 힌트(preload, fetchpriority)를 주기 어렵다. 히어로 이미지는 반드시 `
` 태그로 마크업하고 `fetchpriority="high"` 속성을 추가한다.
CLS 개선 – 레이아웃 이동의 주범 찾기
"Core Web Vitals" 중 CSS로 가장 직접적으로 개선할 수 있는 게 CLS다. CLS 주요 원인과 CSS 해결책을 정리했다.
원인 1: 이미지 크기 미지정
이미지에 width/height 속성이 없으면 이미지가 로딩되면서 아래 콘텐츠가 밀린다.
/* 해결: aspect-ratio로 공간 예약 */
img {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
}
원인 2: 웹폰트 교체 시 텍스트 이동
시스템 폰트 → 웹폰트로 교체될 때 글자 크기가 달라서 레이아웃이 이동한다.
/* 해결: font-display: optional 또는 swap */
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2');
font-display: optional; /* CLS 최소화 */
}
광고와 이미지가 CLS를 악화시키는 이유
블로그 CLS의 가장 큰 원인 중 하나가 동적으로 삽입되는 광고다. 애드센스 광고는 페이지가 로딩된 후에 삽입되는데, 이때 광고 컨테이너에 높이가 지정되어 있지 않으면 광고가 나타나면서 아래 콘텐츠가 순식간에 밀려 내려간다. 독자가 글을 읽다가 갑자기 화면이 이동하는 그 현상이다.
해결책은 광고 컨테이너에 최소 높이를 미리 지정하는 것이다.
.ad-container {
min-height: 90px; /* 가장 작은 광고 단위 높이 */
width: 100%;
}
/* 데스크탑은 더 크게 */
@media (min-width: 768px) {
.ad-container {
min-height: 250px;
}
}
이렇게 하면 광고가 로딩되기 전부터 그 공간이 확보되어 있어서 광고가 나타나도 레이아웃이 이동하지 않는다.
FID/INP 개선 – CSS 애니메이션 최적화
CSS 애니메이션이 메인 스레드를 점유하면 사용자 입력에 대한 반응이 느려져 FID/INP가 나빠진다. 해결책은 GPU에서 처리되는 속성만 애니메이션에 쓰는 것이다.
/* GPU 가속 속성만 사용 */
.animated-element {
transform: translateX(0);
opacity: 1;
transition: transform 0.3s ease, opacity 0.3s ease;
will-change: transform, opacity; /* GPU 힌트 */
}
/* 피해야 할 속성들 */
/* top, left, width, height, margin, padding은
레이아웃 재계산을 유발하므로 애니메이션에 쓰지 말 것 */
폰트 로딩이 LCP에 미치는 영향과 해결법
웹폰트 로딩이 완료될 때까지 텍스트가 안 보이는 현상(FOIT: Flash of Invisible Text)이 LCP를 크게 악화시킨다. 해결책 세 가지를 순서대로 적용한다.
- `font-display: swap` 설정으로 폰트 로딩 전에 시스템 폰트를 먼저 보여줌.
- 중요 폰트를 ``로 우선 로딩.
- 폰트 파일을 woff2 포맷으로 최적화(용량이 가장 작음).
PageSpeed Insights로 점수 확인하는 법
구글 PageSpeed Insights(pagespeed.web.dev)에서 블로그 URL을 입력하면 "Core Web Vitals" 수치와 개선 제안을 받을 수 있다. 모바일 탭과 데스크탑 탭을 각각 확인해야 한다. 점수보다 실제 필드 데이터(크롬 유저 실사용 데이터)를 우선적으로 봐야 한다. 목표는 LCP 2.5초 이하, CLS 0.1 이하, INP 200ms 이하다.
참고 출처
- Google Core Web Vitals 공식 문서
- PageSpeed Insights
- Google Search Central – CWV
- MDN – content-visibility
- web.dev – CLS 개선