웹사이트가 느리면 사용자는 기다려주지 않는다. Google의 연구에 따르면 페이지 로딩 시간이 1초에서 3초로 늘어날 때 모바일 이탈률은 32% 상승한다. 성능 문제를 방치하면 검색 순위 하락, 전환율 저하, 광고 수익 감소로 이어진다. 이 글에서는 Google Lighthouse로 성능 문제를 진단하고, 점수를 90점 이상으로 끌어올리는 실전 방법을 단계별로 정리한다.
Lighthouse란 무엇이고 왜 중요한가?
Lighthouse는 Google이 만든 오픈소스 웹 감사 도구다. Chrome 브라우저의 DevTools에 기본 내장되어 있으며, 성능(Performance), 접근성(Accessibility), 권장사항(Best Practices), SEO 네 영역을 0~100점으로 평가한다.
이 중 성능 점수는 Google의 Core Web Vitals 지표와 직접 연결된다. Core Web Vitals는 2021년부터 Google 검색 순위에 공식 반영된 기준으로, 페이지의 로딩 속도·상호작용 응답성·시각적 안정성을 수치로 측정한다.
Lighthouse 점수가 높다는 것은 단순히 숫자가 올라가는 것이 아니다. 실제 사용자 경험이 개선되고 검색 노출이 늘어난다는 의미다.
측정 방법: Chrome에서 F12(개발자 도구) → Lighthouse 탭 → “Analyze page load” 클릭. 또는 PageSpeed Insights에서 URL을 입력하면 실제 사용자 데이터(CrUX)와 함께 확인 가능하다.
Lighthouse 점수를 구성하는 Core Web Vitals는 무엇인가?
Core Web Vitals는 세 가지 핵심 지표로 구성된다.
| 지표 | 측정 내용 | Good 기준 | Lighthouse 비중 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | 가장 큰 콘텐츠 요소가 화면에 그려지는 시간 | 2.5초 이내 | 25% |
| INP (Interaction to Next Paint) | 클릭·탭·키 입력 후 화면 반응 시간 | 200ms 이내 | 10% |
| CLS (Cumulative Layout Shift) | 로딩 중 콘텐츠가 예고 없이 이동하는 정도 | 0.1 이하 | 15% |
INP는 2024년 3월 기존 FID 지표를 대체하며 Core Web Vitals의 공식 지표로 편입됐다. 따라서 이전에 FID만 최적화했다면 INP 기준으로 재점검이 필요하다.
세 지표 중 Lighthouse 성능 점수에 가장 큰 영향을 주는 것은 LCP다. LCP 개선이 점수 상승의 가장 빠른 길이다.
LCP 점수를 빠르게 높이는 방법은?
LCP의 주범은 대부분 이미지다. 아래 네 가지 방법을 순서대로 적용하면 LCP를 효과적으로 줄일 수 있다.
1. 이미지를 WebP 포맷으로 변환한다
WebP는 PNG·JPEG 대비 동일 화질에서 파일 크기를 평균 25~35% 줄인다. 워드프레스 환경에서는 Imagify 또는 ShortPixel 플러그인으로 업로드 시 자동 변환이 가능하다. 직접 변환하려면 Squoosh를 활용한다.
2. <img> 태그에 width와 height를 반드시 명시한다
브라우저가 이미지 로드 전에 공간을 미리 확보하므로 CLS도 함께 개선된다.
3. Hero 이미지를 preload로 미리 로드한다
페이지 상단의 메인 이미지는 <link rel="preload"> 태그로 우선 로드하도록 설정한다.
html
<link rel="preload" as="image" href="/hero-image.webp">4. 서버 응답 속도(TTFB)를 개선한다
TTFB(Time to First Byte)가 0.8초를 초과하면 LCP에 직접적인 영향을 준다. 워드프레스라면 WP Rocket 같은 캐싱 플러그인을 설치하고 CDN을 적용해 정적 자산의 전송 거리를 줄인다.
CLS와 INP는 어떻게 개선할 수 있을까?
CLS 개선: 레이아웃 이동의 가장 흔한 원인은 크기가 지정되지 않은 이미지와 뒤늦게 로드되는 광고다. 모든 이미지·비디오 요소에 width, height를 명시하고, 광고 슬롯에는 최소 높이를 미리 지정한다.
아래 CSS를 적용하면 이미지 비율을 유지하면서 CLS를 방지할 수 있다.
css
/* 이미지 비율 유지 + CLS 방지 */
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}INP 개선
INP의 주원인은 메인 스레드를 오래 점유하는 무거운 JavaScript다. 해결 방법은 세 가지다.
- 불필요한 서드파티 스크립트(채팅 위젯, 마케팅 툴 등)를 제거하거나 지연 로드한다.
<script>태그에defer또는async속성을 추가해 초기 렌더 차단을 방지한다.- 무거운 이벤트 핸들러 로직은
requestIdleCallback으로 분리해 유휴 시간에 처리한다.
Lighthouse 점수를 추가로 올리는 전략에는 무엇이 있을까?
렌더 블로킹 리소스 제거
CSS·JS 파일이 초기 렌더를 막는다면, Critical CSS만 인라인으로 포함하고 나머지는 비동기 로드한다. 워드프레스에서는 WP Rocket의 “Delay JavaScript Execution” 기능으로 손쉽게 적용할 수 있다.
번들 최적화
Vite나 webpack 같은 번들러의 Tree-shaking으로 실제 사용하는 코드만 번들에 포함시킨다. 번들 크기를 줄이면 TBT(Total Blocking Time)가 줄어 성능 점수에 직접 반영된다. Vite는 esbuild 기반으로 빌드 속도와 번들 최적화를 동시에 제공한다. (→ Vite vs Webpack 2026: 속도 차이가 얼마나 날까?)
코드 품질 관리
TypeScript를 도입하면 타입 오류 기반의 런타임 예외를 사전에 차단하여 페이지 오류율을 낮추고 Best Practices 점수에도 긍정적인 영향을 준다. (→ TypeScript를 도입하면 정말 버그가 줄어들까?)
폰트 최적화
Google Fonts를 사용한다면 font-display: swap을 적용해 폰트 로드 중 텍스트가 보이지 않는 FOIT 현상을 방지한다.
Lighthouse 점수를 정확하게 측정하려면 어떻게 해야 할까?
로컬 DevTools 측정값은 실제 사용자 환경과 다를 수 있다. 더 신뢰도 높은 데이터를 얻으려면 다음 두 가지를 병행한다.
- PageSpeed Insights: 실제 사용자 데이터(CrUX)와 Lighthouse 측정값을 함께 제공한다. 측정 환경을 표준화해 비교가 용이하다.
- Google Search Console Core Web Vitals 보고서: 내 사이트를 방문한 실제 사용자의 28일 누적 데이터를 기반으로 문제 URL을 분류해준다.
또한 Lighthouse 점수는 측정할 때마다 소폭 변동한다. 단일 측정값보다 3~5회 측정 후 평균값을 기준으로 삼자. 워드프레스 운영자라면 Google Search Console의 Core Web Vitals 보고서를 최소 월 1회 확인하는 습관을 들이는 것이 좋다.
자주 묻는 질문 (FAQ)
Q. Lighthouse 점수 몇 점이면 충분한가요?
Google은 성능 점수 기준으로 90~100점을 “Good”, 50~89점을 “Needs Improvement”, 49점 이하를 “Poor”로 분류한다. SEO와 광고 수익화를 목표로 한다면 성능과 SEO 두 영역 모두 90점 이상을 목표로 하되, 점수보다 실제 Core Web Vitals 지표(LCP 2.5초 이내, INP 200ms 이내, CLS 0.1 이하)가 “Good” 범위에 들어오는지가 더 중요하다. 점수는 같아도 실제 사용자 데이터가 Poor로 나오는 경우가 있으므로 Google Search Console에서 함께 확인해야 한다.
Q. 워드프레스에서 Lighthouse 점수를 빠르게 올리는 플러그인 조합은 무엇인가요?
효과가 높은 조합은 세 가지다. 첫째, WP Rocket(캐싱 + JS 지연 로드 + 미니파이)은 설치만으로 성능 점수가 10~20점 오르는 경우가 많다. 둘째, Imagify 또는 ShortPixel로 이미지를 WebP로 자동 변환·압축한다. 셋째, Cloudflare 무료 플랜 또는 BunnyCDN을 적용해 정적 자산 전송 거리를 줄인다. 유료 플러그인이 부담스럽다면 Autoptimize(CSS/JS 최적화)와 Smush(이미지 압축) 무료 플러그인으로 시작해도 의미 있는 점수 향상이 가능하다.
Q. Lighthouse 점수를 올렸는데도 실제 사이트가 느린 이유는 무엇인가요?
Lighthouse 점수는 제어된 환경에서의 단일 측정값이다. 실제 사용자 경험은 네트워크 환경, 디바이스 성능, 서버 응답 속도 등 다양한 변수에 따라 달라진다. TTFB(서버 응답)가 0.8초를 초과하면 아무리 프론트엔드를 최적화해도 체감 속도가 느리다. 이 경우 호스팅 업그레이드(공유 호스팅 → VPS)나 CDN 도입을 먼저 검토해야 한다. Google Search Console의 실제 사용자 데이터와 PageSpeed Insights의 TTFB 항목을 함께 확인하면 원인을 구체적으로 파악할 수 있다.
마치며
Lighthouse 최적화는 한 번에 끝나는 작업이 아니다. 이미지 WebP 변환과 캐싱 플러그인 적용만으로도 LCP를 크게 줄일 수 있으므로 이 두 가지를 먼저 적용해보자. 이후 CLS, INP 순서로 개선하면 단계적으로 90점 이상을 달성할 수 있다. 개선 후에는 반드시 Google Search Console에서 실제 사용자 데이터를 확인해 점수와 체감 성능이 일치하는지 검증하자.
프론트엔드 개발 환경을 함께 최적화하고 싶다면 프론트엔드 개발자 로드맵도 참고해보자.
