지금은 웹사이트의 성능이 중요한 부분으로 간주됩니다. 사용자는 빠르게 로딩되는 웹사이트를 원하며, 그들의 기기와 인터넷 속도에 상관없이 웹 콘텐츠에 쉽게 액세스하고 싶어합니다. 이를 위해 웹 개발자들은 다양한 최적화 기술을 사용해야 합니다. 하나의 효과적인 기술은 “Lazy Loading”입니다.
Lazy Loading이란?
Lazy Loading은 웹페이지 또는 앱을 처음 로드할 때, 페이지의 일부 컨텐츠를 지연시켜 로딩하는 방식입니다. 이는 페이지에 대한 로딩 속도를 빠르게 만들어줍니다. 사용자가 페이지를 스크롤 할 때, 지연된 컨텐츠가 필요한 위치로 이동하고 즉시 로딩됩니다. 이 방식은 사용자가 페이지를 이용하는 동안 부분적으로 로딩이 이루어지므로, 사용자 경험을 크게 향상시킬 수 있습니다.
자바스크립트 Lazy Loading 구현하기
기본 이미지 로딩
일반적으로, 이미지가 브라우저에 로드될 때, 이미지 태그의 “src” 속성에 지정된 URL의 이미지를 다운로드합니다. 그러나 Lazy Loading을 구현하기 위해서는 브라우저로 로드되는 이미지의 URL을 “data-src” 속성에 저장해야 합니다. 웹 페이지가 로드될 때, “data-src” 속성에 지정된 이미지 URL은 로드되지 않으며, 대신 빈 공간이 표시됩니다.
<img class="lazy" data-src="image.jpg" alt="Image">
스크롤 이벤트로 로딩
스크롤 이벤트를 사용하여 사용자가 스크롤할 때 Lazy Loading을 작동시킵니다. 스크롤 이벤트 핸들러를 추가하여 스크롤 위치를 확인하고, Lazy Loading이 필요한 요소가 화면에 표시될 때 해당 요소를 로드합니다.
function handleScroll() {
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(image => {
const top = image.offsetTop;
const windowHeight = window.innerHeight;
if (windowHeight > top) {
image.src = image.dataset.src;
image.classList.remove('lazy');
}
});
}
window.addEventListener('scroll', handleScroll);
위의 코드에서는 Lazy Loading을 위해 “lazy” 클래스를 사용하고, 이미지 태그의 “data-src” 속성을 사용하여 지연된 이미지 URL을 저장합니다. 스크롤 이벤트를 감지하여 화면에 보이는 이미지의 “src” 속성을 해당 요소의 “data-src” 값으로 변경하고, “lazy” 클래스를 제거합니다.
Lazy Loading의 장점
- 로딩 시간 단축: 페이지의 초기 로딩 시간을 줄여 사용자가 웹사이트에 빠르게 접근할 수 있습니다.
- 대역폭 절약: 초기 로딩 시 모든 컨텐츠를 미리 로드하지 않기 때문에 대역폭을 절약할 수 있습니다.
- 사용자 경험 향상: 사용자가 스크롤 할 때 지연된 컨텐츠가 순차적으로 로드되므로, 웹사이트의 사용자 경험을 향상시킬 수 있습니다.
Lazy Loading은 웹사이트 성능 최적화를 위한 강력한 기술 중 하나입니다. 자바스크립트를 사용하여 Lazy Loading을 구현하면 사용자 경험을 향상시킬 수 있습니다. 더 나아가, 이미지 뿐만 아니라 다른 컨텐츠 요소에도 적용할 수 있다는 점을 기억해야 합니다.