이미지 크기를 줄이고 싶어요 - FE14-Part4-Team5/reser-on-do GitHub Wiki

처음 기능 구현을 끝내고 처음으로 Lighthouse라는 것을 실행해봤어요.

그동안 리액트의 CSR 방식의 문제점은 알고 있었지만,

빠른 네트워크 한경에 익숙하다 보니 성능 문제를 체감하지 못하고 지나쳤던 것 같아요.

  • 당시 테스트한 페이지의 이미지 용량은 3.4mb였고,
    리액트만 사용했기에 당연히 Next.js를 사용했을 때와는 달리 이미지 최적화가 자동으로 되지 않았어요.

  • 이미지 최적화로 눈에 띄게 개선할 수 있는 지표는 LCP와 Speed Index가 있는데,
    최적화 하기 전 LCP, Speed Index는 각각 25s, 13.3s가 나왔어요.

  • 제가 맡은 페이지에서 (체험등록) 이미지 용량이 3.4mb로 그대로 서버에 전달되고 있었고,
    여기서 이미지를 최적화해서 서버로 전달시키면 어느정도 문제가 해결될 거라 생각했어요

그래서 resizeImage 함수를 만들었어요.

  • 이 함수는 File을 입력으로 받아서, canvas를 사용해 리사이즈하고, drawImage로 캔버스에 이미지를 그려요

  • 그 후, toBlob으로 .webp 포맷으로 변환한 다음, 품질은 0.7로 설정해서 최적화된 File 객체를 새로 만들어 반환하는 함수예요.

이렇게 최적화를 진행한 후 수치는 다음과 같이 개선되었어요.

이미지 크기 3.2mb -> 47.5kb LCP 25s -> 5.2s 약 80% 개선 Speed Index 13.3s -> 5.5s 약 59% 개선

이게 최선인가 ?

  • 사용자 경험은 괜찮은지 생각해야 해요
    • 단순히 이미지 품질을 0.7로 줄였지만, 사용자가 체험 썸네일에서 느낄 퀄리티 저하는 없을까에 대해 생각해봐야 해요.
    • 제 스스로가 비교하여 볼 때, 도찐개찐이다라는 생각이 들어서 적용했지만, 실제 사용자의 눈은 다를 수도 있겠죠.
  • 서버에서 처리하는 게 더 좋지 않았을까 ?
    • 클라이언트에서 압축하면 사용자 디바이스 성능에 부담을 줄 수 있어, 이미지 리사이즈를 서버에서 하는 구조였다면 더 안정적이였을 것 같아요

결국 현재 프로젝트 규모와 구조 상, 클라이언트에서 간단하게 처리하기로 결정했어요.

하지만 이 경험을 통해 이미지 최적화가 왜 중요한지 직접적으로 알게되었어요.