이미지 최적화

가장 눈에 띄는 것은 이미지의 로딩 속도였습니다. 따라서 lighthouse에서 이미지 관련 항목들을 살펴보니 두가지가 보였습니다.

1. 이미지에 width, height 속성 부여
2. 이미지 확장자 png -> webp로 변경

따라서 웹 페이지 내의 모든 이미지에 적절한 width, height를 부여하고, 그 과정에서 이미지 사이즈가 지나치게 큰 파일은 resize하고, 해상도가 낮은 파일은 새로 찾아 넣었습니다.

또한 이 사이트에서 png 파일들을 모두 webp 파일로 변경했습니다.

번들 사이즈 측정

이후 더 자세한 분석을 위해 번들 사이즈를 측정해보기로 했습니다. 저는 현재 vite라는 빌드도구를 사용해 번들링 등의 작업을 진행하고 있습니다. vite는 "뷔이-트"라고 읽어야하는거 다들 아시죠? 프랑스어로 "빠르다"라는 뜻입니다. 기존의 번들러와는 다르게 vite는 빌드시마다 새로 번들링을 하는 것이 아니라 변경된 부분만 바꾸어 속도가 빠릅니다. CRA에서는 webpack을 사용하는데 서버 구동시 개발자가 직접 느낄 수 있을 정도로 속도차이가 난답니다.

이 vite에서는 번들러로 rollup을 사용하기 때문에 번들 사이즈 측정시에도 rollup-plugin-visualizer 를 사용하면 됩니다. 해당 모듈을 install한 후 vite.config.ts 파일에 다음과 같이 작성해주면 됩니다.

///vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  plugins: [
    visualizer({
      open: true,
    }),
  ],
});

참고로 옵션은 공식 문서에서 확인하고 넣으시면 되는데 open: true로 안하면 파일이 생겼는지 어쨌는지 찾기가 어려우므로 넣으시는 것을 추천드립니다. 브라우저에서 바로 열리기 때문입니다.

html파일이 열리면 다음과 같이 보입니다.

디용 대충봐도 복잡하고 커다랗습니다. 당황스럽습니다. 제일 큰 것부터 살펴보니 공통점이 있습니다

라이브러리로 가져온 UI kit들 (ex. 차트, 캐러셀, popover...)

빨리 기능을 개발하겠다는 일념하나로 깔아온 라이브러리들...
이제와서 후회가 됩니다.
이건 당장 1분만에 해결이 불가능한 부분들이므로 태스크로 만들어놓고 다른 항목들을 살펴보니 눈에 띄는 파일이 있었습니다.

왼쪽 중앙의 "GithubIcon.tsx"이죠.
겨우 아이콘 하나 넣었는데 왜 저렇게 커다랄까 봤더니 svg파일을 다루기 쉬우려고 tsx파일로 바꾸어 넣어 발생한 문제였습니다. 빠르게 svg파일로 변경해 주었더니 다음과 같아졌습니다.

아주 조금 나아졌네요... 앞으로 나아갈 길이 멉니다 🛤