[센디] 이미지 최적화(1)

태그: #센디 #개발자
url:
날짜: 2024-07-20
연결문서:

---

7월 15일부터 현재까지 이미지 최적화에 대해 고민 중.

배경 컨텍스트

• 드라이버웹을 마이그레이션할 때, 재플린에서 png 이미지를 전부 3배수로 다운받아서 집어넣음.
• 그래서 현재 프로덕션에서 이미지 최초 로딩이 꽤나 느리다.
• 구글 크롬의 lighthouse 측정 결과로도 LCP가 많이 낮다.
• 캐싱된 이미지를 불러오는 것은 빠르지만, 최초 로딩 속도가 느리기 때문에 이걸 개선하는 것을 목표로 한다.

솔루션1 - 단순하게 저화질 이미지(2배수)로 교체한다.

• 제일 깔끔한데 모든 이미지를 바꿔야하기 때문에 제일 귀찮다.

솔루션2 - next/image의 priority 속성을 적용한다.

• 페이지를 로딩했을 때 제일 먼저 보이는 가장 큰 이미지에 priority 속성을 적용한다.
• 스테이징 배포 시에, 로딩 체감 속도는 많이 개선된 것으로 보인다.
• 그러나 여전히 대다수의 이미지 로딩 속도는 그대로라서, lighthouse 측정 점수에 변화는 없었다.

솔루션3 - avif 를 적용하자.

• nextjs 서버는 이미지 요청 시, 기본적으로 webp로 변환해서 돌려준다. 이후에는 캐싱된 webp 이미지를 돌려주기 때문에 엄청 빠르다.
• 이 때, next.config.js에서 webp 말고 avif로 변환하도록 설정한다.
• avif는 webp보다 20% 정도 압축률이 더 좋기때문에 더 가벼운 이미지를 생성하니까 속도가 개선될 것이다! 라고 생각했다.
• 스테이징 배포 시, 이미지 최초 로딩 시 png를 avif로 변환하는 데에 기존보다 더 오랜 시간이 소요되었다. 대신 캐싱된 avif를 불러오는 것은 훨씬 빨라졌다.(webp보다 가볍기 때문!)
• 어차피 캐싱 이미지 로딩 속도는 원래도 빨랐었고, 최초 로딩 속도는 개선하는 것이 목표였기 때문에 avif 솔루션은 폐기..
• 그리고 avif가 더 최신 확장자라 지원하지 않는 브라우저도 더 많다고 한다.

솔루션4 - 처음부터 webp 이미지를 넣으면 변환과정이 줄어들지 않을까?

• 어느 순간 번뜩이는 아이디어처럼 떠올랐다.
• png를 webp로 변환하는데에 시간이 걸린다면, png말고 webp로 넣으면 변환 과정 자체가 없지 않을까??
• 일단 sharp로 스크립트 코드를 작성해서 public/image 하위의 모든 png를 webp로 변환하고 스테이징에 배포해보았다.
  • 들쭉날쭉하긴 하지만, lighthouse의 점수가 엄청나게 올라간 것을 확인할 수 있었다.
• 그러나 Nextjs 공식 문서를 뒤져봐도 딱히 관련된 내용은 없었다.
• 그래서 nextjs 이미지 최적화 로직을 뜯어봤다.
• 요약하자면, webp 이미지를 넣어도 이미지 변환을 수행한다!
• nextjs에서 이미지 변환은 sqoosh 또는 sharp 라이브러리를 사용한다.
• 이미지 파일이 webp인지 상관없이 일단 버퍼로 변환 후, 이걸 브라우저가 원하는 확장자로 무조건 변환한다. 브라우저가 어떤 것이든 원할 때는 nextjs 설정에 따라 webp로 변환한다.
• 결론적으로 이미지 변환 과정을 제거하는 것은 nextjs에서 지원하지 않는다.

솔루션 4.1 - nextjs 모듈에서 이미지 변환 과정을 제거하기

• 그러면 node_moduls 내의 nextjs 모듈에서 이미지가 webp일 시, webp로 변환하지 말도록 조건문 처리를 하는 것은 어떨까?
• 사실 이 방식을 사용하면 문제가 해결은 된다.
• 대신 이럴 경우, nextjs 모듈을 변형시키는 것이기 때문에 여러 번거로움이 생길 것이다.
  • node_modules를 설치할 때마다 코드를 계속 수정해주어야 한다.
  • 추후에 사이드이펙트가 생길 때 원인을 찾기 힘들 것이다.
• 아예 nextjs를 포크해서 사내 모듈로 관리해도 되긴하겠지만, 추후 nextjs 업데이트를 받기 힘든 것은 물론이고, 현재 제품팀 사이즈를 고려했을 때 사내 모듈화는 아직 이른 것 같다. 관리하기에 볼륨이 너무 크다.
• 대신, png를 webp로 변환하는 것보다, webp를 webp로 변환하는 것이 속도가 빠르긴 한 것 같다.

고민 지점

• 우선 성능을 개선하기에 앞서서, 현재의 성능지표를 측정해둘 필요가 있을 것 같다.
• 추후에 개선된다고 쳐도 명확한 지표가 있어야 개선의 여부의 확인할 수 있을 것 같다.
• lighthouse는 솔직히 좀 잴 때마다 점수 낙차가 좀 있어서 미덥지 못하다.
• 적절한 성능측정 방법에 대해서도 고민해봐야 할 것 같다.