Lighthouse HTML 감사

Lighthouse는 Chrome DevTools의 Audits 탭에 내장된 자동 감사 도구입니다. 성능, 접근성, 모범 사례, 검색 엔진 최적화, PWA에 걸쳐 페이지를 평가합니다. 감사 대상 페이지를 브라우저에서 실행하고 측정한 뒤, 실행 가능한 개선 제안을 제공합니다.

Chrome DevTools에서 Lighthouse로 전환하고 범주를 선택한 다음 Desktop 또는 Mobile을 고르고 "페이지 로드 분석"을 클릭하십시오. 도구가 깨끗한 환경에서 페이지를 다시 로드하고 1분 이내에 보고서를 생성합니다.

성능은 핵심 웹 바이털과 기타 속도 지표를 측정합니다. 접근성은 WCAG에 맞춰진 규칙을 확인합니다. 모범 사례는 보안과 최신 웹 표준을 다룹니다. 검색 엔진 최적화는 크롤링 가능한 마크업을 확인합니다. PWA는 설치 가능 여부와 오프라인 지원을 검증합니다.

접근성 감사는 대체 텍스트 누락, 폼 레이블 누락, 낮은 색상 대비, 언어 속성 누락, id 중복, 랜드마크 누락, 키보드 지원이 없는 포커스 가능 요소를 찾아냅니다. 각 문제에는 자세한 해결 안내가 연결되어 있습니다.

최대 콘텐츠 렌더링 시간(LCP), 누적 레이아웃 이동(CLS), 총 차단 시간(TBT), 속도 지수입니다. 각 지표를 평가하고 가중치를 적용하여 전체 성능 점수를 계산합니다. Lighthouse는 각 지표에 가장 크게 기여하는 DOM 요소를 표시합니다.

HTTPS 사용, 콘솔 오류, 이미지 가로세로 비율, 더 이상 사용되지 않는 API, 혼합 콘텐츠를 확인합니다. 모범 사례 감사는 현대화해야 할 다양한 레거시 또는 안전하지 않은 패턴을 찾아냅니다.

메타 설명 누락, <title> 누락 또는 중복, robots.txt 문제, 설명적인 텍스트가 없는 링크, 뷰포트 메타 태그 누락, hreflang 문제를 찾아냅니다. 콘텐츠 수준의 분석을 위해 Lighthouse 검색 엔진 최적화를 실제 검색 엔진 최적화 감사 도구(Ahrefs, Screaming Frog)와 함께 사용하십시오.

설치 가능하기 위해 필요한 모든 요구 사항을 확인합니다. HTTPS, 최소 필드를 갖춘 유효한 매니페스트, 등록된 서비스 워커, 뷰포트 태그, 아이콘이 대상입니다. 설치 가능한 앱으로 출시하기 전에 PWA 감사의 모든 실패 항목을 수정하십시오.

Lighthouse CLI와 Lighthouse CI 도구는 감사를 지속적 통합 및 지속적 배포 환경에 연동합니다. 각 PR에서 배포된 미리 보기를 대상으로 Lighthouse를 실행하고, 점수가 기준값 아래로 떨어지면 작업이 실패합니다. 이를 통해 접근성, 성능 또는 검색 엔진 최적화의 조용한 회귀를 방지할 수 있습니다.

Lighthouse 보고서는 JSON으로 저장하고 프로그래밍 방식으로 비교할 수 있습니다. 시간에 따른 LCP 점수를 추적하여 회귀를 감지하고, 두 PR을 비교하여 어떤 변경이 어떤 지표에 영향을 주었는지 확인하며, 기준값을 넘을 때 알림을 보낼 수 있습니다. 데이터가 도구에서 처리하기 쉬운 구조로 제공됩니다.

Lighthouse는 실제 사용자가 아니라 통제된 환경에서 실행되는 합성 테스트입니다. 실제 사용자 경험을 추적하는 실제 사용자 모니터링(RUM) 도구와 함께 사용하십시오. 합성 테스트는 회귀를 일찍 찾아내고, RUM은 사용자가 실제로 개선을 체감하는지 확인합니다.

일부 감사는 특정 상황에서 피할 수 없는 패턴을 표시합니다. 의도적인 예외는 문서화하고 Lighthouse CI의 무시 목록에 추가한 다음, 플랫폼이 발전함에 따라 주기적으로 재평가하십시오. "모두 무시"와 같은 일괄 무시는 피하십시오. 자동 감사의 목적을 무력화하기 때문입니다.

Lighthouse 점수를 한 번 수정하고 끝내는 목표가 아니라 지속적 개선의 대상으로 다루십시오. 모든 PR에서 점수를 확인하고 회귀를 즉시 해결하며 기준선을 점진적으로 개선하는 문화를 구축하십시오. 대부분의 팀은 이러한 규율을 몇 달간 유지하면 점수가 꾸준히 상승하는 것을 확인합니다.

Lighthouse의 합성 감사를 실제 사용자 모니터링(RUM)과 함께 사용해야 하는 이유는 무엇입니까?

Lighthouse는 성능, 접근성, 모범 사례, 검색 엔진 최적화, PWA에 걸쳐 페이지를 감사합니다. 일회성 검사는 Chrome DevTools에서, 지속적 통합은 Lighthouse CI에서 실행하십시오. 모든 PR에서 회귀를 해결하고, 측정에 기반해 개선하는 문화를 구축하며, 합성 감사를 실제 사용자 모니터링과 함께 사용하여 실험 환경의 개선이 실제 사용자에게도 이점이 되는지 검증하십시오.