Lighthouse

임덤덤·2022년 12월 5일

사이트를 검사해서 성능 측정을 할 수있는 도구임
- 구글에서 개발한 오픈소스이고 웹페이지 품질을 개선 할 수 있는 자동화 툴임
Performance
- 웹의 성능을 측정함 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지 등등 확인
Accessibility
- 웹 페이지가 웹접근성을 잘 갖추고 있는지 확인함
  - 대체 텍스트를 잘 작성했는지, 배경과 콘텐츠 색상의 대비가 충분한지 등등
Best Practices
- 웹 페이지가 웹 표준 모범사례를 잘 따르고 있는지 확인함
SEO
- 웹 페이지가 검색 엔진 최적화가 잘 되어있는지 확인함
PWA
- 웹 사이트가 모바일 앱으로 잘 작동하는지 확인함
  - 점수가아닌 체크리스트로 확인함

FCP는 성능 지표를 추적하는 메트릭임
- 뷰포트를 차지하는 가장 큰 콘텐츠의 렌더 시간을 측정하고 주요 콘텐츠가 유저에게 보이는 시간까지 가늠 할 수 있음
Speed Index
- 성능 지표를 추적하는 메트릭임 페이지를 로드하는 동안 얼마나 빨리 컨텐츠가 시각적으로 표시되는지를 측정함
- 브라우저의 페이지 로딩과정을 각 프레임마다 캡쳐하고 프레임간에 화면에 보이는 요소들을 계산함
- 그 후에 Speed Index 점수를 그래프 형태로 남김
Time to interactive
- 페이지가 로드되는 시점부터 사용자와의 상호 작용이 가능한 시점까지의 시간을 측정함
Total Blocking Time
- 유저와 상호작용 하기까지의 막혀있는 시간을 측정함
- Lighthouse에서는 FCP와 TTI사이에 긴 시간이 걸리는 작업들을 모두 기록해서 TBT를 측정함
Cumulative Layout Shift
- 사용자에게 컨텐츠가 화면에서 얼마나 많이 움직이는지 ( 불안정한지)를 수치화한 지표임
- 이 지표를 통해서 화면에 움직이는 요소가 있는지를 측정 할 수 있음

개선사항 : WebP 및 AVIF와 같은 이미지 형식은 경우에 따라서는 PNG 또는 JPEG보다 더 나은 압축을 제공하기 때문에 다운로드가 더 빠르고 데이터 소비가 적기때문에 형식변경을 하면 더 최적화가 가능할것 같음

개선사항 : Lighthouse는 모든 JPEG,BMP 이미지를 수집하고 압축수준을 85로 설정하고 원래버전과 압축된 버전을 비교해서 4Kib 이상이면 최적화 가능한걸로 표시한다고 함 그래서 해당 이미지들 보다는 최적화된 이미지는 더 빠르게 로드되고 셀룰러 데이터를 덜 소비하기 때문에 개선여지가 있는 부분이다

개선사항 : 사용하지 않는 JavaScript를 줄이고 네트워크 활동에 의해 소비되는 바이트를 줄이기 위해 필요할 때까지 스크립트 로딩을 연기하는 방법으로 개선여지가 있음 하지만 특별하게 큰 부분을 차지하지는 않아보임

개선사항 : 스타일시트에서 사용하지 않는 규칙을 줄이고 스크롤 없이 볼 수 있는 콘텐츠에 사용되지 않는 CSS를 연기하여 네트워크 활동에 의해 소비되는 바이트를 줄일수 있어보임 하지만 전체적으로 겹치는 규칙이 없어보이고 비중이 크지않아보임

개선사항 : 리소스가 페이지의 첫 번째 페인트를 차단하고 있습니다. 중요한 JS/CSS를 인라인으로 제공하고 중요하지 않은 모든 JS/스타일을 연기하고 사용하지 않는 항목을 제거해서 이러한 렌더링 차단 URL의 영향을 줄이라곤 하는데 이게무슨소리인지 잘 모르겠다^^..

개선사항 : JavaScript 파일을 축소하면 페이로드 크기와 스크립트 구문 분석 시간을 줄일 수 있다고 한다 하지만 자바스크립트적 요소가 많이 들어가지않은 페이지인것 같아서 큰 고려대상은 아닌것 같다

내가 분석한 해당 페이지는 JS/CSS적인 요소가 많이 들어가지 않고 URL이나 이미지가 중적으로 제공되는 페이지 이다 보니 해당 부분을 중점으로 최적화를 진행한다면 좀더 최적화된 웹 페이지를 만들 수 있을것 같다
- 특히나 이미지가 차지하고있는 비중이 높기 때문에 중점으로 관리하면 조금 더 좋을듯 싶다