RFC: 그밈 서비스 최적화 하기
Closed this issue · 1 comments
ojj1123 commented
개요
https://pagespeed.web.dev/analysis/https-app-thismeme-me/9hqxjjyhj3?form_factor=mobile
2.2.0 릴리즈 이후 pagespeed 측정 결과 위와 같은 결과를 얻었다.
모바일 기기 기준으로 모든 성능 지표에서 낮은 점수를 받았다.
현재는 이미지는 S3에서 그대로 받아서 사용하고 있다. 그래서 이미지 확장자 변환, 리사이징 등의 이미지 최적화를 적용하고 있지 않고, 캐싱 또한 이루어지지 않고 있다. 이는 LCP 점수에 큰 영향을 주는 부분이다.
이를 개선해보고자 한다.
성능 개선 요구사항 설정
성능 개선을 하기 전 요구사항을 설정해보자.
이미지 최적화를 통해 사용자에게 콘텐츠 이미지를 제공하자
위와 같이 요구사항을 설정할 수 있겠다.
이전에는 vercel 이미지 최적화 기능을 이용했다. 그러나 최적화 한도를 넘기고 계속 사용하다가 vercel에서 더 이상 이미지 최적화 기능을 사용하지 못하도록 막아두었다. hobby 계정의 경우 1,000장 최적화는 무료이고, pro 플랜의 경우 한달에 20$에 더해 5000장 이상 최적화할 경우 1,000장당 5$씩 부과하고 있다. 즉, 달마다 20$ + a 만큼의 비용을 지불해야 한다. 다른 CDN서비스에 비해 가격이 높은 편이어서 팀원들에게 반려되었다.
성능 지표 설정
- LCP, CLS
측정 환경
작성중...
성능 개선 기대값
작성중...
개선 포인트
작성중...
체크리스트
- 이미지 최적화 기법 조사
- vercel 과 비교했을 때의 비용 절약
- nextjs와 다른 CDN 간에 연동할 수 있는 방법 조사
- 이미지 최적화 ci 구축