[CS 지식] Lazy Loading

🎈 의미

레이지 로딩이란 중요도가 떨어지거나 현재 화면에 보이지 않는 요소들의 로딩을 뒤로 미루어 로딩 성능을 향상시키는 최적화 기술을 의미한다.

 

사용하는 이유

하나의 페이지에 많은 정보를 포함하는 경우 요소들이 모두 로드될때까지의 시간이 오래걸리게 된다. 이러한 문제는 사용자 경험을 저하시키게 된다.

 

현재 당장에 사용자가 보고 있는 화면 요소를 우선적으로 로딩하고 나머지 뷰포트를 벗어난 영역에 대해서는 추후 뷰포트에 들어올때 로드를 하는 방식을 사용하여 페이지에 최초 접근 시 빠르게 로딩을 완료할 수 있게 해준다.

 

이탈률

웹사이트 로딩속도와 이탈률의 관계도를 보여주는 데이터는 다음과 같다.

로딩 시간 이탈률

로딩 시간	이탈률
1초 이하	7%
2초	13%
3초	16%
4초	10%
5초	28%
5초 이상	26%

표는 BrowserStack 참조.

💡 이탈률은 직전 로딩 시간 기준 이탈률의 증가 퍼센트이다.

 

표를 참조하면 로딩이 5초이상 걸리는 경우 1초이하로 걸릴때 보다 90퍼센트 이상 유저 이탈이 발생한 것을 확인할 수 있다.

 

그래서 최초 로딩시간이 유저의 이탈을 막는데 가장 중요한 요소 중 하나이기 때문에 레이지로딩을 사용하여 로딩시간을 단축시키는 것이 중요하다.

 

👓 적용 방법

대표적으로 이미지나 비디오와 같은 미디어파일은 용량이 크고 네트워크로부터 데이터를 전송받아올 때 오래걸린다. 그래서 미디어파일에 레이지로딩방식을 많이 사용한다. 이때 주의할 점은 최초 페이지 로드시에 뷰포트 영역에 포함되는 미디어파일은 레이지로딩을 하지 않고 즉시 보여주어야 한다.

 

레이지로드를 적용하기 위한 방법은 두 단계로 나눌 수 있다.

 

첫 번째 단계는, 이미지 로딩을 사전에 막는 것이다. img 태그를 사용할 때 src 속성에 값이 존재하면 해당 태그가 파싱될 때 src 속성의 값으로 이미지를 네트워크를 통해 요청하게 된다. 그래서 src 속성의 값을 비워두어서 로딩을 사전에 막아야 한다.

 

하지만 추후 해당 태그가 뷰포트 영역에 들어왔을 때 로딩이 되어야 하기 때문에 데이터 속성을 사용하여 주소를 저장한다.

<img data-src="https://이미지주소.png" />

 

두 번째 단계는, 스크롤을 통해서 뷰포트를 이동되었을 때 이미지가 뷰포트영역에 포함되었는지를 확인할 수 있어야한다. 다음 3가지 방법이 존재한다.

 

 

📯 scroll, resize, orientationChange 이벤트

scroll, resize, orientationChange와 같은 이벤트의 발생으로 뷰포트가 이동될 수 있다. 해당 이벤트가 호출될때마다 이미지가 뷰포트에 포함되는지 확인할 수 있다.

document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);

function lazyload() {
	// 뷰포트에 이미지가 포함되는지 확인하는 코드 작성
}

 

 

🛒 Intersection Observer API

Intersection Observer API는 요소가 뷰포트에 들어가는 것을 감지하고 액션을 취하도록 해주는 API이다.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
			// 뷰포트 영역에 들어왔을 때 조건문이 호출된다.
    }
  });
});

observer.observe(이미지요소);

해당 방식을 사용하는게 위의 3가지 이벤트리스너를 사용하는 것보다 성능상 우위에 있다.

 

 

🚩 loading 속성 사용

최신 브라우저에서는 loading 속성이 추가되었다. loading="lazy" 를 추가하면 간단하게 레이지 로딩을 적용할 수 있다. img 또는 iframe 태그에 사용가능하다.

<img src="주소" loading="lazy">

 

 

⚽  주의사항

레이지 로딩을 적용하기 전 주의사항이 몇가지 존재한다.

 

1️⃣ 컨텐츠 로드 속도 증가

사용자가 페이지를 빠르게 스크롤하는 경우 미디어가 로딩될때까지 기다리게 되는 경우가 발생할 수 있다.

 

Observer API를 사용해서 뷰포트 감지 영역을 확대하는 경우 이 문제를 일부 해결할 수 있다. 실제 요소가 뷰포트에 포함되지 않더라도 가까줘지는 경우에 미리 로드를 시작하여 사용자가 기다리는 시간을 줄일 수 있다.

💡 결국 이 방법도 차선책이지 완벽한 해결방법은 아니다.

 

 

2️⃣ 레이아웃 시프트

미디어를 나중에 로드하는 경우 미디어가 위치해야할 공간이 비게된다. 로드되는 동안 레이아웃 시프트 현상이 발생할 수 있게 된다.

 

해결방법으로는 미디어가 로드 될 사이즈를 미리 측정하여 공간을 미리할당 해두면 이 문제를 해결할 수 있다.

 

하지만 사이즈를 미리 알 수 없는 경우에는 할당을 할 수 없기 때문에 이 방법은 미리 사이즈를 알 수 있는 경우에 한해서만 적용이 가능하다.

 

미리 사이즈를 알 수 없는 경우에는 스니퍼를 사용하거나, 대략적인 사이즈의 공간을 예측하여 할당하는 방법으로 대체할 수 있다.

 

 

3️⃣ 과도한 사용

컨텐츠가 적은 페이지에 사용하는 경우 사용자에게 스크롤시마다 버퍼시간이 더 늘어나게 된다.

 

컨텐츠가 적은 경우에는 레이징로드를 사용하지 않고 한번에 불러오는것이 전체 페이지를 탐색할때의 버퍼시간을 더 줄일 수 있다.

 

그리고 첫 뷰포트에 포함될 가능성이 높은 미디어의 경우에는 레이징 로드를 사용하지 않아야한다. 만약 적용한 경우 미디어를 제외하고 로드가 완료된 후 추가적인 로딩 시간이 걸리게 된다.