지연 로딩 ( Lazy Loading )

Lazy Loading이란?

Lazy Loading은 웹 페이지에서 화면에 나타나기 전까지 이미지나 비디오 같은 리소스 로딩을 지연시키는 기술입니다. 이 기법은 처음부터 페이지의 모든 리소스를 불러오는 대신 사용자가 스크롤할 때 필요한 리소스만 불러오기 때문에 페이지 로딩 속도가 빨라지고, 사용자 경험이 개선됩니다.

 

Lazy Loading의 장점

1. 빠른 페이지 로딩: 초기 로딩 시 필요한 리소스만 불러오기 때문에 페이지 로딩 속도가 빨라집니다.
2. 데이터 절감: 사용자가 보지 않는 리소스는 로딩되지 않기 때문에 불필요한 데이터 사용을 줄일 수 있습니다.
3. 사용자 경험 개선: 빠른 페이지 로딩은 이탈률을 줄이고 사용자 경험을 향상시킵니다.

 

구현 방법

1. HTML 속성 활용

HTML5의 loading="lazy" 속성으로 간단하게 이미지나 iframe에 Lazy Loading을 적용할 수 있습니다.

<img src="example.jpg" alt="Example" loading="lazy">
<iframe src="https://www.example.com" loading="lazy"></iframe>

2. JavaScript로 구현

Intersection Observer API를 사용하여 지연 로딩을 더욱 세밀하게 제어할 수 있습니다.

const images = document.querySelectorAll("img.lazy");

const lazyLoad = (entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // data-src에 실제 이미지 경로 저장
      img.classList.remove("lazy");
      observer.unobserve(img);
    }
  });
};

const observer = new IntersectionObserver(lazyLoad);

images.forEach(img => {
  observer.observe(img);
});

 

SEO와 Lazy Loading

Lazy Loading은 페이지 로딩 속도를 개선하기 때문에 SEO 성능을 높이는 데 도움이 됩니다. 그러나 모든 콘텐츠를 지연 로딩할 경우 검색엔진 최적화(SEO)에 부정적인 영향을 미칠 수 있습니다. 검색엔진 크롤러는 화면을 스크롤하지 않기 때문에 중요한 콘텐츠가 지연 로딩되면 탐색되지 않을 수 있습니다.

따라서 SEO 관점에서 중요한 사항은 다음과 같습니다.

• 핵심 콘텐츠는 Lazy Loading 피하기: 페이지의 중요한 텍스트 콘텐츠나 주요 키워드가 포함된 요소는 일반 로딩 방식을 사용해야 합니다. 예를 들어, 헤더나 메인 콘텐츠는 반드시 즉시 로딩하여 검색엔진이 빠르게 탐색할 수 있도록 해야 합니다.
• 이미지 Alt 태그 사용: 지연 로딩한 이미지에도 Alt 태그를 포함하여 검색엔진이 이미지의 의미를 이해할 수 있게 돕습니다.
• Schema 및 Meta 태그 활용: 검색엔진이 페이지의 내용을 잘 이해할 수 있도록 Schema 태그나 Meta 태그를 포함하여 페이지를 최적화합니다.

 

결론

Lazy Loading은 웹 페이지의 성능을 높이기 위해 꼭 필요한 기술입니다. 다만 SEO 최적화를 위해 주요 콘텐츠는 지연 로딩하지 않는 것이 중요합니다. 이로써 페이지 속도와 SEO 성능을 모두 높일 수 있습니다.