라이트 하우스
라이트하우스(Lighthouse)
웹 페이지의 성능, 접근성, 최적화에 관한 테스트 및 보고서를 생성하는 오픈 소스 자동화 도구입니다.
구글에 의해 개발되었으며, Chrome 개발자 도구 내에서도 사용할 수 있습니다.
간단하게 이야기 하자면 웹사이트의 성능을 측정하고 개선 방향을 제시해 주는 자동화 툴 입니다.
Lighthouse 를 이용해서 웹사이트의 성능 점수를 측정하고 개선 가이드를 확인함으로써 어떤 부분을 중점적으로 분석하고 최적화해야 하는지 알 수 있습니다.
Mode
- Navigation : 기본값으로, 초기 페이지 로딩 시 발생하는 성능 문제를 분석
- Timespan : 사용자가 정의한 시간 동안 발생한 성능 문제를 분석
- Snapshot : 현재 상태의 성능 문제를 분석
Categories
- Performance : 웹 페이지의 로딩 과정에서 발생하는 성능 문제를 분석
- Accessibilty : 서비스의 사용자 접근성 문제를 분석
- Best practices : 웹사이트의 보안 측면과 웹 개발의 최신 표준에 중점을 두고 분석
- SEO : 검색 엔진에서 얼마나 잘 크롤링되고 검색 결과에 표시되는지 분석
- Progressive Web App : PWA 와 관련된 문제를 분석
성능 측정
성능 측정 용어
🐣 First Contentful Paint ( FCP ) 🐣
FCP 는 페이지가 로드될 때 브라우저가 DOM 콘텐츠의 첫 번째 부분을 렌더링 하는 데 걸리는 시간에 관한 지표입니다. 위에 사진을 보면 페이지에 진입하여 첫 콘텐츠가 뜨기까지 0.3 초가 걸렸음을 알 수 있습니다.
Performance 점수 중 10% 를 차지합니다.
🐣 Speed Index ( SI ) 🐣
SI 는 페이지 로드 중에 콘텐츠가 시각적으로 표시되는 속도를 나타내는 지표 입니다.
Performance 점수 중 10% 를 차지합니다.
🐣 Largest Contentful Paint ( LCP ) 🐣
LCP 는 페이지가 로드될 때 화면 내에 있는 가장 큰 이미지나 텍스트 요소가 렌더링되기까지 걸리는 시간을 나타내는 지표 입니다. Performance 점수 중 25% 를 차지합니다.
🐣 Time to Interactive ( TTI ) 🐣
TTI 는 사용자가 페이지와 상호 작용이 가능한 시점까지 걸리는 시간을 측정합니다.
여기서 상호 작용이란 클릭 또는 키보드 누름 같은 사용자 입력을 의미합니다.
Performance 점수 중 10% 를 차지합니다.
🐣 Total Blocking Time( TBT ) 🐣
TBT 는 페이지가 클릭, 키보드 입력 등의 사용자 입력에 응답하지 않도록 차단된 시간을 총합한 지표입니다.
Performance 점수 중 30% 를 차지합니다.
🐣 Cumulative Layout Shift ( CLS ) 🐣
CLS 는 페이지 로드 과정에서 발생하는 예기치 못한 레이아웃 이동을 측정한 지표입니다.
레이아웃 이동이란 화면상에서 요소의 우이치나 크기가 순간적으로 변하는 것을 말합니다.
Performance 점수 중 15% 를 차지합니다.
Opportunities , Diagnostics
Lighthouse 의 중간 부분을 보면 진단 부분이 보입니다.
이 부분은 로드 속도와 직접적인 관계는 없지만 성능과 관련된 기타 정보를 보여줍니다.
또한 사진에는 포함되어 있지 않는 Opportunities 섹션도 있는데 이 부분은 페이지를 더욱 빨리 로드하는 데 잠재적으로 도움되는 제한을 나열합니다.
따라서 이 두 섹션을 통해 해당 서비스의 어느 부분을 개선해야 성능을 향상할 수 있는지 쉽게 파악할 수 있습니다.
검사 환경
Lighthouse 결과의 가장 하단에서는 검사 환경을 확인할 수 있습니다.
에뮬레이션된 테스크톱 with Lighthouse 11.4.0 을 마우스로 올려 보면 CPU 성능을 어느 정도 제한하여 검사를 진행했는지 나타냅니다.
맞춤형 제한을 마우스로 올려 보면 네트워크 속도를 제한하여 어느 정도 고정된 네트워크 환경에서 성능을 측정했는지 확인할 수 있습니다.
여기서 이 두가지 제한 때문에 Lighthouse 없이 그냥 페이지를 로드하는 속도보다 Lighthouse 를 이용해 측정할 때 페이지 로드 속도가 더 느립니다.
결국 Lighthouse 를 이용해서 웹페이지 성능을 90점 이상으로 끌어 올린다면 웹사이트가 더 빠르게 로드되고
이로 인해 사용자의 경험을 향상시킬 수 있는 좋은 결과를 야기합니다.
