pgg-dev
Lighthouse 툴을 이용한 페이지 검사 본문
Lighthouse는 구글에서 만든 툴로, 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴입니다.
Lighthouse로 검사하기
Mode
- - Navigaion: 초기 페이지 로딩 시 발생하는 성능 문제를 분석
- - Timespan: 사용자가 정의한 시간 동안 발생한 성능 문제를 분석
- - Snapshot: 현재 상태의 성능 문제를 분석
Categories
- - Performance: 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석
- - Accessibility: 서비스의 사용자 접근성 문제를 분석
- - Best Practies: 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
- - SEO: 검색엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석
- - Progressive Web App: 서비스 워커와 오프라인 동작 등, PWA와 관련된 문제를 분석
Lighthouse 검사 결과
Lighthouse가 측정한 웹페이지의 종합 성능 점수는 84점입니다.
이 점수는 아래 여섯 가지 지표(METRICS)에 가중치를 적용해 평균치를 낸 점수입니다.
이러한 지표를 웹 바이탈(Web Vitals)이라고 부릅니다.
First Contentful Paint(FCP)
페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링 하는 데 걸리는 시간에 관한 지표입니다.
FCP는 총점을 계산할 때, 10%의 가중치를 갖습니다.
Speed Index(SI)
페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표입니다.
SI는 총점을 계산할 때, 10%의 가중치를 갖습니다.
Largest Contentful Paint(LCP)
페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표입니다.
LCP는 총점을 계산할 때, 25%의 가중치를 갖습니다.
Time to Interactive(TTI)
사용자가 페이지와 상호 작용이 가능한 시점까지 걸리는 시간을 측정한 지표입니다.
여기서 상호작용이란 클릭 또는 키보드 누름 같은 사용자 입력을 의미합니다.
즉, 이 시점 전까지는 화면이 보이더라도 클릭 같은 입력이 동작하지 않습니다.
TTI는 총점을 계산할 때, 10%의 가중치를 갖습니다.
Total Blocking Time(TBT)
페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 총합한 지표입니다.
측정은 FCP와 TTI 사이의 시간 동안 일어나며 메인 스레드를 독점하여 다른 동작을 방해하는 작업에 걸린 시간을 총합합니다.
TBT는 총점을 계산할 때, 30%의 가중치를 갖습니다.
Cumlative Layout Shift(CLS)
페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표입니다.
이동이란 화면상에서 요소의 위치나 크기가 순산적으로 변하는 것을 말합니다.
CLS는 총점을 계산할 때, 15%의 가중치를 갖습니다.
OPPORTUNITIES 섹션
페이지를 더욱 빨리 로드하는 데 잠재적으로 도움되는 제안을 나열합니다.
DIAGNOSTICS 섹션
로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여줍니다.
따라서 이 두 섹션을 통해 해당 서비스의 어느 부분을 개선해야 성능을 향상할 수 있는지 쉽게 파악할 수 있습니다.
결과의 하단에는 검사 환경을 확인할 수 있습니다.
살펴볼만한 항목은 Emulated Desktop, Custom throttling입니다.
Emulated Desktop 추가 정보에는 CPU throttling이라는 정보를 확인할 수 있습니다.
이는 기기(컴퓨터)의 CPU 성능을 어느 정도 제한하여 검사를 진행했는지를 나타냅니다.
여기서는 1x로 되어 있으므로, CPU 성능에 제한을 두지 않고 검사했음을 알 수 있습니다.
검사 전 Device 설정을 Mobile로 선택했다면 4x로 표시될 것입니다.
Custom throttling에는 Network throttlin이라는 정보가 있습니다.
이는 네트워크 속도를 제한하여 어느정도 고정된 네트워크 환경에서 성능을 측정했다는 의미입니다.
여기서는 102040Kbps로 네트워크 속도를 제한한 것을 확인할 수 있습니다.
이 두 가지 제한 때문에 Lighthouse를 이용해 측정할 때 페이지 로드 속도가 더 느린 것입니다.