📚 기초 지식

[최적화] Lighthouse

Mia_ 2023. 2. 1. 16:32

📍 Lighthouse

- 사이트를 검사하여 성능 측정을 할 수 있는 도구

- 다양한 지표를 이용하여 웹페이지의 성능 검사를 해줄뿐 아니라 그에 대한 개선책도 제공해 줌 

 

 

📍 Lighthouse 분석 결과 항목

1. Performance

- 웹 성능을 측정함

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

 

2. Accessibility

- 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인함 

- 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 확인

 

3. Best Practice

- 웹 페이지가 웹 표준 모범 사례를 잘 따르고 있는지 확인함

- HTTPS 프로토콜을 사용하는지, 사용자가 확인할 확률은 높지 않지만 콘솔창에 오류가 표시되지 않는지 등을 확인 

 

4. SEO

- SEO 항목에서는 웹 페이지가 검색 엔진 최적화가 잘 되어 있는지 확인함

- 애플리케이션의 robots.txt가 유효한지, <meta>  요소는 잘 작성되어 있는지, 텍스트 크기가 읽기 무리 없는지 확인

 

5. PWA(Progressive Web App)

- PWA 항목에서는 해당 웹 사이트가 모바일 애플리케이션에서도 잘 작동하는지 확인함

- 앱 아이콘을 제공하는지, 스플래시 화면이 있는지 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인함

 

 

📍 Lighthouse의 Perfomance 측정 메트릭

1. First Contentful Paint

- 줄여서 FCP는 성능(Performance) 지표를 추적하는 메트릭

- 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫 부분을 렌더링하는데 걸리는 시간을 측정함

- 즉 사용자가 감지하는 페이지의 로딩 속도를 측정할 수 있음

- 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야함

- 페이지의 이미자와 <canvas> 요소, SVG 등 모두 DOM 콘텐츠로 구분되며 <iframe> 요소의 경우 이에 포함되지 않음

- 외로 FCP 처럼 일부 콘텐츠의 첫번째 렌더링 시점을 측정하는 것이 아닌 중 콘텐츠 로딩이 완료된 시점을 측정하는 것을 목표로한다면 Large Contentul Paint(LCP) 지표로 확인할 수 있음

 

2. Largest Contentful Paint

- 줄여서는 LCP는 뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정함

- 이를 이용해 주요 콘텐츠가 유저에게 보이는 시간까지를 가늠할 수 있음

- [표] LCP 해석 기준

LCP time(in sec) Color-coding
0 - 2.5 Green (fast)
2.25 - 4 Orange (moderate)
Over 4 Red (slow)

 

3. Speed Index

- 성능(Performance) 지표를 추적하는 메트릭

- Speed Index는 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정

- Lighthouse는 먼저 브라우저 페이지 로딩 과정을 각 프레임마다 캡쳐함

→ 그리고 프레임 간에 보이는 요소들을 계산함
→ 그 후 Speedline Node.js module을 이용하여 Speed Index 점수를 그래프의 형태로 나타냄

Speed Index(in sec) Color-coding
0 - 3.4 Green (fast)
3.4 - 5.8 Orange (moderate)
Over 5.8 Red (slow)

 

4. Time to interactive

- 줄여서 TTI는 페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지 시간을 측정

TTI의 기준
- 페이지가 FCP로 측정된 컨텐츠가 표시되어야 함
- 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록됨
- 페이지가 0.05초 안에 사용자의 상호작용에 응답함

- TTI 점수는 아카이브된 HTTP 데이터를 기반으로 백분위 단위로 점수를 측정함

TTI metric (in sec) Color-coding
0 - 3.8 Green (fast)
3.9 - 7.3 Orange (moderate)
Over 7.3 Red (slow)

 

5. Total Blocking Time

- 대부분의 사용자는 0.05초가 넘는 작업에는 응답이 계속 올때까지 키보드를 두두리거나 마우스를 클릭하기 때무에 페이지가 느리다고 인식 → 이를 개선하기 위한 지표가 TBT임

- TBT는 페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정함

- Lighthouse에서는 FCP와 TTI 사이에 긴 시간이 걸리는 작업들을 모두 기록하여 TBT를 측정함

 

6. Cumulative Layout Shift

- CLS는 사용자에게 콘텐츠가 화면에서 얼마나 많이 움직이는지(불안정 한지)를 수치화한 지표

- 이 지표를 통해 화면에서 이리저리 움직이는 요소(불안정한 요소)가 있는지를 측정할 수 있음

 

 

📍 개선 방향 잡기

- Lighthouse는 성능을 측정할 뿐아니라 무엇이 시간을 많이 소모하는지, 어떻게 개선하여 최적화 할 수 있을지 해결책도 제시함

- Opportunities 항목을 확인하면 각 메트릭별 문제를 확인할 수 있음