✅ Lighthouse 성능 점수 향상을 위한 최적화 기법

Lighthouse는 웹사이트의 성능, 접근성, SEO, PWA를 평가하는 도구로,
웹사이트 성능 개선을 위한 필수 분석 도구로 자리 잡았습니다.
이번 글에서는 Lighthouse 점수를 높이기 위한 구체적인 개선 방법과,
실무에서 경험한 성능 향상 사례를 중심으로 정리하겠습니다.

📌 1. Lighthouse 점수 구성 요소

항목 설명

Performance	페이지 로딩 속도 및 반응성
Accessibility	장애인을 위한 접근성 평가
Best Practices	웹 보안 및 성능 모범 사례 준수 여부
SEO	검색 엔진 최적화 점수
PWA (Progressive Web App)	오프라인 기능 등 PWA 관련 점수

📌 2. 성능 최적화를 위한 핵심 지표

🔍 중요한 성능 지표 (Performance 탭)

지표 설명 목표 기준

FCP (First Contentful Paint)	첫 콘텐츠 표시까지의 시간	≤ 1.8초
SI (Speed Index)	콘텐츠가 시각적으로 표시되는 속도	≤ 3.4초
LCP (Largest Contentful Paint)	주요 콘텐츠 표시까지 걸리는 시간	≤ 2.5초
TTI (Time to Interactive)	사용자와 상호작용할 준비가 되는 시간	≤ 3.8초
TBT (Total Blocking Time)	메인 스레드가 막혀 있는 시간	≤ 300ms
CLS (Cumulative Layout Shift)	레이아웃 이동의 누적 점수	≤ 0.1

📌 3. 성능 점수 향상을 위한 핵심 기법

🔹 1) 이미지 최적화

WebP 포맷 사용: JPEG 대비 파일 크기 30% 감소
Lazy Loading: 사용자 시점에서 로딩 시간 단축
이미지 크기 맞춤: 해상도에 적합한 사이즈로 최적화

✅ Next.js에서 최적화 예시

import Image from 'next/image';

<Image
  src="/images/banner.webp"
  alt="WebP Banner"
  width={800}
  height={400}
  loading="lazy"
/>

🔹 2) 코드 스플리팅 (Code Splitting)

페이지별로 코드를 나누어 초기 로딩 속도 개선
React의 React.lazy와 Suspense로 비동기 로딩

✅ 코드 스플리팅 예시

const Dashboard = React.lazy(() => import('./Dashboard'));

<Suspense fallback={<div>Loading...</div>}>
  <Dashboard />
</Suspense>

🔹 3) 폰트 최적화

웹폰트 비동기 로딩 (font-display: swap)
CDN 사용으로 로딩 속도 개선

✅ CSS 설정

@font-face {
  font-family: 'Pretendard';
  font-display: swap;
  src: url('/fonts/pretendard.woff2') format('woff2');
}

🔹 4) JavaScript 최적화

불필요한 라이브러리 제거: Lodash, Moment.js 등 대체 라이브러리 사용
JS 번들 크기 줄이기: Webpack의 Tree Shaking 활용

✅ Lodash 대체 예시

// Lodash 사용 대신 순수 JS로 대체
const uniqueArray = Array.from(new Set(arr));

🔹 5) 서버 응답 시간 줄이기

CDN 사용: 정적 파일 로딩 속도 향상
캐싱 전략: 브라우저 캐시로 자주 변경되지 않는 파일 보관

✅ NGINX 설정 예시

location /assets/ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

🔹 6) Third-Party Script 관리

async, defer로 비동기 로딩 설정
**태그 관리자(Google Tag Manager)**를 이용해 비동기 삽입

🔹 7) CSS 및 스타일링 최적화

Critical CSS 인라인 삽입: 초기 페이지 렌더링 속도 향상
Tailwind CSS Purge 설정: 사용하지 않는 스타일 제거

✅ Tailwind Purge 설정

// tailwind.config.js
purge: ['./src/**/*.{js,ts,jsx,tsx}'],

📌 4. 실무 경험: Lighthouse 성능 점수 개선

🧪 문제

쇼핑몰 사이트의 성능 점수가 50점대로 매우 낮음
특히 LCP와 TBT 지표가 저조하여 SEO에 불리함

✅ 개선 전략

이미지를 WebP 포맷으로 변환하여 파일 크기 30% 감소
Code Splitting을 통해 초기 로딩 속도 향상
폰트 최적화: Google Fonts → CDN으로 변경
비동기 스크립트 설정 (Tag Manager 및 광고 스크립트)

💡 개선 결과

성능 점수: 58 → 89
LCP: 4.5s → 1.8s
CLS: 0.25 → 0.05
사용자 이탈률 20% 감소

📌 면접에서 이렇게 답하세요

Lighthouse 성능 점수는 웹사이트 최적화의 중요한 기준입니다.
성능 향상을 위해 이미지 최적화, 코드 스플리팅, 폰트 최적화 등 다양한 기법을 사용하여 초기 로딩 속도를 개선하고,
비동기 로딩과 캐싱 설정을 통해 사용자 경험을 향상시킬 수 있습니다.
실무에서는 성능 측정 → 개선 → 재측정의 과정을 반복하며 성능 점수를 꾸준히 관리하고 있습니다.

웹성능,Lighthouse,성능최적화,코드스플리팅,이미지최적화,폰트최적화,JS최적화,CDN활용,웹사이트속도개선,SEO최적화