성능 최적화(Lighthouse 이용)

💡문제

메인페이지가 랜더링이 늦으면 유저 입장에서 좋지않기에 Lighthouse를 이용해 성능최적화를 시도해보기로 했다.

💪🏻해결

첫째, png 파일은 모두 webp로 변환해서 다시 적용했다.

WebP 및 AVIF와 같은 이미지 형식은 PNG나 JPEG보다 압축률이 높기 때문에 다운로드가 빠르고 데이터 소비량도 적습니다.

 

둘째, link에 rel="preload" 를 사용한다.

참고링크

최대 콘텐츠풀 페인트 최적화

LCP 요소에서 사용된 이미지를 미리 로드하여 LCP 시간을 개선하세요

rel="preload"

아직 빨간불이긴하지만 speed index가 눈에 띄게 줄어든것을 볼 수 있었다.