웹사이트 성능 최적화를 위한 Lazy Loading 전략

웹사이트의 성능을 높이는 가장 중요한 요소 중 하나는 로딩 속도 최적화입니다. 특히 이미지, 동영상, 아이프레임 등의 무거운 리소스를 Lazy Loading(지연 로딩) 방식으로 로드하면, 웹페이지 초기 로딩 속도를 대폭 개선할 수 있습니다.

이 글에서는 Lazy Loading의 개념, 필요성, 구현 방법, SEO 및 접근성 고려사항, 그리고 성능 최적화 전략을 자세히 설명합니다.

---

1. Lazy Loading이란?

Lazy Loading의 개념

**Lazy Loading(지연 로딩)**은 웹페이지가 처음 로드될 때 모든 콘텐츠를 한 번에 불러오는 것이 아니라, 사용자가 필요한 순간에 필요한 리소스만 불러오는 방식입니다.

❗ 예제:
사용자가 페이지를 스크롤할 때 화면에 보이는 이미지나 동영상만 로드하고, 보이지 않는 콘텐츠는 나중에 로드함.

Lazy Loading이 필요한 이유

1. 웹페이지 속도 향상 → 초기 로딩 시 불필요한 리소스를 줄여 속도를 개선.
2. 서버 부하 감소 → 한 번에 모든 리소스를 불러오지 않아 서버 부담 완화.
3. 사용자 경험(UX) 개선 → 페이지가 빨리 표시되므로 방문자가 이탈하지 않음.
4. SEO 최적화 → 페이지 속도가 빠르면 검색 엔진 랭킹(SEO) 향상.

---

2. Lazy Loading 구현 방법

1) HTML의 loading="lazy" 속성 사용 (가장 간단한 방법)

HTML5에서는 기본적으로 <img>와 <iframe> 요소에 loading="lazy" 속성을 추가하면 브라우저에서 자동으로 Lazy Loading을 처리해줍니다.

html

<img src="image.jpg" alt="예제 이미지" loading="lazy">

html

<iframe src="https://www.youtube.com/embed/example" loading="lazy"></iframe>

 

✅ 장점

• 가장 간단한 방법 (추가적인 JavaScript 필요 없음).
• 최신 브라우저에서 기본 지원 (Chrome, Firefox, Edge 등).
• SEO 친화적 (검색 엔진이 Lazy Loading을 인식할 수 있음).

❌ 단점

• 일부 구형 브라우저(IE, Safari)에서 지원하지 않음.

---

2) JavaScript를 활용한 Lazy Loading (Intersection Observer API 사용)

구형 브라우저에서도 지원 가능하며, 더욱 정교한 제어가 가능한 방법입니다.

html

<img class="lazyload" data-src="image.jpg" alt="Lazy Loaded Image">

javascript

document.addEventListener("DOMContentLoaded", function () {
    const lazyImages = document.querySelectorAll("img.lazyload");

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                img.classList.remove("lazyload");
                observer.unobserve(img);
            }
        });
    });

    lazyImages.forEach(img => observer.observe(img));
});

 

✅ 장점

• 세밀한 제어 가능 (어떤 요소를 언제 로드할지 직접 결정 가능).
• 구형 브라우저 지원 가능 (폴리필 추가 시).
• 모든 미디어 요소 적용 가능 (이미지, 동영상, 아이프레임 등).

❌ 단점

• JavaScript가 필요하므로 JS 비활성화 환경에서는 동작하지 않음.
• 초기 로드 시 data-src 속성 사용 필요.

---

3) CSS를 활용한 Lazy Loading (배경 이미지 적용 시)

CSS만으로 배경 이미지를 Lazy Loading하려면 JavaScript와 함께 사용해야 합니다.

html

<div class="lazy-background" data-bg="background.jpg"></div>

css

.lazy-background {
    background: url("placeholder.jpg") no-repeat center;
    background-size: cover;
    width: 100%;
    height: 300px;
}

javascript

document.addEventListener("DOMContentLoaded", function () {
    const lazyBackgrounds = document.querySelectorAll(".lazy-background");

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.backgroundImage = `url(${entry.target.dataset.bg})`;
                observer.unobserve(entry.target);
            }
        });
    });

    lazyBackgrounds.forEach(bg => observer.observe(bg));
});

 

✅ 장점

• 배경 이미지에도 Lazy Loading 적용 가능.
• 페이지 속도 최적화 가능.

❌ 단점

• JavaScript가 필요함.
• HTML 구조가 다소 복잡해질 수 있음.

---

3. Lazy Loading 성능 최적화 전략

1) 이미지 크기 최적화

• 적절한 해상도의 이미지를 제공하여 불필요한 데이터 전송 방지.
• srcset과 sizes 속성을 활용하여 반응형 이미지 제공.

html

<img src="small.jpg"
     srcset="medium.jpg 600w, large.jpg 1200w"
     sizes="(max-width: 600px) 600px, 1200px"
     loading="lazy"
     alt="반응형 이미지">

2) WebP 포맷 사용

• WebP는 PNG/JPG보다 최대 50% 더 적은 용량으로 고품질 유지 가능.
• 모든 브라우저에서 지원되지 않으므로 fallback 이미지 제공.

html

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="웹P 지원 안 될 경우 JPG 로드">
</picture>

3) Lazy Loading 적용 시기 조절

• threshold 값을 조정하여 화면에 나타나기 전에 미리 로드할 수 있도록 설정.

javascript

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
}, { threshold: 0.5 }); // 요소가 50% 보일 때 로드

4) CDN(Content Delivery Network) 활용

• CDN을 사용하면 지리적으로 가까운 서버에서 콘텐츠를 제공하여 속도를 더욱 개선할 수 있음.

---

4. SEO 및 접근성 고려 사항

1) 검색 엔진 크롤러와 Lazy Loading

• loading="lazy" 속성은 검색 엔진이 이해할 수 있음.
• JavaScript 기반 Lazy Loading은 검색 엔진이 콘텐츠를 인덱싱하지 못할 수 있으므로, 서버 사이드 렌더링(SSR) 또는 프리렌더링을 고려해야 함.

2) 접근성(ARIA) 속성 추가

• Lazy Loading이 완료되기 전 alt 속성 유지 필수.

html

<img src="placeholder.jpg" data-src="real-image.jpg" alt="웹사이트 성능 최적화" loading="lazy">

---

결론

Lazy Loading은 웹사이트의 속도를 최적화하고, 성능을 향상시키며, 사용자 경험을 개선하는 필수적인 기법입니다.

🔹 가장 쉬운 방법 → loading="lazy" 속성 사용
🔹 유연한 방법 → JavaScript의 Intersection Observer API 활용
🔹 고급 최적화 방법 → srcset, WebP, CDN 적용

웹사이트의 성능을 극대화하기 위해 Lazy Loading을 적극 활용해 보세요! 🚀