성능 지표(Lighthouse)의 이해와 개선 사례

 

성능 지표(Lighthouse)의 이해와 개선 사례

웹 성능 최적화의 출발점은 진단에서 시작된다

---

1. Lighthouse란 무엇인가?

Lighthouse는 Google에서 제공하는 오픈소스 성능 진단 도구로, 웹사이트의 품질을 측정하고 개선 방법을 제시해주는 분석 툴입니다. 성능뿐 아니라 접근성, SEO, 웹 표준(PWA 등)에 대한 점수도 확인할 수 있어 개발자와 운영자 모두에게 매우 유용한 도구입니다.

Chrome 브라우저 내에서 직접 실행할 수 있고, Lighthouse CI, Node.js CLI, PageSpeed Insights 등으로도 연동이 가능합니다.

---

2. Lighthouse의 측정 항목 및 지표 설명

Lighthouse는 총 5가지 영역에 대해 각각 0~100점의 점수를 매깁니다.

항목	설명
Accessibility (접근성)	보조기기 사용자들을 위한 UI 구성 여부
Best Practices (최적화 규칙)	최신 웹 표준 및 보안 관련 규칙 준수 여부
SEO	검색 엔진 친화적인 구조 여부
Progressive Web App (PWA)	오프라인 사용 가능 여부 및 모바일 친화성 등
Performance (성능)	웹 페이지 로딩 속도와 인터랙션 최적화 정도

---

3. 성능 항목 세부 분석 (Performance)

Performance 점수는 다음 주요 지표를 기준으로 산정됩니다.

1) First Contentful Paint (FCP)

• 의미: 사용자가 첫 번째 콘텐츠(텍스트, 이미지 등)를 볼 수 있는 시점
• 목표: 1.8초 이내

2) Largest Contentful Paint (LCP)

• 의미: 가장 큰 콘텐츠 블록(보통 Hero 이미지나 대제목)이 렌더링되는 시간
• 목표: 2.5초 이내

3) Speed Index

• 의미: 페이지가 얼마나 빠르게 보이는지를 시각적으로 측정
• 목표: 4.3초 이내

4) Total Blocking Time (TBT)

• 의미: 메인 스레드가 사용자 입력에 반응하지 못한 시간의 총합
• 목표: 200ms 이하

5) Time to Interactive (TTI)

• 의미: 사용자가 페이지와 원활하게 상호작용할 수 있게 되는 시점
• 목표: 3.8초 이내

6) Cumulative Layout Shift (CLS)

• 의미: 레이아웃이 예기치 않게 이동한 정도 (버튼이나 텍스트 점프 등)
• 목표: 0.1 이하

---

4. 실무에서 적용할 수 있는 성능 개선 전략

1) 이미지 최적화

• WebP 포맷으로 변환
• srcset 및 sizes로 반응형 이미지 적용
• Lazy Loading 사용 (loading="lazy")

2) 폰트 로딩 최적화

• font-display: swap 사용
• 불필요한 폰트 제거
• 글꼴 서브셋 사용

3) JavaScript 최적화

• 불필요한 스크립트 제거
• 코드 스플리팅 적용
• 비동기 로딩 (defer, async)

4) CSS 최적화

• Unused CSS 제거 (PurgeCSS, Tailwind 사용 시 필수)
• 인라인 CSS 최소화
• 스타일 지연 로딩 기법 활용

5) 서버 응답 속도 개선

• GZIP/브로틀리 압축 적용
• CDN 도입
• 캐싱 정책 설정 (Cache-Control, ETag)

---

5. 실전 개선 사례

사례 1: 스타트업 기업 랜딩 페이지 개선

문제점

• LCP 5.4초
• CLS 0.22
• TBT 480ms

개선 조치

• 히어로 이미지 lazy loading + WebP 변환
• Google Fonts를 preload
• 애니메이션 요소 requestAnimationFrame() 기반으로 수정

개선 결과

• LCP 2.1초
• CLS 0.05
• TBT 120ms → 성능 점수 47점 → 91점

사례 2: 쇼핑몰의 TTI 문제 해결

문제점

• JavaScript 번들 1.3MB
• 대규모 carousel, filter UI가 렌더링 블로킹 유발

개선 조치

• 코어 기능 외 컴포넌트 코드 분리 → 코드 스플리팅
• carousel lazy load 적용
• 서버 사이드 렌더링으로 렌더링 비용 감소

개선 결과

• TTI 5.6초 → 2.7초
• TBT 700ms → 200ms
• Performance 점수 53점 → 89점

---

6. Lighthouse 점수 올리는 꿀팁 체크리스트

체크	항목 설명
✅ GZIP, Brotli 압축 적용	응답 사이즈를 줄여 초기 로딩 속도 개선
✅ HTML에 lang 속성 지정	접근성 및 SEO 점수에 반영
✅ 메타 태그의 viewport 설정	모바일 최적화 필수 요소
✅ <img>에 width/height 설정	CLS 감소
✅ render-blocking 리소스 최소화	CSS/JS 지연 로딩 적용

---

7. Lighthouse 결과 공유 및 자동화

PDF로 저장하기

Chrome DevTools > Lighthouse 탭 > 'Generate Report' > PDF 저장 가능

CI 연동 (Lighthouse CI)

Github Action, Jenkins 등과 연결해 PR 시 자동으로 Lighthouse 분석 가능

npx @lhci/cli autorun

자동화된 품질 관리를 통해 성능 저하를 미리 방지할 수 있습니다.

---

8. 마무리: 측정 없이는 개선도 없다

성능 개선은 한 번에 끝나는 작업이 아닙니다. Lighthouse를 통해 현재 상태를 정확히 파악하고, 주기적으로 개선 작업을 반복하는 것이 무엇보다 중요합니다. 특히 점수보다는 실제 사용자 경험 향상에 초점을 맞춰야 장기적으로 안정적인 서비스를 운영할 수 있습니다.

---