Lighthouse

• 웹 페이지의 성능, 접근성, SEO 등을 종합적으로 분석해주는 Google 제공 오픈 소스 도구
• 브라우저 확장 / DevTools / CLI로 사용 가능
• 웹사이트의 사용자 경험 품질을 수치로 평가
• 보통 5회 정도 해서 평균값을 냄.(사유: 네트워크 문제, 서버 부화 등의 문제 때문)
• 100점만점으로 90점 이상: 우수 / 50~89점: 보통 / 50점 이하: 개선 필요

Lighthouse 검사 항목

• Performance

  지표	설명
  First Contentful Paint (FCP)	최초로 화면에 텍스트, 이미지 등 콘텐츠가 렌더링되는 시간
  Speed Index (SI)	콘텐츠가 시각적으로 얼마나 빠르게 표시되는지를 수치화
  Largest Contentful Paint (LCP)	화면에서 가장 큰 콘텐츠(예: 큰 이미지나 헤더 텍스트)가 완전히 렌더링되는 시간
  Time to Interactive (TTI)	페이지가 완전히 반응 가능해지는 시간
  Total Blocking Time (TBT)	FCP와 TTI 사이에 주요 스레드가 차단된 시간의 총합 (100ms 이상 이벤트 차단 기준)
  Cumulative Layout Shift (CLS)	로딩 중에 발생하는 레이아웃 이동(점프)의 누적 점수

• Accessibillity

  • 대체 텍스트, 대비 비율, 키보드 접근성 두 점건

• Best Practices

  • HTTPS 사용 여부, JS 오류, 안전한 API 사용 등

• SEO

  • 메타 태그, viewport, 링크 접근성 확인

Lighthouse CLI 사용법

1. npm i -D -g lighthouse 설치
2. lighthouse 결합사이트URI
3. 만들어진 파일(localhost_2025-09-09_12-09-58.report.html)을 라이브 서비스를 통해 확인

Lighthouse 크롬을 통해 확인

F12를 통해 확인.