Skip to content

Lighthouse 감사 카테고리

개요

Lighthouse는 페이지를 열면 여러 감사(audit) 를 한 번에 돌리고, 그 결과를 몇 개의 영역으로 나눠 점수로 보여줘요. 문제를 단순히 "느리다"로 말하는 대신, "성능이 몇 점, 접근성이 몇 점"처럼 숫자로 짚어서 어느 영역을 고칠지 보여주죠. 공식 문서는 감사 카테고리를 성능·접근성·권장사항(Best Practices)·SEO 네 개로 구분해요. 이 페이지는 각 카테고리가 무엇을 보는지와, Lighthouse를 어디서 돌릴 수 있는지를 풀어요.

핵심 개념

감사 카테고리 네 가지

공식 문서가 명시하는 주요 감사 영역은 이렇게 나뉘어요.

  • 성능 (Performance) — 페이지 로딩이 얼마나 빠른지를 측정하고, 속도를 높일 기회를 찾아요. 페이지 로드 속도를 올릴 수 있는 항목(스크립트 지연, 이미지 최적화 등)을 제안해요.
  • 접근성 (Accessibility) — 모든 사용자가 콘텐츠에 접근하고 사이트를 탐색할 수 있는지 확인해요. 색 대비, 키보드 내비게이션, ARIA 등이 대상이에요.
  • 권장사항 (Best Practices) — 웹 페이지의 코드 건강(코드 헬스)을 개선하기 위한 모범 사례를 검사해요. 안전한 연결, 의존성 등이 포함돼요. 공식 문서는 기본 카테고리를 이렇게 소개하면서, 일반적인 웹 사용 모범 사례를 기준으로 하는 걸로 설명해요.
  • SEO — 페이지가 검색 엔진 순위에 잘 최적화됐는지 확인해요. 크롤링 가능성, 검색 가능한 콘텐츠 등이 대상이에요.

(명세에 따라 어떤 버전에서는 PWA(Progressive Web App) 카테고리도 보이는데, 공식 문서는 위 네 카테고리를 성능·접근성·권장사항·SEO로 요약해요.)

점수와 실행 방식

각 카테고리는 0~100 점수로 요약돼요. 성능 점수는 아래 우선순위 지표들을 가중 합산한 값이에요. Lighthouse는 시크릿 모드 같은 통제된 브라우저에서 페이지를 열어 여러 감사를 돌리고, 결과를 리포트로 생성해요. 각 감사에는 "왜 중요한지"와 "어떻게 고칠지"를 설명하는 참조 문서가 붙어 있어요.

어디서 돌리나

Lighthouse는 여러 환경에서 실행할 수 있어요.

  • PageSpeed Insights — URL을 주면 브라우저 밖에서 분석해주는 웹 서비스.
  • Chrome DevTools — 개발자 도구 안에서 직접 돌리기.
  • 커맨드라인(CLI) — 스크립트로 자동화해 CI에 붙이기.
  • Node 모듈 — 코드 안에서 실행해 배포 파이프라인에 통합하기.

공개 페이지든 인증이 필요한 페이지든 URL만 주면 감사할 수 있어요.

필드 지표와의 관계

Lighthouse 감사는 재현 가능한 실험실 환경을 기준으로 한 번의 실행 결과예요. 실제 사용자의 기기·네트워크에 따라 값이 달라질 수 있으므로, 실사용 지표와 함께 읽어야 해요. 검증 기준으로는 같은 환경을 반복해서 재는데 유리하죠.

실제 적용 (데이터스케쳐스)

웹빌더 제품에서 Lighthouse는 배포 전후 품질 게이트로 써요. 같은 페이지를 릴리스 전후로 돌려 "이번 업데이트로 성능·접근성이 어떻게 변했는지"를 숫자로 비교하고, 기준치를 넘으면 막는 식이죠. 특히 색 대비·키보드 내비게이션처럼 접근성 감사가 잡는 항목은 눈으로 확인하기 어려우니, 자동 점수로 틈틈이 낮춰가요.

여기서 기억할 점은 카테고리별 점수를 따로 읽어야 한다는 거예요. 성능 점수가 좋아졌다고 접근성 문제가 해결된 게 아니고, 각 카테고리는 다른 원인에서 옵니다. 또 점수 자체를 목표로 삼기보다 "체감 품질의 신호"로 보는 게 중요해요. 핵심 지표 정의는 Core Web Vitals에서, E2E 자동화는 Playwright에서 이어져요.

더 알아보기