웹 성능 개선하기

> 이미지 최적화 하기

1. 차세대 이미지 형식 결정하기

WebP, AVIF > JPEG, PNG

- 압축률이 더 높아서 다운로드가 빠르고 데이터 소비량도 적다.   

 

사용방법 : picture 태그와 source태그 사용하기 -- WebP를 지원하는 브라우저는 WebP 적용...

 

2. 적절한 크기의 이미지 사용하기

렌더링 크기가 작은데 고유크기 클 경우 불필요함... 이미지 크기 슬라이스 필요... 

화면의 크기에 맞게 렌더링하는 이미지 크기가 달라진다면 "반응형 이미지"를 제공한다. 

- Image CDN 사용하기 : 기본 CDN 기능에서 이미지를 제공하는데 특화된 CDN이다. 이미지 압축, 최적화 기능이 탑재되어있다. 

 

3. CLS(누적 레이아웃 변경) 개선하기

CLS란? 사용자가 예상치 못한 레이아웃 이동을 경험하는 빈도를 수량한 것. 시각적 안정성을 나타내는 지표이다. 

이미지 요소에 명시적인 너비 및 높이를 설정하여 레이아웃 변경 횟수를 줄이고 누적 레이아웃 변경을 개선한다. 

img {

   width : 100px;

   height : 300px;

}

img {

   width : 600px;

   aspect-ratio : 16/9;

}

 

4. 이미지 Lazy Loading 

- loading="lazy" 사용하기

모든 브라우저가 로딩속도를 지원하는건 아님

- IntersectionObserver 사용하기

5. 이미지 Pre Loading

기존에 로딩되는 시점을 미리 앞당기는 것.. 

 

출처 : https://www.youtube.com/watch?v=INPldifIEXE