이미지 뿐만 아니라 스크립트 및 스타일시트까지 로딩하는 Lazy Loading

10 Nov 2023

javascript

Lazy loading은 웹 페이지의 성능을 향상시키기 위한 기술로, 페이지가 로드될 때 필요한 이미지, 스크립트 및 스타일시트를 실제로 필요한 시점에 동적으로 로드하는 것을 의미합니다. 이는 초기 로딩 시간을 줄이고 페이지를 더 빠르게 표시할 수 있도록 도와줍니다. 이번 글에서는 이미지 뿐만 아니라 스크립트 및 스타일시트까지 로딩하는 Lazy loading 기법에 대해 알아보겠습니다.

이미지 Lazy Loading

이미지 Lazy loading은 사용자가 스크롤할 때 이미지를 로드하는 기술입니다. 사용자가 페이지를 스크롤하면서 이미지가 화면에 보이기 시작할 때, 그때서야 해당 이미지를 로드하는 방식입니다. 이를 통해 초기 페이지 로딩 시간을 줄이고 데이터 사용량을 절약할 수 있습니다. 대표적인 이미지 Lazy loading 라이브러리로는 “Layzr.js”와 “Lozad.js”가 있습니다.

// Layzr.js를 사용한 이미지 Lazy loading 예제
var layzr = new Layzr({
    // 로드할 이미지를 감싸는 컨테이너 지정
    selector: '.lazy',
    // 로드할 이미지의 기본 이미지 지정
    attr: 'data-src',
    // 로드할 이미지가 보이는 영역 범위 지정
    threshold: 0,
    // 로드되는 이미지를 fade 효과로 표시
    transition: 'fade',
    // 로드되는 이미지의 크기를 재조정
    retina: true
});

스크립트 및 스타일시트 Lazy Loading

이미지 뿐만 아니라 스크립트 및 스타일시트까지 Lazy loading할 수 있는 방법도 있습니다. 이를 사용하면 페이지 로딩 속도를 더욱 개선할 수 있습니다. 스크립트 및 스타일시트 Lazy loading은 대부분의 경우 JavaScript로 구현됩니다. 일부 요소가 화면에 보이기 시작하면, 해당 요소에 대한 스크립트 및 스타일시트를 동적으로 로드하는 방식입니다.

// Intersection Observer를 사용한 스크립트 및 스타일시트 Lazy loading 예제
const options = {
    root: null, // 뷰포트 기준으로 요소를 관찰
    rootMargin: '0px', // 뷰포트와 검사 대상 사이의 여백
    threshold: 1.0 // 요소의 100%가 노출되면 콜백 함수 호출
};

const handleIntersection = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 스크립트 또는 스타일시트 로드
            const script = document.createElement('script');
            script.src = 'your-script.js';
            document.body.appendChild(script);

            // 필요한 경우 스타일시트도 로드 가능
            const link = document.createElement('link');
            link.rel = 'stylesheet';
            link.href = 'your-stylesheet.css';
            document.head.appendChild(link);

            // 관찰 중지
            observer.unobserve(entry.target);
        }
    });
};

const observer = new IntersectionObserver(handleIntersection, options);

// 관찰하려는 요소 선택
const target = document.querySelector('.lazy-script-stylesheet');
observer.observe(target);

결론

이미지, 스크립트, 스타일시트까지 로딩하는 Lazy loading은 웹 페이지 성능을 향상시키는 효과적인 방법입니다. 초기 로딩 시간을 줄이고 데이터 사용량을 절약함으로써 사용자 경험을 향상시킬 수 있습니다. 이미지 Lazy loading을 위해 Layzr.js와 Lozad.js 같은 라이브러리를 사용할 수 있으며, 스크립트 및 스타일시트 Lazy loading을 위해서는 Intersection Observer API를 사용할 수 있습니다.

#WebDevelopment #LazyLoading