블로그 성능 분석 (Lighthouse)
작성일: 2023-10-23Lighthouse
Lighthouse는 구글에서 개발한 웹 페이지의 품질을 개선하기 위한 오픈소스 자동 도구입니다.
개발자 도구에서 쉽게 Lighthouse를 사용할 수 있으며, Performance, Accessibility, Best practices, SEO, PWA 항목 별로 분석할 수 있습니다.
항목별로 Lighthouse가 어떻게 평가하는지 확인해보겠습니다.
성능 지표
성능의 지표는 5가지가 있습니다.
First Contentful Paint
- 사용자가 페이지로 이동한 후 브라우저가 첫 번째 DOM 콘텐츠를 렌더링 하는데 걸리는 시간
- 페이지의
<canvas>및 SVG는 DOM 콘텐츠로 간주되고 iframe 안의 모든 요소를 포함되지 않습니다.
평가 기준
| FCP time(in seconds) | Color-coding |
|---|---|
| 0–1.8 | Green (fast) |
| 1.8–3 | Orange (moderate) |
| Over 3 | Red (slow) |
Speed Index
- 페이지 로딩 중에 콘텐츠가 시각적으로 얼마나 빨리 표시되는지 측정
- 브라우저에서 페이지가 로딩되는 동영상을 캡처하여 프레임 사이의 시각적 진행 상황을 계산 후 Speedline Node.js 모듈을 사용하여 Speed Index 점수를 생성
평가 기준
| Speed Index(in seconds) | Color-coding |
|---|---|
| 0–3.4 | Green (fast) |
| 3.4–5.8 | Orange (moderate) |
| Over 5.8 | Red (slow) |
Total Blocking Time
- 마우스 클릭, 화면 탭 또는 키보드 누름과 같은 사용자 입력에 대한 페이지가 응답하지 못하도록 차단된 총 시간을 측정
평가 기준
| TBT time(in milliseconds) | Color-coding |
|---|---|
| 0–200 | Green (fast) |
| 200-600 | Orange (moderate) |
| Over 600 | Red (slow) |
Largest Contentful Paint
- 뷰포트에서 가장 큰 콘텐츠 요소가 화면에 렌더딩되는 시점을 측정
- 이는 페이지의 주요 콘텐츠가 사용자에게 표시되는 시점과 비슷
평가 기준
| LCP time(in seconds) | Color-coding |
|---|---|
| 0-2.5 | Green (fast) |
| 2.5-4 | Orange (moderate) |
| Over 4 | Red (slow) |
Cumulative Layout Shift
- 페이지에서 발생한 예상치 못한 레이아웃 변경에 관한 점수의 최대 버스트 점수
평가 방법
레이아웃 변경 점수는 영향 비율 * 거리 비율로 계산
위의 사진에서 영향 비율은 빨간색 점선 영역인 0.75 (75%)이고 거리 비율은 회색 영역이 이동한 거리인 0.25(25%)로 레이아웃 변경 점수는 0.75 * 0.25 = 0.1875입니다.
Performance 분석
아래 블로그 페이지 중 콘텐츠가 많은 포스트에 대한 Performance 점수입니다.
First Contnetful Paint, Largest Contentful Paint, Total Blocking Time에서 성능 문제가 발생한 것을 확인할 수 있습니다.
하단 OPPORTUNITIES와 DIAGNOSTICS 섹션에서 개선할 수 있는 항목을 알 수 있습니다.
원인은 주로 다음과 같습니다.
- AWS S3 이미지 로드 성능 저하 (no-cache, size)
- 리소스 연속 요청으로 인한 rendering blocking
- minify되지 않은 리소스
이미지 로딩 개선
이미지를 불러오는데 가장 성능이 저하되기 때문에 성능 개선할 부분이 많이 있었습니다.
- sharp 라이브러리를 사용해 webp 포맷으로 변환 후 Amazon S3 업로드
- Amazon S3 캐시 적용
- 스크린 밖에 있는 이미지 지연 로딩 적용
- CLS 개선을 위한 이미지 스켈레톤 적용
리소스 로딩 개선
리소스를 불러오는 방식도 Rendering Blocking을 발생시켜 개선할 부분이 있었습니다.
- 바로 필요없는 리소스에 대해 의도적으로 로딩을 지연
다음 글에서 이미지 및 리소스 로딩 개선에 대해 살펴보겠습니다.
Reference
https://developer.chrome.com/docs/lighthouse/performance/