Lighthouse metrics에 대해 알아보자!

저는 현재 개인 프로젝트로 스페인어 학습에 도움이 되는 웹 페이지를 만들고 있습니다. 만들어 나가면서 Chrome Lighthouse로 스페인어 단어 페이지의 Performance를 측정해 보았는데 점수가 참 형편 없었습니다!

제 개인 프로젝트의 Performance 점수를 개선해 나가기 전에 Lighthouse 측정으로 도출되는 Performance의 metrics에는 어떤 것들이 있는지 간단하게 정리해 보고자 합니다.

1. Lighthouse란?

Lighthouse는 구글에서 만든 툴로서 웹사이트의 성능을 측정할 수 있는 자동화 툴입니다. 크롬 개발자 도구의 Lighthouse 항목에서 모바일 또는 데스크톱 환경을 설정하고 아래 <사진1>과 같은 사항들을 측정할 수 있습니다.

<사진1>

Mode

• Navigation(Default): 초기 페이지의 로딩 상황에서 발생하는 문제 분석
• Timespan: 사용자가 정의한 시간 사이에 발생하는 문제 분석
• Snapshot: 현재의 스냅샷 상에서 발생하는 문제 분석

Categories

• Performance: 웹 페이지 로딩 성능
• Accessibility: 접근성
• Best practices: 보안 및 최신 표준 문제
• SEO: 검색 엔진 노출
• Progressive Web App: 서비스 워커, 오프라인 동작 등과 관련된 문제 분석

Lighthouse 성능 계산이 끝나면 성능을 개선할 수 있는 가이드를 제공해 줍니다. 부끄럽지만 제가 측정해 보았던 페이지의 성능 점수는 <사진2>와 같았습니다. 참고로 Lighthouse 10 버전을 이용했습니다.

<사진2>

그렇습니다. 45점입니다. 점수가 낮을수록 높일 여지가 많다는 뜻이니 얼마나 다행일까요? 여기서 도출된 METRICS 각 항목에 대해 알아봅시다.

2. Metrics

위 <사진2>에서 도출된 Metrics 항목은 다음과 같습니다. 각각의 항목은 Performance 점수 계산 시 반영 비율이 다릅니다. TBT가 가장 높은 반영 비율을 갖습니다.

• First Contentful Paint(FCP) - 10%
• Largest Contentful Paint(LCP) - 25%
• Total Blocking Time(TBT) - 30%
• Cumulative Layout Shift(CLS) - 25%
• Speed Index(SI) - 10%

Time To Interactive(TTI) 항목도 존재했지만 Lighthouse 10 버전에서는 삭제됐습니다. 그 이유는 TTI 항목은 높은 변동성을 나타내는 특정 네트워크 요청과 긴 태스크에서 민감하게 반응한다는 것이 입증되었기 때문이라고 합니다.

(1) FCP

First Contentful Paint marks the time at which the first text or image is painted.

First Contentful Paint. FCP는 앞 단어에서 유추할 수 있듯이 페이지 진입 후 브라우저가 DOM 콘텐츠(텍스트, 이미지 등)의 첫 부분을 렌더링 하는 데 걸리는 시간을 나타냅니다. FCP는 다른 지표 요소 측정의 기준점이 되기도 합니다. 계산 시 10%의 비중을 갖습니다. 제 측정에서는 1.9초가 기록되었습니다.

(2) LCP

Largest Contentful Paint marks the time at which the largest text or image is painted.

Largest Contentful Paint. 이 역시 앞 단어에서 유추할 수 있습니다. 화면에 표시될 가장 큰 이미지 또는 텍스트 요소가 렌더링되기 까지 걸리는 시간을 나타냅니다. LCP로 측정될 수 있는 요소는 <img>, <svg>, <video>, block 요소 등이 있습니다. 페이지 내에서 차지하는 크기가 클수록 더 큰 중요성을 가질 가능성이 높으므로 성능 계산 시에 25%이라는 높은 비중을 갖습니다. 제 측정에서는 2.7초가 기록되었습니다.

(3) TBT

Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds.

Total Blocking Time. TBT는 페이지 내에서 클릭, 키보드 입력 등 사용자 입력에 응답하지 않도록 차단된 시간을 종합한 지표입니다. FCP에 해당하는 구간 이후에 측정이 이루어지며 메인 스레드를 독점해 다른 동작을 방해하는 작업에 걸린 시간을 측정해 종합합니다. 계산 시 가장 비중이 큰 30%를 차지합니다. 제 측정에서는 의문스럽지만 0ms로 기록되었습니다.

(4) CLS

Cumulative Layout Shift measures the movement of visible elements within the viewport.

Cumulative Layout Shift. CLS는 페이지 로드 과정에서 발생할 수 있는 레이아웃 이동(순간적으로 화면상에서 DOM 요소의 위치, 크기가 변하는 것)을 측정하는 것입니다. 계산 시 TTI가 존재했을 때 15%의 비중을 가졌지만 TTI가 사라진 이후 25%의 비중을 갖게 되었습니다. 제 측정에서는 0.939의 값으로 기록되었습니다.

(5) SI

Speed Index shows how quickly the contents of a page are visibly populated.

Speed Index. SI는 페이지 로드 중에 콘텐츠들이 시각적으로 표시되는 속도를 나타냅니다. 페이지가 로드되는 것을 비디오 캡처를 통해 얼마나 콘텐츠들이 빠르게 표시되는지 측정합니다. 계산 시 10%의 비중을 갖습니다. 제 측정에서는 9.3초를 기록했습니다.

3. 마무리

이번에는 간단하게 Lighthouse 측정으로 표시되는 Performance의 Metrics 항목들에는 어떤 것들이 있는지 알아보았습니다. Lighthouse 측정으로 Performance 하단의 DIAGNOSTICS 항목에는 <사진3>과 같이 이 페이지를 어떻게 개선하면 좋을지에 대한 가이드가 주어집니다.

다음 시간에는 이를 바탕으로 Performance 점수를 올리기 위해 제 개인 프로젝트를 어떻게 개선할 수 있을 지에 대해 얘기해 보겠습니다.

참고자료

• <웹 개발 스킬을 한 단계 높여 주는 프론트엔드 성능 최적화 가이드> 도서
• https://blog.soomgo.com/blog/website-benchmark-with-lighthouse/
• https://developer.chrome.com/docs/lighthouse/performance/performance-scoring
• https://web.dev/articles/tti