기술의 급속한 발전이 특징인 현대에는 사용자의 기대치를 충족하기 위해 웹사이트가 뛰어난 성능을 갖추는 것이 필수적이 되었습니다. 최적의 온라인 경험을 제공하는 데 기여하는 다양한 요소 중 시각적 콘텐츠의 효율적인 로딩은 매우 중요한 역할을 합니다. 이러한 맥락에서 원활하고 신속한 탐색을 보장하기 위해 웹사이트의 이미지 표시를 최적화하는 전략을 살펴봅니다.
지연 로딩 이미지의 복잡성에 대해 알아보고, 이 기능을 구현하기 위해 Intersection Observer API와 함께 HTML 및 JavaScript를 효과적으로 활용하는 방법에 대해 알아봅니다.
지연 로딩이란 무엇인가요?
지연 로딩 전략을 구현하면 시각적 구성 요소, 특히 이미지의 렌더링이 디스플레이에 필요할 때까지 연기됩니다. 이 기술은 웹 페이지가 도착할 때 모든 이미지를 가져오는 대신 현재 시청자의 주변 또는 관찰 가능한 범위 내에 있는 요소만 로드하도록 제한합니다. 웹 페이지 성능을 최적화하여 초기 로딩에 필요한 시간을 줄이고 네트워크 데이터 용량을 절약합니다.
지연 로딩을 사용하는 이유는 무엇인가요?
이미지에 지연 로딩을 구현할 때의 주요 이점 중 하나는 페이지 로드 시간을 줄이고 전반적인 사이트 성능을 개선하여 사용자 경험을 향상시키는 것입니다. 초기 페이지 로드 시 이미지를 한꺼번에 로드하지 않고 필요할 때만 로드함으로써 사용자는 더 빠른 페이지 로드 속도와 원활한 탐색 환경의 이점을 누릴 수 있습니다. 또한 지연 로딩은 대역폭을 절약하고 서버 비용을 절감하는 데 도움이 되므로 사용자와 기업 모두에게 이익이 되는 환경 친화적인 솔루션입니다.
지연 로딩은 사용자가 명시적으로 요청할 때까지 여러 이미지의 로딩을 지연하여 웹 페이지 성능을 최적화합니다. 이 접근 방식은 초기 페이지 로딩 속도를 향상시키고 방문자가 웹사이트에 더 신속하게 액세스하고 상호 작용할 수 있도록 하여 전반적인 사용자 만족도를 향상시킵니다.
필요에 따라 이미지를 동적으로 로드하여 웹사이트의 응답성을 향상시켜 스크롤 중 지연이나 지연 없이 원활한 사용자 경험을 제공합니다. 이 접근 방식은 전체 페이지를 다시 로드할 필요가 없으며 고해상도 이미지를 처리할 때에도 웹사이트의 성능을 유지합니다.
지연 로딩은 대역폭을 크게 절약할 수 있으므로 모바일 장치 또는 느린 인터넷 연결을 통해 웹사이트에 액세스하는 개인에게 특히 유리합니다. 이 접근 방식은 웹사이트의 데이터 소비를 줄임으로써 사용자뿐만 아니라 전반적인 성능을 최적화하는 데도 도움이 됩니다.
지연 로딩은 특히 웹사이트 로딩 시간을 개선하는 측면에서 검색 엔진 최적화에 긍정적인 영향을 미치는 것으로 나타났습니다. 이는 Google과 같은 많은 검색 엔진이 페이지 속도를 중요한 순위 결정 요소로 활용하기 때문입니다. 지연 로딩 기술을 사용하면 웹사이트의 로딩 시간을 크게 개선하여 전체 검색 엔진 순위를 높일 수 있습니다.
지연 로딩의 장점에 대한 이해를 고려하여 그 구현에 대해 설명해 드리겠습니다.
지연 로딩 구현: HTML 마크업
프로세스를 시작하려면 요소 내에 “loading=’lazy'” 속성을 통합하여 HTML 마크업을 수정해야 합니다.
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
HTML에서 로딩 속성은 웹사이트 내 다양한 요소의 로딩 동작을 조절하는 수단으로 사용됩니다. 요소에 대해 로딩 속성의 값을 “지연”으로 설정하면 브라우저가 관련 리소스의 검색을 필요한 시점까지 지연하도록 지시합니다.
현재 이 페이지의 모습은 다음과 같습니다:
지연 로딩 구현 중: 자바스크립트 구현
지연 로딩을 고급으로 구현하려면 교차점 관찰자 API를 활용하세요. 이 도구를 사용하면 사용자 화면에서 요소의 진입과 퇴장을 모니터링할 수 있습니다.
웹페이지를 처음 로드할 때 이미지의 저해상도 버전을 가져와 렌더링 속도를 높이고, 사용자의 커서가 이미지의 보이는 부분과 교차할 때 필요에 따라 고품질 버전을 로드합니다.
이미지가 화면에 표시되면 자바스크립트 코드가 이를 교환하여 더 높은 품질의 버전으로 대체합니다. 이 기능을 구현하려면 HTML 구조를 약간 조정해야 합니다.
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
주요 시각적 요소는 표준 이하 버전에서 비롯되며 우수한 품질의 묘사는 보조 리소스 역할을 합니다. 결과적으로 웹 페이지는 이러한 방식으로 표시됩니다.
우선 ‘지연 로딩’ 기법을 사용하여 보다 효율적인 방식으로 로드할 사진을 선택합니다.
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
그런 다음 코드베이스 내에 IntersectionObserver 객체의 새 인스턴스를 설정합니다.
const observer = new IntersectionObserver();
입력은 뷰포트 내에서 가시성을 위해 모니터링되는 요소를 나타내는 `IntersectionObserverEntry` 객체 배열과 이러한 관찰을 추적하는 관련 `IntersectionObserver` 인스턴스로 구성됩니다.
const observer = new IntersectionObserver((lazyImages, observer) => { });
그 후, 교차점을 확인하고 해당 요소가 접촉하면 저화질 이미지를 고화질 버전으로 교체합니다.
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});
처음에는 관찰 프레임워크를 만들어 각 구성 요소를 모니터링할 수 있는 수단을 구축합니다.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
JavaScript를 활용하여 지연 로딩 기능을 성공적으로 통합했습니다.
브라우저가 동영상 태그를 지원하지 않습니다.
지연 로딩 고려 사항
웹 애플리케이션에서 지연 로딩을 효과적으로 구현하려면 다음과 같은 몇 가지 주요 요소를 고려하는 것이 중요합니다:
접근성을 높이려면 HTML에서 alt 속성을 사용하여 이미지에 대한 대체 설명을 포함하는 것이 필수적입니다. 갈대처럼 얇은 신뢰할 수 있는 소스로 알려진 이 방법을 사용하면 화면 리더가 시각 장애가 있는 사용자에게 이미지의 내용을 전달할 수 있습니다.
⭐ 브라우저 호환성: 지연 로딩을 구현하기 전에 다른 브라우저와의 호환성을 확인하십시오. 모든 브라우저가 이 기능을 지원하는 것은 아닙니다. 특히 구형 브라우저의 경우 폴리필을 포함해야 하는 경우가 있을 수 있습니다. CanIUse 과 같은 도구는 브라우저 호환성을 평가하는 데 유용한 리소스입니다.
지연 로딩 기능의 효과와 다양한 플랫폼과의 호환성을 보장하기 위해 다양한 장치와 화면 크기에서 지연 로딩 기능을 철저히 테스트하는 것이 중요합니다.
웹사이트 속도 및 사용자 경험 향상
웹사이트의 이미지에 지연 로딩을 통합하는 것은 로딩 속도를 높이고 보다 원활한 탐색 환경을 제공하여 성능을 향상시키는 효과적인 전략입니다. 이러한 접근 방식은 빠르고 원활한 탐색을 중요시하는 현대 사용자의 기대에 부합하여 최적의 만족도를 제공합니다.
실제로 이 접근 방식을 활용하면 검색 엔진 순위를 높일 수 있을 뿐만 아니라 대역폭 소비도 절약할 수 있습니다. 따라서 기회를 포착하고 간단하면서도 강력한 전략으로 사이트 최적화를 즉시 시작하는 것이 필수적입니다.