웹 최적화 - Image LazyLoading

 

 

 Image LazyLoading

페이지 내에서 실제로 필요할 때까지 리소스의 로딩을 미루는 것

 

 

👆 전체 페이지에서 모든 이미지를 받아오지 않고 스크롤을 내릴 때마다 받아옴

 

 

 

페이지 초기 로딩 시 필요한 이미지 수를 줄일 수 있음

필요한 부분 먼저 받아오면서 필요하지 않은 사진들을 받아오지 않아도 되므로 유저가 빠르게 이용할 수 있고 비용이 감소함

 

 

 

적용 방법

 

 

html 은 img 태그의 src="이미지 주소" 를 읽으면 이미지를 무조건 로드함

lazy loading 을 위해서 src 속성이 아닌 다른 태그를 사용해서 이미지 url을 지정함

 

<img data-src="이미지 주소" />

 

이렇게 이미지 로드를 사전에 막고, 언제 로딩할 것인지(뷰포트에 들어오면 로딩하라!) 알려주면 된다.

 

 

 

방법으로는

 

1. window scroll event 

2. observer API 를 사용하는 방식

 

중요한 건 사진을 불러올 때 data-src 태그를 src 태그로 바꾸어서 불러온다는 것

 

+ observer API 쓸 경우에 미리미리 사진을 받아온다면 스크롤을 내렸을 때 유저가 placeholder 를 보지 않고도 사진을 바로 확인할 수 있음

 

 

 

---

 

 

요약

 

 

 

src 속성을 사용하면 이미지를 무조건 로드함

=> 보여질 부분만 이미지를 src 속성으로 바꾸어주기

 

+ throttling 과 debouncing을 사용해서 과부하 막아주기

 

throttling : 마지막 함수를 호출한 후 일정 시간 지나기 전에 다시 호출되지 않도록 하는 것 (setTimeout 주로 사용)

debounce : 함수가 연이어 호출된다면 가장 마지막 함수만 호출하는 것 (setTimeout 주로 사용)

 

 

 

 

느낀점

 

 

image 최적화를 잠깐 알아보았는데

 

결국 observerAPI 나 window 스크롤 이벤트를 사용한다는 점에 있어서는 크게 어렵다는 느낌을 받지 않았다.

 

참고한 블로그에서는 이미지를 완벽히 로드하기 전에 보여주는 placeholder도 적용하는 법도 소개했는데

사실 사진을 미리미리 받아온다면 해결될 수 있는 문제라 생각하여 자세히 들여다보진 않았다.

 

무한 스크롤은 쿼리스트링으로 값을 보내어 뷰포트에 걸릴 때마다 10장, 20장, 30장 (if let limit=10) 받아왔는데

 

오늘 학습한 내용은

 

1. 이미지를 통으로 받아서

2. 바로바로 보여주는 게 아닌 잘라서 보여주기 (성능을 위해)

 

이다.

이렇게도 최적화를 할 수 있구나했고

 

 

catbow-convertPage 에 라이브러리를 적용하며 사진을 받아올 때 잘라서 받았던 로직이 생각났다

 

원래는 통으로 받아왔으나

 

// ...Catbow.tsx


const [ejectRatio, setEjectRatio] = useState(0);
const imgGetController = useRef({
1: false,
2: false,
3: false,
});


...


if (!imgGetController.current[3] && ejectRatio > 50) {
  fetchImages({ start: 521, end: 703 });
  imgGetController.current[3] = true;
} else if (!imgGetController.current[2] && ejectRatio > 20) {
  fetchImages({ start: 281, end: 520 });
  imgGetController.current[2] = true;
} else if (!imgGetController.current[1] && ejectRatio >= 0) {
  fetchImages({ start: 1, end: 280 });
  imgGetController.current[1] = true;
}

 

스크롤의 비율을 통해서 사진들을 미리 받아와야했으므로

isIntersecting 의 boolean 값이 아닌 isIntersecting Ratio 값을 사용해서 사진들을 미리 불러왔었다

 

 

 

 

 

👇 통으로 미리 받아왔던 블로깅

2023.03.10(금) 기록용

 

 

 

 

 

 

출처 

https://velog.io/@y_jem/%EC%93%B0%EB%A1%9C%ED%8B%80%EB%A7%81throttling%EA%B3%BC-%EB%94%94%EB%B0%94%EC%9A%B4%EC%8B%B1debouncing

https://helloinyong.tistory.com/297#title-0