웹 최적화 - 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(금) 기록용
요즘 ts로 고친 후 catbow-convert 페이지 고치는데 재미가 들려 이것저것 시도해보고 있다 (그냥 단순히 학습하는 것보다 적용한다고 생각하고 학습하니 좀 더 속도가 붙는 거 같기두하구) 1. contextAP
0119eunji.tistory.com
출처