[Web] 웹 페이지 성능 개선을 위한 도구 Lighthouse 알아보기

시작하며

 시간이 지남에 따라 웹과 웹앱 애플리케이션은 더 많은 데이터 통신, 복잡한 UI 구성, 다양한 애니메이션과 많은 이미지 처리 등 처리하는 태스크들이 많아지게 되었습니다.

 

 사용자에게 다량의 정보를 가공하고 더 보기 좋은 웹 애플리케이션을 제공하는 것은 큰 의미가 있겠지만 많은 것을 제공함에 따른 성능 저하로 인하여 사용자 경험이 떨어지기 쉬워졌습니다.

 

 웹 페이지 성능 개선을 위한 최적화 작업은 웹 서비스를 제공하는 경우, 서비스 고객의 네트워크 전송량, CDN의 비용 등 여러 방면과 밀접한 연관을 가지고 있는 만큼 중요해졌습니다.

 

 

 

 Google Chrome에서 제공하는 Lighthouse라는 Dev tool을 이용하게 된다면 웹 페이지의 성능을 쉽고 직관적이게 확인할 수 있습니다.

 

오늘은 Lighthouse의 사용 방법과 내부 지표 등에 대하여 알아보고자 합니다

 

 

Lighthouse?

 

https://github.com/GoogleChrome/lighthouse

Lighthouse는 웹 앱과 웹 페이지를 분석하여 최신 성능 지표와 개발자 모범 사례에 대한 통찰력을 수집합니다.

 

 Lighthouse는 웹 및 웹앱 애플리케이션의 품질 개선에 도움을 주는 자동화 도구로 성능, 접근성, SEO(검색 엔진 최적화) 등 사이트에 대한 한 전체적인 진단이 가능합니다.

 

 

사용법

 

CLI를 이용하는 방법도 존재하지만 이번 포스팅에서는 가장 간단하고 편하게 접근할 수 있는 방법을 소개해드리고자 합니다.

 

 

먼저 Chrome 브라우저를 열고 검사하고자 하는 사이트에 접속한 뒤, 개발자 도구 > Lighthouse 로 이동합니다.

 

해당 탭에서 Lighthouse의 모드, 기기, 카테고리를 설정할 수 있습니다.

 

(현재 사내에서 진행하는 프로젝트의 성능 개선이 주 목적이라 성능만 체크해두었습니다. 4가지 카테고리를 전부 다 활성화하는 것이 전체적인 웹 사이트 개선에 더 도움이 될 수 있다는 점 참고 부탁 드립니다).

 

 

 보고서 생성이 완료되면 Lighthouse 내부 점수 계산식에 따라 환산된 점수를 확인할 수 있으며, 각 측정 항목에 대한 수치를 제공받을 수 있습니다.

 

각 항목에 대하여 간단하게 알아보면 아래와 같습니다.

 

FCP

• 사용자가 페이지에서 처음으로 콘텐츠(텍스트, 이미지, 비디오 등)를 볼 수 있는 시점
  • 브라우저가 DOM에서 렌더링 가능한 콘텐츠를 처음 그릴 때 측정

 

LCP

• 화면에서 가장 큰 이미지, 텍스트 블록, 동영상의 렌더링 시간
  • 화면을 렌더링 하면서 LCP 영역을 계산
  • 사용자 인터렉션 (scroll, input) 발생시 측정 종료

 

TBT

• 메인 스레드가 사용자 입력에 응답하지 못한 시간
  • FCP와 TTI(Time to Interactive) 사이에서 발생하는 모든 태스크 중 50ms 이상 걸린 부분의 합
  • 태스크가 100ms 걸렸다면 초과된 50ms가 TBT로 기록

 

 

CLS

• 페이지 콘텐츠의 예기치 않은 레이아웃 이동(시프트)을 측정하는 지표
  • 레이아웃 이동의 영향을 받은 영역 비율과 화면에서 이동한 거리의 곱으로 계산
  • 버튼이 아래로 25% 이동했다면 CLS 값은 0.25

 

 

 

 lighthouse는 진단 결과로 어떠한 요소가 성능 저하의 원인인지 해결 방법은 무엇인지 솔루션까지 제공합니다. 해당 점수와 진단 내역은 html이나 json 파일로 추출할 수도 있습니다.

 

 

마치며

 Lighthouse가 제공하는 진단 보고서는 단순한 점수 이상의 의미를 가지며, 문제의 원인을 구체적으로 파악하고 해결 방안을 제안함으로써 웹 페이지의 최적화 작업을 보다 체계적으로 진행할 수 있는 지도의 역할을 해줍니다.

 

 웹 페이지의 성능은 사용자의 만족도, 네트워크 비용 절감과 같이 비즈니스적 측면에서도 여러 이점을 가져갈 수 있기 때문에 앞으로도 더 관심을 가져야할 부분으로 보입니다.