유용한정보

웹 성능 점검 필수 도구 ✅ Lighthouse로 성능 분석 & 최적화하는 방법

jonbeo 2025. 10. 25. 10:01
반응형

 

 

웹사이트의 성능은 곧 **사용자 경험(UX)**과 SEO 순위로 직결됩니다.
Lighthouse는 크롬 개발자 도구에 내장되어 있으며, 성능을 수치화하고 구체적인 개선 방법까지 제안해 줍니다.

🧩 1. Lighthouse 실행 방법

  1. 크롬 브라우저 열기 → F12 (개발자 도구)
  2. 상단 탭에서 Lighthouse 선택
  3. Performance / Accessibility / Best Practices / SEO / PWA 항목 선택
  4. Analyze page load 클릭 → 리포트 생성

📌 또는 PageSpeed Insights에서 온라인으로도 테스트 가능

📊 2. Lighthouse 주요 지표

지표 설명 권장 기준
FCP (First Contentful Paint) 최초 콘텐츠 표시 시간 1.8초 이내
LCP (Largest Contentful Paint) 주요 콘텐츠 표시 시간 2.5초 이내
FID (First Input Delay) 첫 입력 반응 속도 100ms 이내
CLS (Cumulative Layout Shift) 화면 레이아웃 이동 안정성 0.1 이하
TTI (Time to Interactive) 페이지 완전 반응 시간 3.8초 이내

👉 이 지표들은 Core Web Vitals라 불리며, 구글 검색 순위에도 반영됩니다.

🔧 3. 성능 최적화 전략

✅ 이미지 최적화

  • WebP, AVIF 포맷 사용
  • Lazy Loading (loading="lazy")
  • 적절한 사이즈로 제공 (srcset 활용)

✅ 코드 최적화

  • CSS/JS 압축(minify)
  • 코드 스플리팅으로 필요한 페이지별 로딩
  • JS는 defer 또는 async 적용

✅ 캐싱 & CDN 활용

  • 정적 파일 CDN 배포
  • 브라우저 캐시 정책 (Cache-Control) 설정

✅ 렌더링 최적화

  • 크리티컬 CSS 인라인 삽입
  • 폰트 최적화 (font-display: swap)
  • 불필요한 리소스 지연 로딩 (lazy load)

🧠 4. Lighthouse 리포트 활용 팁

  • 점수만 보지 말고 구체적인 개선 가이드를 확인
  • 모바일 기준으로 반드시 점검 (모바일 SEO 중요)
  • CI/CD 파이프라인에 Lighthouse 테스트 자동화 가능 (예: GitHub Actions)
  • 정기적으로 모니터링 → 배포 이후 성능 저하 여부 확인

📝 마무리 정리

  • Lighthouse는 웹 성능, 접근성, SEO까지 종합 점검 가능한 도구
  • 주요 지표는 Core Web Vitals (FCP, LCP, CLS, FID)
  • 최적화 핵심은 이미지, 코드, 캐싱, 렌더링 전략
  • 단순 점수가 아니라 지속적 개선이 중요합니다
반응형