S4 unit8 | Lighthouse로 최적화 하기
⭐ Lighthouse 시작하기
1. chrome 개발자 도구에서 실행
2. Node CLI에서 실행
npm install -g lighthouse-g 옵션을 사용하여 전역 모듈로 설치하는 것을 권장한다.
lighthouse <url> // 검사 실행 명령어
💬 Lighthouse 분석 결과 항목
1. Performance
웹 성능 측정
화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기 까진 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인한다.
2. Accessibility
웹 접근성 확인
대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인한다.
3. Best Practices
웹 표준 모범 사례에 부합한지 확인
HTTPS 프로토콜을 사용하는지, 콘솔 창에 오류가 표시되지는 않는지 등을 확인한다.
4. SEO
검색 엔진 최적화 확인
애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인한다.
5. PWA (Progressive Web App)
모바일 애플리케이션으로서도 잘 작동하는지 확인
앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인한다.
💬 Performance 측정 메트릭
1. First Contentful Paint (FCP)
성능(Performance) 지표를 추적하는 메트릭
FCP는 사용자가 페이지에 접속했을 때 브라우저가 DOM 컨텐츠의 첫번째 부분을 렌더링하는 데 걸리는 시간을 측정한다. 즉 사용자가 감지하는 페이지의 로딩속도를 측정할 수 있다. 우수한 사용자 경험을 제공하려면 FCP가 1.8초 이하여야 한다.
❗ 페이지의 이미지, <canvas>, SVG 등 모두 DOM 콘텐츠로 구분되지만 <iframe> 요소의 경우 포함되지 않음.
2. Largest Contentful Paint (LCP)
뷰포트를 차지하는 가장 큰 콘텐츠(이미지 또는 텍스트 블록)의 렌더 시간을 측정한다.
이를 이용해 주요 콘텐츠가 유저에게 보이는 시간까지를 가늠할 수 있다.
📰 LCP 점수 해석표
| LCP time (in seconds) | Color-coding |
| 0 - 2.5 | Green (fast) |
| 2.5 - 4 | Orange (moderate) |
| Over 4 | Red (slow) |
3. Speed Index
성능(Performance) 지표를 추적하는 메트릭
페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는 지를 측정한다.
Lighthouse는 먼저 브라우저의 페이지 로딩과정을 각 프레임마다 캡쳐하고 프레임 간 화면에 보이는 요소들을 계산한다. 그 후 Speedline Node.js module을 이용하여 Speed Index 점수를 그래프의 형태로 나타낸다.
📰 Speed Index 점수 해석표
| Speed time (in seconds) | Color-coding |
| 0 - 3.4 | Green (fast) |
| 3.4 - 5.8 | Orange (moderate) |
| Over 5.8 | Red (slow) |
4. Time to interactive (TTI)
페이지가 로드되는 시점부터 사용자와의 상호작용이 가능한 시점까지의 시간을 측정한다.
페이지가 완전히 상호작용 가능한 것의 기준
- 페이지에 FCP로 측정된 컨텐츠가 표시되어야 함.
- 이벤트 핸들러가 가장 잘 보이는 페이지의 엘리먼트에 등록됨.
- 페이지가 0.05초안에 사용자의 상호작용에 응답함.
📰 TTI 점수 해석표
| Speed time (in seconds) | Color-coding |
| 0 - 3.8 | Green (fast) |
| 3.9 - 7.3 | Orange (moderate) |
| Over 7.3 | Red (slow) |
5. Total Blocking Time (TBT)
페이지가 유저와 상호작용하기까지의 막혀있는 시간을 측정한다.
대부분의 사용자는 0.05초가 넘는 작업을 느리다고 인식하므로 이를 초과하는 작업은 긴 작업으로 간주된다.
메인스테드에서 작업을 실행하는 데 소요된 총 시간 : 560ms
TBT : 345ms
6. Cumulative Layout Shift (CLS)
컨텐츠가 화면에서 얼마나 많이 움직이는지(불안정한 지)를 수치화한 지표
💬 Opportunities (한글 번역 '추천')
페이지 로드에 도움이 되는 항목을 보여줌.
성능 점수 자체에 직접적인 영향을 미치지는 않음.
💬 Diagnostic (진단)
현재 애플리케이션 성능과 관련된 추가 정보.
