웹 페이지 성능 측정
https://pagespeed.web.dev/ 이 페이지에서 로직 수정 전에 한번 테스트를 해보았다.
결과는 처참했다. 젠장
해결할 문제가 너무 많았다. 원래 오늘은
저 페이지네이션을 해결하려했다. 더 많은 페이지를 가진 카테고리를 고르고 적은 페이지로 돌리면 최대치가 유지되어서 빈값으로 보이는 이 에러를 해결하려했지만 저 성능표를 보니 눈에 들어오지 않아 내일하기로 했다.
이미지 최적화
지금 내 페이지는 홈페이지에 45개의 이미지를 가진 메인 캐러셀과 요일별로 30개의 이미지를 가진 세컨더리 캐러셀을 화면에 나타내는데 이미지를 외부에서 api를 통해 가져오다보니 크기가 너무 커서 렌더링이 오래걸린다. 일단은 구글링을 통해 할 수 있는 부분은 다한 것 같은데 그럼에도 너무 느리다.
Lazy loading
img태그에 loading="lazy" 속성을 주어 페이지를 로드할 때, 모든 이미지를 로드하는 것이 아니라 중요하지 않은 자원 또는 당장 필요 없는 자원의 경우 서버에 요청을 미루고 필요한 경우 해당 자원을 요청 받는 방법을 말한다. 이는 브라우저의 랜더링 시간을 줄여준다 한다.
하지만 첫 페이지에서 보일 이미지라면 안쓰는 것이 좋다고 한다. 지금 모든 이미지 태그에 lazy loading을 적용 했지만 첫 페이지는 따로 생각해 보지 않았다.
Image CDNs
이미지 CDN은 URL을 사용하여 최적화 옵션을 나타내어 이미지를 최적화 할수 있다 하는데 이걸 보고 api로 받은 주소에 "?format=webp"를 넣어주어 webp 형식으로 변환 하고자 했는데 브라우저의 소스에 들어가보니 이미지 크기는 그대로더라 내가 잘못 사용한건가,,
진짜 답답하다 이미지 최적화에만 하루종일 걸리는 것 같다.
