Lighthouse - 웹페이지의 품질을 측정하는 오픈 소스 도구

Lighthouse는 웹 페이지의 품질을 측정하는 오픈 소스 툴이다. 성능, 접근성, SEO 등을 측정하며, 각 항목에 대해 점수와 개선 사항을 제공한다. Lighthouse의 주요 요소는 다음과 같다.

---

1. Performance (성능)

• 웹 페이지의 로딩 속도와 관련된 성능을 측정한다.
• 측정 지표:
  • First Contentful Paint (FCP): 첫 번째 콘텐츠(텍스트나 이미지)가 렌더링되는 시간.
  • Speed Index: 콘텐츠가 시각적으로 완전히 표시되는 속도.
  • Largest Contentful Paint (LCP): 가장 큰 콘텐츠가 화면에 표시되는 시간.
  • Time to Interactive (TTI): 페이지가 완전히 인터랙티브한 상태가 되는 시간.
  • Total Blocking Time (TBT): 주요 스레드가 차단된 시간.
  • Cumulative Layout Shift (CLS): 레이아웃 변경으로 인해 발생하는 시각적 불안정성.

---

2. Accessibility (접근성)

• 장애가 있는 사용자도 웹 페이지를 쉽게 사용할 수 있는지를 평가한다.
• 주요 항목:
  • 페이지의 색 대비.
  • 시멘틱 태그 사용 여부 (예: <header>, <main>).
  • ARIA 속성의 적절한 사용 여부.
  • 키보드 네비게이션 가능 여부.

---

3. Best Practices (최적 관행)

• 보안과 웹 표준 준수 여부를 평가한다.
• 주요 항목:
  • HTTPS 사용 여부.
  • 안전하지 않은 JavaScript 라이브러리 사용 여부.
  • 이미지와 리소스의 적절한 로드 여부.
  • 브라우저 호환성을 저해하는 문제.

---

4. SEO (검색 엔진 최적화)

• 검색 엔진이 웹 페이지를 제대로 크롤링하고 색인화할 수 있는지를 점검한다.
• 주요 항목:
  • 메타 태그 설정 여부 (예: <title>, <meta description>).
  • 페이지의 이동 가능 여부 (모바일 친화적 디자인 포함).
  • 링크의 유효성.
  • 문서 구조와 시멘틱 마크업.

---

5. PWA (Progressive Web App)

• 웹 앱이 Progressive Web App(PWA)로서의 기능을 제대로 제공하는지를 평가한다.
• 주요 항목:
  • HTTPS 환경에서 제공 여부.
  • 서비스 워커와 캐시 사용 여부.
  • 앱이 오프라인 상태에서도 동작 가능 여부.
  • PWA 매니페스트 설정 여부.

---

Lighthouse는 개발자가 웹 페이지의 품질을 개선할 수 있도록 문제를 구체적으로 제시해 준다. 각 항목은 점수와 함께 자세한 개선 사항이 제공되며, 이를 통해 페이지 성능 및 사용자 경험을 최적화할 수 있다.

Tip: 크롬 익스텐션의 영향을 받을 수 있기 때문에 시크릿 모드에서 사용하는 것이 좋다.