lighthouse란

Lighthouse

Lighthouse란 Google Chrome에서 제공하는, 웹앱의 품질 개선에 도움을 주는 자동화 도구 입니다. 성능, 접근성, SEO 등 사이트에 대한 전반적인 진단을 할 수 있습니다.

Lighthouse는 크게 네 가지 카테고리로 성능을 측정합니다.

성능 측정 (Performance)
접근성 (Accessibility)
베스트 프랙티스 (Best Practices)
SEO (Search Engine Optimization)

각 카테고리에 대해 알아봅니다.

성능 (Performance)

웹 페이지 로딩 속도와 효율성을 측정하고, 사용자가 빠르게 콘텐츠를 확인할 수 있도록 도움을 줍니다.

성능의 측정항목은 5가지 Metric으로 정의됩니다. 각 Metric들은 페이지가 로드되는 속도를 다양한 측면에서 측정합니다.

Metrics

FCP(First Contentful Paint)

초기 DOM 콘텐츠를 렌더링하는데 걸리는 시간을 측정합니다. 첫번째 텍스트 또는 이미지가 표시되는 시간을 가리킵니다. FCP 측정 시점을 시작점으로 하는 다른 Metric들이 있기 때문에, 가장 먼저 찍히는 FCP는 다른 항목들의 점수 및 전체 점수에 큰 영향을 줄 수 있습니다.
LCP(Largest Contentful Paint)

가장 큰 콘텐츠를 렌더링 하는데 걸리는 시간입니다.

LCP로 간주되는 요소
- <img> 요소
- <svg> 안에 있는 <image> 요소
- <video> 요소
- background-image 속성의 url()로 로드되는 요소
- block 레벨 요소 (elements containing text nodes or other inline-level text elements children)
LCP의 크기로 간주되려면

일반적으로 뷰포트(viewport) 내에서 사용자에게 표시되는 요소 중 가장 크기가 큰 요소로 결정됩니다.
TBT(Total Blocking Time)

마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 페이지가 응답하지 못하도록 차단된 총 시간을 의미합니다. FCP와 TTI 사이의 모든 Long Task 블로킹 타임을 추가하여 계산됩니다.
- TTI(Time to Interactive)
  
  사용자가 페이지와 완전하게 상호작용할 수 있을 때까지 걸리는 시간입니다. 단순히 시각적으로 보여지는 것 뿐만 아니라, 사용자가 페이지와 소통이 가능한 상태까지 렌더링 되어야 합니다. 예를 들면, 이벤트 핸들러가 가장 눈에 띄는 페이지 요소에 등록되는 시점에는 사용자와 사이트가 상호작용이 가능해졌다고 볼 수 있습니다
CLS(Cumulative Layout Shift)

사용자가 예상치 못한 레이아웃 이동을 경험하는 것에 대한 점수입니다. 레이아웃 불안정이 사용자에게 미치는 부정적인 영향에 대해 검사해 볼 수 있습니다.
SI(Speed Index)

콘텐츠가 시각적으로 표시되는 진행 속도를 측정합니다. 리로드되는 페이지의 비디오를 캡쳐하여 프레임 간의 속도를 계산합니다.