LazyLoad vs Preload

LazyLoad vs Preaload

 

 

Preload

 

• 웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다.
• 이 때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 PreLoad를 지정하는 방식이다.
• Head 태그에 빠르게 로딩시킬 파일을 PreLoad로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다.

 

	import { useEffect, useRef, useState } from "react";
	export default function PreloadPage() {
	const [imgTag, setImgTag] = useState<HTMLImageElement>();
	const divRef = useRef<HTMLDivElement>(null);
	useEffect(() => {
	const img = new Image();
	img.src =
	"https://cdn.pixabay.com/photo/2022/04/21/22/50/animal-7148487_960_720.jpg";
	img.onload = () => {
	setImgTag(img);
	};
	}, []);
	const onClickPreload = () => {
	if (imgTag) divRef.current?.appendChild(imgTag);
	// document.getElementById("aaa")?.appendChild(imgTag)
	};
	return (
	<>
	<div ref={divRef}></div>
	<button onClick={onClickPreload}>이미지 보여주기</button>
	</>
	);
	}

view raw preload.js hosted with ❤ by GitHub

└ "이미지 보여주기" 버튼을 클릭하지도 않았는데 이미지가 우선적으로 요청이 된 것을 확인할 수 있다.

 

 

 

Preload를 올바르게 사용하기

 

 

불필요한 리소스에 Preload는 걸지 않기

 

• 우선 preload로 선언되는 순간, 해당 소스가 실제로 사용하든 하지 않든 무조건 서버로부터 요청하여 다운로드를 하게 된다.
• 이는, 잘못 사용하게 되면 오히려 초기 로딩 성능을 저하시키는 역효과를 발생시킬 수 있으므로, 초기 로드 시 사용되지 않는 리소스에 Preload를 설정하지 않게 주의해야 한다.

 

 

비지니스에 맞게 전략적으로 사용하기

 

• 초기 로드에 필요한 리소스에만 Preload를 잘 걸어주었다 하더라도, 무조건 전부다 Preload를 하는 것 또한 올바르지 않다.
• Preload를 전부 걸면 결국 우선순위 없이 모든 리소스를 요청하고, 다운로드 후 브라우저에서 렌더링 시 메인 스레드가 분산되어 Preload 역할의 의미가 없어지게 된다.
• 따라서, 각 서비스 별로 어떤 리소스를 우선적으로 로딩하는 게 좋은지 판별하여 적절하게 Preload를 걸어주는 것이 좋다.

Preload는 전체적인 웹 성능을 빠르게 하기 위해 사용되는 속성이 아니다.
비지니스에 따라 빠르게 로딩해야 하는 특정 리소스를 위해 사용되는 속성이다.

 

 

 

---

 

 

Lazyload

 

• Lazyload란 말 그대로 로딩을 바로 하지 않고 지연시켰다가 로딩을 나중에 해준다는 뜻이다.

 

• 예를 들어 한 페이지에 많은 양의 사진이 사용된다고 가정해보자
• 이 때 만약, 많은 양의 사진을 한 번에 로드를 하는 것은 서비스의 속도를 늦추는 요인이 될 수 있다.
• 따라서, 페이지를 로드할 때 페이지에서 사용되는 모든 사진을 한 번에 로드하는 것이 아니라 실제 화면에 보이는 사진들만 로드하게 된다면, 로드해야 되는 사진의 개수는 눈에 띄게 줄어들것이다.
• 결과적으로 처음 로드할 때 화면에 보여지는 이미지들만 로드를 해주고, 나머지 사진들은 로드되는 것을 지연시켰다가 스크롤을 내리면서 나머지 사진들이 보이게 될 때 추가적인 로드를 해준다면 사용자에게 더 빠른 속도로 화면을 보여줄 수 있게 된다.
• 이런 결과를 만드는 방법이 지연 로딩을 이용하는 것이다.

 

	import LazyLoad from "react-lazyload";
	import styled from "@emotion/styled";
	export const Wrapper = styled.div`
	height: 500px;
	`;
	export default function LazyLoadPage() {
	return (
	<Wrapper>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2022/04/19/08/32/relax-7142183_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2022/04/21/22/50/animal-7148487_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2022/04/06/20/29/airplane-7116299_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2022/04/21/19/47/lion-7148207_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2022/04/05/19/27/penguin-7114280_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2021/09/30/11/47/african-lily-6669925_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2022/04/24/09/34/blackbird-7153234_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2021/11/22/04/21/drink-6815800_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2021/12/02/18/38/seagulls-6841129_960_720.jpg" />
	</LazyLoad>
	<LazyLoad width={500} height={500}>
	<img src="https://cdn.pixabay.com/photo/2022/04/23/17/16/cascade-7152189_960_720.jpg" />
	</LazyLoad>
	</Wrapper>
	);
	}

view raw lazyload.js hosted with ❤ by GitHub

 

결과는 아래와 같다.

┌ 화면에 보여지는 이미지만 로드된 결과이다.

└ 네트워크의 가장 아래를 비교해보자

 

└ 네트워크의 가장 아래를 보면, 화면에 보여지는 이미지만 나타나는 것을 볼 수 있다.