Lighthouse

 

1. Lighthouse

• Lighthouse: 구글에서 개발한 오픈소스로, 웹 페이지의 품질을 검사, 개선할 수 있는 자동화 툴.
• 성능, 접근성, PWA, SEO 등을 검사함

 

Lighthouse 실행 결과

2. Lighthouse 분석 결과 항목

1. 성능 (Performance): 웹 성능 측정. 화면에 콘텐츠가 표시되는데 시간이 얼마나 걸리는지, 표시된 후 사용자와 상호작용하기까지 얼마나 걸리는지, 화면에 불안정한 요소는 없는지 등을 확인함
2. 접근성 (Accessibility): 웹 페이지가 웹 접근성을 잘 갖추고 있는지 확인함. 대체 텍스트를 잘 작성했는지, 배경색과 콘텐츠 색상의 대비가 충분한지, 적절한 WAI-ARIA 속성을 사용했는지 등을 확인함
3. 권장사항 (Best Practices): 웹 페이지가 웹 표준 모법 사례를 잘 따르고 있는지 확인함. HTTPS 프로토콜을 사용하는지, 콘솔 창에 오류가 표시되는지 등을 확인함
4. 검색 엔진 최적화 (SEO): 웹 페이지가 검색 엔진 최적화가 잘 되어 있는지 확인함. 애플리케이션의 robots.txt가 유효한지, <meta> 요소는 잘 작성되어 있는지, 텍스트 크기가 읽기에 무리가 없는지 등을 확인함
5. PWA (Progressive Web App): 웹 사이트가 모바일 애플리케이션으로서도 잘 작동하는지 확인함. 앱 아이콘을 제공하는지, 스플래시 화면이 있는지, 화면 크기에 맞게 콘텐츠를 적절하게 배치했는지 등을 점수가 아닌 체크리스트로 확인함.

 

3. Performance의 Opportunities

 각 항목들의 자세한 설명은 아래의 링크에서 확인할 수 있다. 이번 시간에는 현재 이 글을 작성 중인 페이지를 검사한 후 나오는 Opportunities 항목들에 대한 내용을 아래 링크에서 확인할 것이다. 

 

Minify JavaScript (자바스크립트 줄이기)

• Minify JavaScript (자바스크립트 줄이기)
  • JavaScript 파일을 축소하면 페이로드 크기와 스크립트 구문 분석 시간을 줄일 수 있습니다. Lighthouse 보고서의 기회 섹션에는 축소되지 않은 모든 JavaScript 파일이 나열되며 이러한 파일을 축소할 때 잠재적으로 절약할 수 있는 키비바이트(KiB)가 표시됩니다.

 

Eliminate render-blocking resources ( 렌더링 차단 리소스 제거하기)

• Eliminate render-blocking resources (렌더링 차단 리소스 제거하기)
  • 중요한 리소스를 인라인화하고 그렇지 않은 리소스는 지연시키며 사용자하지 않는 모든 것들을 제거해 렌더링 차단 URL의 영향을 줄이는 것이 목표이다.

 

Serve images in modern formats (차세대 형식을 사용해 이미지를 제공하기)

• Serve images in modern formats (차세대 형식을 사용해 이미지를 제공하기)
  • 좀 오래된 형식의 이미지가 나열되며, 이러한 이미지들의 AVIF 버전을 제공함으로써 얻을 수 있는 잠재적인 절감 효과를 보여준다.

 

 

---

참고: https://developer.chrome.com/en/docs/lighthouse/performance/