Lighthouse

깃헙, 네이버 등 여러 웹 사이트들을 크롬 개발자 도구의 Lighthouse를 이용하여 performance를 측정해 보았다.
그 결과, 공통적으로 많이 나타나는 Opportunities들을 모아봤고 그 의미와 해결방안에 대해서 정리해보았다.

Opportunities

• Serve images in next-gen formats
  WebP와 AVIF와 같은 이미지 포맷은 PNG나 JPEG보다 더 나은 압축을 제공하고 이것은 빠른 다운로드와 적은 데이터 소모를 가능하게 한다.

• Reduce initial server response time
  메인 문서에 대한 서버 응답 시간을 짧게 유지해야 한다. 왜냐하면 다른 모든 요청들이 해당 응답 시간에 달려있기 때문이다.

• Reduce unused JavaScript
  사용하지 않는 자바스크립트를 줄이고 네트워크 활동에 의해 소모되는 바이트를 줄이기 위해 필요할 때까지 스크립트 로딩을 미룬다.

  서버 사이드 렌더링이 아니라면, React.lazy()와 Suspense를 사용하여 코드분할하고 번들을 나누자.

• Defer offscreen images
  TTI를 줄이기 위해 모든 중요한 리소스들의 로드가 완료된 후 오프스크린과 숨겨진 이미지의 지연 로딩을 생각해보자.

• Reduce unused CSS
  사용하지 않는 스타일시트의 규칙들을 줄이고 네트워크 활동에 의해 소모되는 바이트를 줄이기 위해 스크롤 없이 볼 수 있는 콘텐츠에 사용되지 않는 CSS를 지연시키자.

• Efficiently encode images
  최적화된 이미지는 빠르게 로드되고 셀룰러 데이터를 덜 소모한다.

• Use HTTP/2
  HTTP/2는 HTTP/1.1보다 이진 헤더와 멀티플렉싱 같은 더 많은 장점을 제공한다.