콘텐츠로 이동

Lighthouse

페이지가 느리다고 느낄 때, '뭐가 느린지'를 말로 설명하기는 어려워요. 네트워크 탭을 켜봐도 단위가 다 다르고, 어디를 고치면 실제로 빨라지는지 감이 안 잡히죠. Lighthouse는 웹페이지를 열어 성능·접근성·권장사항·SEO를 한 번에 측정해 점수로 보여주는 도구예요. 개선 전후를 같은 기준의 숫자로 비교할 수 있어서, '얼마나 좋아졌는지'를 증명하는 데 특히 유용해요.

한눈에 보면 이렇게 핵심 지표가 정해져 있어요. LCP는 '핵심 콘텐츠가 뜨는 시간', INP는 '눌렀을 때 반응 속도', CLS는 '레이아웃 안정성'을 각각 잡아요. 이 셋(Core Web Vitals)이 체감 품질을 대표한다고 보면 돼요.

핵심 개념

  • 실행 방식 — Lighthouse는 시크릿 모드 같은 통제된 브라우저에서 페이지를 열어 여러 감사를 돌리고, 그 결과를 성능·접근성·권장사항·SEO 영역의 점수로 요약합니다. CLI·Chrome DevTools·CI 어디서든 돌릴 수 있어요.
  • 성능 점수 (Performance) — 페이지 로딩이 얼마나 빨리 완성되는지를 0~100 점수로 보여줍니다. 이 점수는 아래의 우선순위 지표들을 가중 합산한 값이에요.
  • LCP (Largest Contentful Paint) — '핵심 콘텐츠(가장 큰 이미지·텍스트 블록)가 화면에 뜨는 시간'을 뜻해요. 로딩이 느리다고 체감되는 정도와 가장 직접적으로 맞닿는 지표죠.
  • INP (Interaction to Next Paint) — 사용자가 클릭·탭했을 때 화면이 다음 프레임으로 반응하기까지의 지연을 봅니다. 기존 FID(First Input Delay)를 대체하는 지표로, '눌렀는데 안 움직이는' 반응성을 잡아요.
  • CLS (Cumulative Layout Shift) — '레이아웃이 얼마나 흔들리는지'를 수치로 보여줍니다. 이미지가 늦게 로드되면서 글이 아래로 밀리는 것처럼, 예상치 못한 화면 이동이 클수록 나빠져요.
  • 접근성 점수 (A11y) — 장애인도 쓸 수 있는지(색 대비, 키보드 내비게이션, ARIA 등)를 자동으로 점검해 주는 점수예요. A11y는 Accessibility의 줄임말이에요.
  • 지표의 의미 구분 — 성능 점수 안에도 지표마다 역할이 달라요. '첫 화면이 뜨는 속도'(LCP), '눌렀을 때의 반응성'(INP), '화면 안정성'(CLS)이 서로 다른 체감을 잡습니다. 어느 하나가 다른 것을 대신하지는 않아요.

사용 사례 / 실제 적용

프론트엔드 품질 기준으로 LCP와 A11y 점수를 주기적으로 기록해요. 배포 전후로 같은 페이지를 돌려서 "이번 릴리스로 로딩이 빨라졌다/느려졌다"를 숫자로 판단하죠. 성능 회귀가 있을 때는 LCP·INP·CLS 어느 쪽이 악화됐는지를 보고 고칠 지점을 좁힙니다.

여기서 짚고 갈 점은 Lighthouse 점수와 Core Web Vitals(실사용자 지표)는 관점이 다르다는 거예요. Lighthouse는 통제된 환경에서 한 번 측정한 실험실 지표이고, 실제 사용자가 겪는 성능은 기기·네트워크에 따라 달라져요. 둘을 보완해 쓰되, 검증 기준으로는 Lighthouse가 재현성 있어서 비교에 유리합니다. 지표의 전체 배치는 테스트·품질 허브와 Playwright 페이지에서 이어져요.

성능 개선을 시작할 때 이 점을 기억하면 좋아요. 점수를 '올리기 위한 목표'가 아니라 '체감 품질의 신호'로 보는 게 중요해요.

  • 지표를 분리해서 읽기 — 성능 점수 하나가 아니라 LCP·INP·CLS를 각각 봐야 어디를 고칠지 보여요. 합산된 하나로는 원인이 묻혀요.
  • 측정 환경 고정하기 — 통제된 환경에서 재현성 있게 측정하되, 실사용은 기기·네트워크에 따라 달라진다는 걸 함께 알고 있어야 해요.
  • 회귀를 자동으로 — 배포 전으로 점수를 기록해 두고, 기준치를 넘으면 막는 식으로 성능 회귀를 게이트에 걸 수 있어요.
  • 핵심 여정 우선 — 전 페이지를 다 잡기보다, 전환·핵심 콘텐츠가 있는 페이지부터 LCP·A11y를 지켜요.
  • 접근성도 점수로 — 색 대비·키보드 내비게이션처럼 A11y 감사가 잡는 항목을 수치로 보고 틈틈이 낮춰요.

심화 챕터

지표와 감사가 어떻게 정의되는지는 아래 챕터에서 공식 문서를 기준으로 다뤄요.

더 알아보기