Lighthouse

예시) 네이버 페이지

Lighthouse 분석 결과 항목

1. Performance

• 웹 성능을 확인
• 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인합니다.

2. Accessibility

• 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인
• 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인합니다.

3. Best Practices

• 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인
• HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔 창에 오류가 표시되지는 않는지 등을 확인합니다.

4. SEO

• 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인
• 애플리케이션의 robots.txt가 유효한지, meta 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인합니다.

5. PWA

• 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인
• 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인합니다.

Lighthouse의 Performance 측정 메트릭

1. First Contentful Paint

• 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 번째 부분을 렌더링하는 데 걸리는 시간을 측정합니다.
• 사용자가 감지하는 페이지의 로딩속도를 측정 가능, 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 합니다.

2. Largest Contentful Paint

• 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정합니다.
• 주요 콘텐츠가 유저에게 보이는 시간까지를 가늠할 수 있습니다.

3. Speed Index

• 성능(Performance) 지표를 추적하는 메트릭입니다.
• 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정합니다.

4. Time to interactive

• 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정합니다.
• 페이지에 FCP로 측정된 컨텐츠가 표시, 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록, 페이지가 0.05초안에 사용자의 상호작용에 응답되어야 합니다.

5. Total Blocking Time

• 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정합니다.
• FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정합니다.

6. Cumulative Layout Shift

• 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표입니다.
• 지표를 통해 화면에서 이리저리 움직이는 요소(불안정한 요소)가 있는 지를 측정할 수 있습니다.

Opportunities 항목(17가지)

1) Eliminate render-blocking resources
2) Properly size images
3) Defer offscreen images
4) Minify CSS
5) Minify JavaScript
6) Remove unused CSS
7) Efficiently encode images
8) Serve images in modern formats
9) Enable text compression
10) Preconnect to required origins
11) Reduce server response times (TTFB)
12) Avoid multiple page redirects
13) Preload key requests
14) Use video formats for animated content
15) Reduce the impact of third-party code
16) Avoid non-composited animations
17) Lazy load third-party resources with facades

출처 : https://developer.chrome.com/en/docs/lighthouse/performance/