Image Lazy Loading 이란?
아직 화면에 보여지지 않은 이미지들은 로딩 시점을 뒤로 미루어 웹 성능을 최적화하는 기법이다. 사용자가 화면에서 보이지 않는 이미지는 사용자가 페이지의 해당 부분으로 스크롤 할 때까지 로드되지 않는 것을 의미합니다. 이 기술은 초기 로딩 시간을 크게 줄일 수 있으며, 더 빠른 페이지 속도와 더 나은 사용자 경험을 제공할 수 있습니다.
Image Lazy Loading 장점
- 성능 향상
웹 사이트의 로딩 시간 감소 : 페이지 초기 로딩 시 필요로 한 이미지의 bytes를 줄일 수 있다. 이는 유저가 사용할 수 있는 제한된 네트워크 대역폭의 경쟁을 줄이는 것을 의미한다. 따라서 디바이스가 다른 리소스를 더 빠르게 처리해서 다운로드 할 수 있고, lazy loading을 쓰지 않는 것에 비해 유저가 페이지를 훨씬 빨리 이용하게 된다. - 비용 감소
통신 비용 감소 : 앞서 언급했듯이 이미지가 보여지지 않거나 사이즈가 줄어 페이지 내에서 전달할 총 바이트 용량을 줄인다. 이미지 전달 같은 리소스 전달은 주로 전송 바이트 수에 기반하여 청구되는데, 이는 페이지를 이탈하거나 페이지를 스크롤 하지 않고 상단에서만 서비스를 이용하는 유저에게 효과적이다.
Image Lazy Loading 구현 방법
- Intersection Observer API 이용하기
- image placeholder 사용하기
- 이미지 요소의 loading 속성을 이용한 Native Lazy Loading 사용하기
유튜브처럼 이미지가 초기에는 빈 공간으로 표시되다가 로드가 완료되면 이미지가 표시되도록 하면 초기 페이지 로딩 속도를 개선할 수 있습니다. 이를 위해 우선 이미지를 로드하지 않고, 이미지를 나타내는 작은 썸네일 이미지를 먼저 로드하고, JavaScript를 사용하여 사용자가 썸네일 이미지를 클릭하면 비동기적으로 이미지를 로드하여 보여주도록 구현할 수 있습니다.
이 방법은 이미지 lazy loading 기술을 응용한 것으로, 초기에는 작은 썸네일 이미지만 로드하여 페이지 로딩 속도를 개선하고, 필요한 시점에 이미지를 비동기적으로 로드하여 사용자 경험을 향상시킵니다. 이를 구현하려면, 이미지 태그의 src 속성 대신 data-src 또는 data-original 속성을 사용하여 이미지의 URL을 저장하고, JavaScript를 사용하여 사용자가 썸네일 이미지를 클릭하면 이미지를 비동기적으로 로드하고, 로딩이 완료되면 이미지를 표시하도록 구현할 수 있습니다.
<img
src="apple.webp"
alt="apple"
loading="lazy" //이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다.
decoding="async"> //다른 콘텐츠의 표시 지연을 피하기 위해 이미지를 비동기적으로 디코딩 합니다.https://web.dev/lazy-loading-images/
https://web.dev/fast/#lazy-load-images-and-video
