성능 종합: Lighthouse 100점 달성 가이드

Performance: 100
Accessibility: 100
Best Practices: 100
SEO: 100


각 영역마다 가중치 다른 메트릭으로 계산
Performance가 가장 어려움

1. LCP < 2.5s (25% 가중치)
2. INP < 200ms (25% 가중치)
3. CLS < 0.1 (25% 가중치)
4. FCP < 1.8s (10%)
5. Speed Index < 3.4s (10%)
6. TBT < 200ms (5%)

[이미지]
☐ next/image (또는 sharp 처리)
☐ priority on hero/LCP
☐ width/height 또는 fill
☐ sizes 정확히
☐ AVIF/WebP 폴백
☐ blur placeholder
☐ alt 모두

[폰트]
☐ next/font (또는 self-hosted)
☐ display: swap
☐ preload critical
☐ subset only

[JavaScript]
☐ 번들 < 200KB (gzip)
☐ dynamic import 무거운 부분
☐ tree shaking 작동
☐ Polyfills 최소
☐ Third-party 비동기 로드

[CSS]
☐ Critical CSS inline (<14KB)
☐ Above-the-fold 우선
☐ Unused CSS 제거 (Tailwind purge)
☐ aspect-ratio로 CLS 0

[네트워크]
☐ HTTP/3 (자동, Vercel)
☐ Brotli (자동, CDN)
☐ preconnect 외부 origins
☐ Cache-Control 적절

[렌더링]
☐ SSG/ISR 우선
☐ Streaming SSR + Suspense
☐ React.memo on hot list

1. Third-party scripts (Google Analytics, Stripe, etc)
   → strategy="afterInteractive" 또는 lazy

2. Large layout shifts
   → 광고·iframe 영역 미리 확보

3. Unused JavaScript
   → bundle analyzer로 제거

4. Unused CSS
   → PurgeCSS / Tailwind purge

5. Render-blocking resources
   → defer/async + critical CSS inline

6. Color contrast
   → WebAIM Contrast Checker (4.5:1 이상)

import Script from 'next/script';

// 사용자 인터랙션 후 (가장 빠름)
<Script
  src="https://www.googletagmanager.com/gtag/js"
  strategy="afterInteractive"
/>


// 페이지 idle 시
<Script
  src="https://crisp.chat/widget.js"
  strategy="lazyOnload"
/>


// 즉시 (꼭 필요한 경우만)
<Script
  src="..."
  strategy="beforeInteractive"
/>

// next.config.js
module.exports = {
  experimental: {
    optimizeCss: true,  // 자동 critical CSS
  },
};


// 또는 Tailwind만으로 충분
// - Tailwind 사용분만 번들
// - Above-the-fold 미리 결정 어려움 — 대부분 자동

# .github/workflows/lighthouse.yml
- name: Lighthouse CI
  uses: treosh/lighthouse-ci-action@v11
  with:
    urls: |
      https://example.com/
      https://example.com/products
      https://example.com/blog/test
    budgetPath: ./budget.json
    uploadArtifacts: true
    runs: 3  # 평균


# budget.json
[
  {
    "path": "/*",
    "resourceSizes": [
      { "resourceType": "script", "budget": 200 },
      { "resourceType": "stylesheet", "budget": 50 },
      { "resourceType": "image", "budget": 500 },
      { "resourceType": "total", "budget": 1500 }
    ],
    "timings": [
      { "metric": "lcp", "budget": 2500 },
      { "metric": "interactive", "budget": 3500 },
      { "metric": "cls", "budget": 0.1 }
    ]
  }
]

// Lighthouse는 lab 데이터
// 실제 사용자는 RUM


import { onLCP, onINP, onCLS } from 'web-vitals/attribution';

onLCP((metric) => {
  fetch('/api/vitals', {
    method: 'POST',
    body: JSON.stringify({
      name: metric.name,
      value: metric.value,
      rating: metric.rating,
      attribution: metric.attribution,  // 어떤 요소가 LCP였는지
      url: location.pathname,
    }),
  });
});


// 또는 Vercel Speed Insights
import { SpeedInsights } from '@vercel/speed-insights/next';
<SpeedInsights />

랜딩 페이지 (Vercel·Linear·Stripe):
✅ Next.js + SSG
✅ 이미지 거의 없음 (CSS 그라디언트·SVG)
✅ Tailwind 또는 CSS Modules
✅ 폰트 self-hosted
✅ Inter/Pretendard 가변 폰트
✅ Edge Network (Vercel)
✅ Critical CSS inline


결과:
- LCP < 1.5s
- INP < 100ms
- CLS 0
- 모든 메트릭 100

Lighthouse 모바일이 더 어려움:
- 4G throttling
- CPU throttling 4x
- 작은 화면


데스크톱 100점 ≠ 모바일 100점
→ 모바일 100점이 진짜 도전
→ 모바일에서 100 달성 시 데스크톱 자동 100

Lighthouse는 lab data — 실제와 다를 수 있음

진짜 측정:
- Real User Monitoring (RUM)
- Vercel Speed Insights
- PageSpeed Insights — Field Data
- Search Console — Core Web Vitals 보고서


→ 진짜 사용자의 P75 vitals가 중요