카카오 페이지에서 light house를 돌려보았을때의 모습이다.
Serve images in next-gen formats
기본적으로 카카오 페이지가 웹툰페이지여서인지 가장 많은 시간이 소요된것은 이미지를 로드하는 시간이었다. 이를 webp 등의 차세대 형식의 이미지로 제공하게 되면, 이미지 파일의 크기를 25-50% 정도 줄일 수 있어 페이지의 로드 속도가 빨라지게 된다. <img> 대신 next/image 요소를 사용하여 형식을 자동으로 최적화 할 수 있다.
Reduce unused JavaScript
Light house에서는 카카오페이지에 이만큼의 양의 리소스가 사용되고 있다고 감지했다. Webpack Bundle Analyzer 를 사용하여 사용하지 않는 JavaScript 코드를 감지하여 필요할 때까지 스크립트 로드를 연기하거나 서버 측 렌더링이 아닌 경우 자바스크립트 번들을 React.lazy()로 분할하세요. 그렇지 않으면 loadable-components와 같은 타사 라이브러리를 사용하여 코드를 분할하는것이 도움이 될 수 있다.
Use HTTP/2
카카오 페이지는 현재 HTTP/1.1을 사용하고 있는것으로 감지되지만, HTTP/2를 사용하면 이진 헤더 및 다중화를 포함하여 많은 이점을 제공받을 수 있다. HTTP/2 에 대한 자세한 설명은 다음 링크에서
mdn 확인할 수 있다.
Properly size images
또한, 사이트의 작은 사이즈의 틀에 큰 사이즈의 이미지를 사용하다 보니,
다음과 같이 최대한 줄였을때의 리소스 사용량과, 현재 상태의 리소스 사용량에 큰 차이가 있었다.
