Home-theater-designers
오늘날 빠르게 변화하는 디지털 세계에서는 고성능 웹사이트를 보유하는 것이 필수적입니다. 이에 대한 중요한 측면 중 하나는 이미지를 효율적으로 로드하는 것입니다. 사용자는 원활하고 빠른 탐색 경험을 기대하며, 이 문서에서는 이를 달성하는 방법을 보여줍니다.
MUO 오늘의 영상 콘텐츠를 계속하려면 스크롤하세요.
지연 로딩 이미지의 개념을 살펴보고 Intersection Observer API와 함께 HTML 및 JavaScript를 사용하여 이를 구현하는 방법을 알아봅니다.
BIOS 없이 전용 비디오 램을 늘리는 방법
지연 로딩이란 무엇입니까?
지연 로딩은 필요할 때까지 이미지와 같은 요소의 로딩을 지연시킵니다. 페이지가 로드될 때 모든 이미지를 로드하는 대신 지연 로드는 현재 표시되거나 사용자의 보기 영역 근처에 있는 이미지만 로드합니다. 웹사이트 성능이 향상되면 초기 로드 시간이 줄어들고 대역폭이 절약됩니다.
지연 로딩을 사용하는 이유는 무엇입니까?
웹 사이트에서 이미지 지연 로딩을 사용하는 데에는 다음과 같은 몇 가지 이유가 있습니다.
- 더 빠른 초기 페이지 로드 : 레이지 로딩은 모든 이미지가 한꺼번에 로딩되는 것을 방지하여 초기 페이지 로딩 시간을 줄여줍니다. 사용자는 사이트와 더 빨리 상호작용을 시작할 수 있어 더 나은 사용자 경험을 얻을 수 있습니다.
- 향상된 페이지 응답성 : 사용자가 스크롤할 때 이미지를 로드함으로써 웹 사이트는 반응성과 유동성을 유지하므로 모든 콘텐츠가 로드될 때까지 기다릴 필요 없이 원활한 스크롤과 탐색이 보장됩니다.
- 대역폭 절감 : 지연 로딩은 대역폭을 절약하므로 모바일 사용자와 느린 인터넷 연결을 사용하는 사용자에게 이상적입니다. 이것은 할 수 있다 웹사이트의 데이터 소비를 줄이세요 , 사용자에게 이익이 됩니다.
- SEO 혜택 : Google과 같은 검색 엔진 페이지 속도를 순위 요소로 고려하세요. 지연 로딩 가능 사이트의 SEO 성능에 긍정적인 영향을 미칩니다 로딩 시간을 개선하여
이제 지연 로딩이 왜 유익한지 이해했으므로 이를 구현하는 방법을 살펴보겠습니다.
지연 로딩 구현: HTML 마크업
시작하려면 다음을 포함하도록 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에서 웹 페이지 요소의 로딩 동작을 제어하는 데 사용됩니다. 설정할 때 로딩='게으른' 에 태그를 사용하면 필요할 때까지 리소스 로드를 연기하도록 브라우저에 지시합니다.
현재 페이지는 다음과 같습니다.
지연 로딩 구현: JavaScript 구현
지연 로딩을 한 단계 더 발전시키려면 Intersection Observer API를 사용하세요. 이 API를 사용하면 요소가 뷰포트에 들어오거나 나가는 시점을 볼 수 있습니다.
지연 로딩 이미지에 Intersection Observer를 사용하는 이유는 간단합니다. 페이지가 로드되면 낮은 품질의 이미지를 가져옵니다.
그런 다음 이 이미지가 뷰포트 내에 표시되면 JavaScript는 이를 더 높은 품질의 버전으로 교체합니다. 이를 실제로 적용하려면 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"]');
그 후에는 교차로 관찰자 물체.
const observer = new 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로 지연 로딩을 구현했습니다.
지연 로딩 고려 사항
지연 로딩을 통합할 때 다음 측면을 고려하는 것이 중요합니다.
- 접근성 : 접근성을 보장하려면 다음과 같은 이미지에 대체 텍스트를 제공하세요. 모든 것 기인하다. 이 정보는 화면 판독기의 신뢰 지점 역할을 합니다.
- 브라우저 호환성 : 지연 로딩을 구현하기 전에 다른 브라우저와의 호환성을 확인하십시오. 모든 브라우저가 이 기능을 지원하는 것은 아닙니다. 어떤 경우에는 특히 오래된 브라우저의 경우 폴리필을 포함하는 것이 필수적일 수 있습니다. 같은 도구 사용해도 되나요 브라우저 호환성을 평가하는 데 유용한 리소스입니다.
- 테스트 : 다양한 장치 및 화면 크기에 걸친 지연 로딩 구현에 대한 포괄적인 테스트가 가장 중요합니다.
웹사이트 속도 및 사용자 경험 향상
웹 사이트의 이미지에 대한 지연 로딩을 통합하면 사이트 속도를 높이고 사용자 경험을 향상시킬 수 있습니다. 더 빠른 로딩 시간과 더 부드러운 탐색 경험은 사용자가 원하는 것이며 이 기술은 동일한 것을 제공합니다.
또한 더 나은 SEO를 즐기고 대역폭 사용량을 절약할 수 있습니다. 그렇다면 왜 기다리나요? 지금 바로 이 간단하면서도 강력한 방법으로 웹사이트 최적화를 시작해 보세요.