페이지 속도 최적화: Lighthouse 지표 개선 완전 가이드

Google은 2021년부터 Core Web Vitals를 공식 랭킹 팩터로 적용했습니다. 그러나 속도가 SEO에 미치는 영향은 순위 뿐만이 아닙니다.

Lighthouse는 Chrome DevTools에 내장된 웹 성능 측정 도구입니다. 성능 점수는 다음 지표들의 가중 평균으로 계산됩니다.

TBT(30%)가 가장 높은 가중치를 가집니다. TBT는 실험실 데이터(lab data)에서 INP와 높은 상관관계를 보이며, JavaScript 실행 시간 최적화가 점수 향상에 가장 큰 효과를 냅니다.

렌더 블로킹 리소스는 HTML 파싱 중 브라우저가 페이지 렌더링을 중단하고 해당 파일을 먼저 로드하게 만드는 CSS·JavaScript 파일입니다. Lighthouse에서 "Eliminate render-blocking resources" 경고로 표시됩니다.

<!-- ❌ 렌더 블로킹 -->
<link rel="stylesheet" href="/style.css">
<script src="/app.js"></script>

<!-- ✅ 개선된 방법 -->
<!-- 중요 CSS는 <style> 인라인으로 (Critical CSS) -->
<style>/* 첫 화면에 필요한 최소 CSS */</style>

<!-- 나머지 CSS는 비동기 로드 -->
<link rel="preload" as="style" href="/style.css" 
      onload="this.onload=null;this.rel='stylesheet'">

<!-- JS는 defer 또는 async -->
<script src="/app.js" defer></script>
<script src="/analytics.js" async></script>

현대 웹 앱에서 JavaScript는 TBT를 높이는 가장 큰 원인입니다. 번들 크기를 줄이고 코드 분할(Code Splitting)을 통해 초기 로드를 최소화해야 합니다.

핵심 전략

• Tree Shaking: 사용하지 않는 코드 제거. Webpack·Rollup·esbuild 등에서 자동 지원
• Code Splitting: 라우트 단위로 번들 분리. Next.js는 자동으로 페이지별 코드 분할
• Dynamic Import: 필요한 시점에만 모듈 로드
• Third-party 최소화: 불필요한 npm 패키지 제거 (bundlephobia.com에서 패키지 크기 확인)

// 동적 import로 무거운 라이브러리 지연 로드
const { default: Chart } = await import('chart.js')

// Next.js dynamic import
import dynamic from 'next/dynamic'
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
    loading: () => <Skeleton />,
    ssr: false, // 서버 렌더링 제외
})

CDN (Content Delivery Network)

CDN은 전 세계 여러 서버에 콘텐츠를 분산해 사용자와 가장 가까운 서버에서 파일을 제공합니다. 이미지·JavaScript·CSS 등 정적 파일에 CDN을 적용하면 TTFB(Time to First Byte)를 크게 줄일 수 있습니다.

HTTP 캐싱 헤더 설정

# 정적 파일 (JS, CSS, 이미지) — 1년 캐시
Cache-Control: public, max-age=31536000, immutable

# HTML 페이지 — 캐시 없음 (항상 최신 내용)
Cache-Control: no-cache, no-store, must-revalidate

압축 (Gzip / Brotli)