하이브리드 지연 로딩: 네이티브 지연 로딩으로의 점진적 마이그레이션

지난 몇 주 동안, 앞으로 몇 달 안에 Chromium 75에 제공될 네이티브 지연 로딩에 대해 듣거나 읽었을 것입니다.

"예, 좋은 소식입니다. 하지만 모든 브라우저가 이를 지원할 때까지 기다려야 합니다."

이것이 가장 먼저 마음을 스쳐간 것이라면 계속 읽으십시오. 나는 당신을 반대로 설득하려고 노력할 것입니다.

네이티브 지연 로딩과 좋은 자바스크립트 기반 로딩을 비교하는 것으로 시작하겠습니다.

네이티브 대 JavaScript 기반 지연 로딩

레이지 로딩은 스크롤 없이 볼 수 있는 콘텐츠의 로딩을 지연시켜 스크롤 없이 볼 수 있는 이미지와 iframe(때로는 비디오)의 렌더링 속도를 최대화하여 웹사이트 또는 웹 애플리케이션의 성능을 향상시키는 방법입니다.

JavaScript 기반 지연 로딩

이미지 또는 iframe을 지연 로드하기 위해 적절한 src 속성을 유사한 데이터 속성인 data-src 로 교체하여 마크업한 다음 JavaScript 솔루션에 의존하여 이미지/iframe이 가져올 때 감지하는 것이 매우 일반적인 방법입니다. (일반적으로 사용자가 아래로 스크롤했기 때문에) 웹사이트의 보이는 부분에 가깝게 데이터 속성을 적절한 속성으로 복사한 다음 콘텐츠의 지연 로드를 트리거합니다.

 <img data-src="turtle.jpg" alt="Lazy turtle" class="lazy">

네이티브 지연 로딩

기본 지연 로딩 사양(아직 개발 중)에 따르면 기본 지연 로딩 기능을 사용하여 이미지 또는 iframe을 지연 로드하려면 관련 태그에 loading=lazy 속성을 추가하기만 하면 됩니다.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

Addy Osmani는 "Native Image Lazy-Loading For Web!"이라는 기사에서 이 주제에 대해 광범위하게 썼습니다. 그는 Google Chrome 팀이 이미 이 기능을 개발 중이며 Chrome 75에 제공할 계획이라고 말했습니다.

Opera 및 Microsoft Edge와 같은 다른 Chromium 기반 브라우저도 Chromium 75 기반의 첫 번째 업데이트에서 동일한 기능을 얻음으로써 이 개발의 이점을 얻을 것입니다.

기본 지연 로딩 시작하기

웹사이트의 이미지가 페이지 방문 시 지연 로딩 없이 한꺼번에 다운로드되는 경우 HTML 속성을 추가하는 것처럼 쉽게 웹사이트에서 네이티브 지연 로딩을 활성화할 수 있습니다(지원되는 경우). loading 속성은 즉시 로드해야 하는 중요한 이미지와 사용자가 아래로 스크롤할 때 느리게 다운로드할 수 있는 이미지를 브라우저에 알려줍니다. 동일한 속성을 iframe에 적용할 수 있습니다.

특정 이미지가 중요하다는 것을 브라우저에 알리고 가능한 한 빨리 로드할 수 있도록 하려면 img 태그에 loading="eager" 속성을 추가해야 합니다. 가장 좋은 방법은 기본 이미지에 대해 이 작업을 수행하는 것입니다. 일반적으로 스크롤 없이 볼 수 있는 부분에 표시되는 이미지에 대해 수행합니다.

 <img src="rabbit.jpg" alt="Fast rabbit" loading="eager">

이미지를 느리게 다운로드해야 한다고 브라우저에 알리려면 loading="lazy" 속성을 추가하기만 하면 됩니다. 이는 2차 이미지에만 수행하는 경우에만 모범 사례입니다. 일반적으로 해당 이미지는 스크롤 없이 볼 수 있는 부분에 표시됩니다.

 <img src="turtle.jpg" alt="Lazy turtle" loading="lazy">

이미지와 iframe에 loading 속성을 추가하기만 하면 웹사이트에서 네이티브 지연 로딩을 점진적 향상으로 사용할 수 있습니다. 귀하의 웹 사이트는 대부분의 최신 브라우저에서 사용자에게 지원이 제공됨에 따라 점차적으로 이점을 얻을 것입니다.

이것은 현재 웹 사이트에서 어떤 종류의 지연 로딩도 사용하지 않는 경우에 사용하는 가장 좋은 방법이지만, JavaScript 기반 지연 로딩 솔루션을 이미 구현했다면 네이티브 지연 로딩으로 점진적으로 전환하면서 유지하고 싶을 수도 있습니다.

이상적인 솔루션은 네이티브 지연 로딩을 즉시 사용하기 시작하고 폴리필을 사용하여 모든 브라우저에서 작동하도록 하는 것입니다. 불행히도 네이티브 지연 로딩은 JavaScript로 폴리필할 수 있는 기능이 아닙니다.

폴리필 사용 불가

새로운 브라우저 기술이 단일 브라우저에 출시되면 오픈 소스 커뮤니티는 일반적으로 나머지 브라우저에 동일한 기술을 제공하기 위해 JavaScript 폴리필을 출시합니다. 예를 들어 IntersectionObserver 폴리필은 JavaScript 및 DOM 요소를 사용하여 Element.getBoundingClientRect() 를 조정하여 기본 API의 동작을 재현합니다.

그러나 기본 지연 로딩의 경우는 다릅니다. 왜냐하면 loading="lazy" 에 대한 JavaScript 폴리필은 브라우저가 이미지 또는 iframe의 마크업에서 URL을 찾는 즉시 콘텐츠를 로드 하지 못하도록 해야 하기 때문입니다. JavaScript는 페이지 렌더링의 이 초기 단계를 제어할 수 없으므로 기본 지연 로드를 폴리필할 수 없습니다.

하이브리드 지연 로딩

점진적인 향상으로만 네이티브 지연 로딩을 사용하는 데 만족하지 않거나 JavaScript 기반 지연 로딩을 이미 구현했으며 덜 현대적인 브라우저에서 이 기능을 잃고 싶지 않지만(여전히 브라우저에서 네이티브 지연 로딩을 활성화하려는 경우) 지원) 다른 솔루션이 필요합니다. 소개: 하이브리드 지연 로딩.

하이브리드 지연 로딩은 지원하는 브라우저에서 네이티브 지연 로딩을 사용하는 기술입니다. 그렇지 않으면 JavaScript에 의존하여 지연 로딩을 처리합니다.

"

하이브리드 지연 로딩을 수행하려면 실제 속성 대신 data 속성을 사용하여 지연 콘텐츠를 마크업하고(예: JavaScript 기반 지연 로딩) loading="lazy" 속성을 추가해야 합니다.

 <img data-src="turtle.jpg" loading="lazy" alt="Lazy turtle">

그런 다음 일부 JavaScript가 필요합니다. 먼저 브라우저에서 네이티브 지연 로딩을 지원하는지 여부를 감지 해야 합니다. 그런 다음 loading="lazy" 속성이 있는 모든 요소에 대해 다음 중 하나를 수행합니다.

• 기본 지연 로딩이 지원되는 경우 data-src 속성 값을 src 속성에 복사합니다.
• 지원되지 않는 경우 요소가 뷰포트에 들어갈 때 이를 수행하도록 JavaScript 지연 로딩 스크립트 또는 플러그인을 초기화하십시오.

이러한 작업을 스스로 수행하는 데 필요한 JavaScript 코드를 작성하는 것은 그리 어렵지 않습니다. 다음 조건에서 기본 지연 로딩이 지원되는지 감지할 수 있습니다.

 if ('loading' in HTMLImageElement.prototype)

그렇다면 data-src 에서 src 속성 값을 복사하면 됩니다. 그렇지 않은 경우 선택한 지연 로딩 스크립트를 초기화하십시오.

다음은 이를 수행하는 코드 스니펫입니다.

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <script> (function() { if ("loading" in HTMLImageElement.prototype) { var lazyEls = document.querySelectorAll("[loading=lazy]"); lazyEls.forEach(function(lazyEl) { lazyEl.setAttribute( "src", lazyEl.getAttribute("data-src") ); }); } else { // Dynamically include a lazy loading library of your choice // Here including vanilla-lazyload var script = document.createElement("script"); script.async = true; script.src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"; window.lazyLoadOptions = { elements_selector: "[loading=lazy]" //eventually more options here }; document.body.appendChild(script); } })(); </script>

이 라이브 데모에서 위의 코드를 찾아 테스트할 수 있습니다.

그래도 이것은 매우 기본적인 스크립트이며 반응형 이미지(예: srcset 및 sizes 속성 또는 picture 및 source 태그)를 얻기 위해 추가 속성이나 태그를 사용하는 경우 상황이 복잡해질 수 있습니다.

약간의 타사 도움말

지난 4년 동안 저는 " vanilla-lazyload "라는 오픈 소스 지연 로드 스크립트를 유지 관리해 왔으며 Addy Osmani가 네이티브 지연 로드에 대해 쓴 후 며칠 만에 커뮤니티에서 내 스크립트를 사용할 수 있는지 묻는 반응을 보였습니다. 폴리필 역할을 합니다.

이전에 설명했듯이 네이티브 지연 로딩 기능을 위한 폴리필을 만들 수는 없지만 개발자가 자바스크립트 코드를 작성할 필요 없이 네이티브 지연 로딩으로의 전환을 더 쉽게 시작할 수 있는 솔루션을 생각했습니다. 나는 전에 언급했다.

vanilla-lazyload 버전 12부터 use_native 옵션을 true 로 설정하여 하이브리드 지연 로딩을 활성화할 수 있습니다. 스크립트는 2.0kB gzipped이며 이미 GitHub, npm 및 jsDelivr에서 사용할 수 있습니다.

• GitHub에서 vanilla-lazyload 알아보기

시민

Chrome Canary 또는 Microsoft Edge Insider( dev channel )를 다운로드한 다음 "지연 이미지 로딩 활성화" 및 "지연 프레임 로딩 활성화" 플래그를 활성화하여 오늘 네이티브 지연 로딩을 가지고 놀 수 있습니다. 이 플래그를 활성화하려면 브라우저의 URL 필드에 about:flags 를 입력하고 검색 상자에서 "lazy"를 검색하십시오.

네이티브 지연 로딩 데모

개발자 도구에서 네이티브 지연 로딩이 어떻게 작동하는지 분석하기 위해 다음 데모로 플레이를 시작할 수 있습니다. 여기에서는 JavaScript가 한 줄도 사용되지 않습니다 . 예, 전체 일반 기본 지연 로딩입니다.

• 네이티브 지연 로딩 데모 테스트

예상 사항: 모든 이미지를 한 번에 가져오지만 HTTP 응답은 다릅니다. 응답 코드 200 이 있는 이미지는 간절히 로드된 이미지이고 응답 코드 206 이 있는 이미지는 이미지에 대한 초기 정보를 얻기 위해 부분적으로만 가져옵니다. 그런 다음 아래로 스크롤할 때 200 응답 코드와 함께 해당 이미지를 완전히 가져옵니다.

하이브리드 지연 로딩 데모

하이브리드 지연 로딩이 작동하는 방식을 분석하기 위해 다음 데모부터 시작할 수 있습니다. 여기에서는 [email protected] [email protected]이 사용되고 use_native 옵션이 true 로 설정됩니다.

• 하이브리드 지연 로딩 데모 테스트

예상 사항: 다른 브라우저에서 데모를 시도하여 작동 방식을 확인하십시오. 네이티브 지연 로딩을 지원하는 브라우저에서 동작은 네이티브 지연 로딩 데모와 동일합니다. 기본 지연 로딩을 지원하지 않는 브라우저에서는 아래로 스크롤하면 이미지가 다운로드됩니다.

vanilla-lazyload 는 내부적으로 IntersectionObserver API를 사용하므로 Internet Explorer 및 Safari의 최신 버전보다 낮은 버전에서 이를 폴리필해야 합니다. 하지만 polyfill이 제공되지 않으면 큰 문제가 되지 않습니다. 이 경우 vanilla-lazyload 가 모든 이미지를 한 번에 다운로드하기 때문입니다.

참고 : Vanilla vanilla-lazyload 의 readme 파일의 "폴리필을 할 것인지 폴리필을 할 것인지" 장에서 더 많은 것을 읽으십시오 .

웹사이트에서 하이브리드 지연 로딩 시도

네이티브 지연 로딩이 일부 브라우저에 곧 제공될 예정이므로 오늘 하이브리드 지연 로딩을 사용하여 기회를 주지 않겠습니까? 수행해야 할 작업은 다음과 같습니다.

HTML 마크업

가장 간단한 이미지 마크업은 src 및 alt 의 두 가지 속성으로 만들어집니다.

스크롤 없이 볼 수 있는 이미지의 경우 src 속성을 그대로 두고 loading="eager" 속성을 추가해야 합니다.

 <img src="important.jpg" loading="eager" alt="Important image">

스크롤 없이 볼 수 있는 이미지의 경우 src 속성을 데이터 속성 data-src 로 바꾸고 loading="lazy" 속성을 추가해야 합니다.

 <img data-src="lazy.jpg" loading="lazy" alt="A lazy image">

반응형 이미지를 사용하려면 srcset 및 sizes 속성을 사용하여 동일한 작업을 수행합니다.

 <img alt="A lazy image" loading="lazy" data-src="lazy.jpg">

picture 태그를 사용하려는 경우 source 태그에서도 srcset , sizes 및 src 를 변경하십시오.

 <picture> <source media="(min-width: 1200px)"> <source media="(min-width: 800px)"> <img alt="A lazy image" loading="lazy" data-src="lazy.jpg"> </picture>

picture 태그를 사용하여 이미지의 WebP 형식을 선택적으로 로드할 수도 있습니다.

참고 : vanilla-lazyload 의 더 많은 사용법을 알고 싶다면 readme 파일의 "시작하기" HTML 섹션을 읽으십시오.

자바스크립트 코드

우선, 귀하의 웹사이트에 vanilla-lazyload 를 포함해야 합니다.

jsDelivr과 같은 CDN에서 로드할 수 있습니다.

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

또는 npm을 사용하여 설치할 수 있습니다.

 npm install vanilla-lazyload@12

자동 초기화와 함께 async 스크립트를 사용할 수도 있습니다. type="module" 을 사용하여 ES 모듈로 로드하거나 RequireJS를 사용하여 AMD로 로드하십시오. 추가 정보 파일의 "시작하기" 스크립트 섹션에서 vanilla-lazyload 를 포함하고 사용하는 더 많은 방법을 찾으십시오.

그런 다음 웹사이트/웹 애플리케이션의 JavaScript 코드에 다음을 포함합니다.

 var pageLazyLoad = new LazyLoad({ elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading });

참고 : 스크립트에는 vanilla-lazyload 의 동작 을 사용자 정의하는 데 사용할 수 있는 다른 설정이 많이 있습니다 . 예를 들어 요소 로드를 시작하는 스크롤 영역의 거리를 늘리거나 요소가 잠시 동안 뷰포트에 남아 있는 경우에만 요소를 로드합니다. 주어진 시간. 추가 정보 파일의 API 섹션에서 더 많은 설정을 찾으십시오.

모두 함께, async 스크립트 사용

이 모든 것을 통합하고 async 스크립트를 사용하여 성능을 최대화하려면 다음 HTML 및 JavaScript 코드를 참조하십시오.

 <!-- In-viewport images should be loaded normally, or eagerly --> <img src="important.jpg" loading="eager" alt="Important image"> <!-- Let's lazy-load the rest of these images --> <img data-src="lazy1.jpg" loading="lazy" alt="Lazy image 1"> <img data-src="lazy2.jpg" loading="lazy" alt="Lazy image 2"> <img data-src="lazy3.jpg" loading="lazy" alt="Lazy image 3"> <!-- Set the options for the global instance of vanilla-lazyload --> <script> window.lazyLoadOptions = { elements_selector: "[loading=lazy]", use_native: true // ← enables hybrid lazy loading }; </script> <!-- Include vanilla lazyload 12 through an async script --> <script async src="https://cdn.jsdelivr.net/npm/[email protected]/dist/lazyload.min.js"></script>

그게 다야! 이 매우 간단하고 쉬운 단계를 통해 웹사이트에서 하이브리드 지연 로딩을 활성화할 수 있습니다!

중요한 모범 사례

• 스크롤 없이 볼 수 있는 부분에 표시될 것으로 알고 있는 이미지에만 지연 로드를 적용합니다. 성능을 최대화하려면 스크롤 없이 볼 수 있는 부분을 빠르게 로드하세요. 페이지의 모든 이미지에 지연 로드를 적용하면 렌더링 성능이 느려집니다.
• CSS를 사용하여 이미지가 로드되기 전에 이미지를 위한 공간을 확보하십시오. 그렇게 하면 아래의 나머지 콘텐츠를 푸시합니다. 그렇게 하지 않으면 많은 수의 이미지가 스크롤 없이 볼 수 있는 부분에 먼저 배치되어 해당 이미지에 대한 즉각적인 다운로드가 시작됩니다. 그렇게 하기 위해 CSS 트릭이 필요하면 vanilla-lazyload readme의 팁과 트릭 섹션에서 찾을 수 있습니다.

장점과 단점

마무리

기본 지연 로딩이 브라우저에 제공된다는 사실이 매우 기쁩니다. 모든 브라우저 공급업체에서 이를 구현하기를 기다릴 수 없습니다!

그 동안에는 점진적 향상을 위해 HTML 마크업을 강화하고 지원되는 경우에만 네이티브 지연 로딩을 받도록 선택하거나, 하이브리드 지연 로딩으로 이동하여 네이티브 지연 로딩이 시작될 때까지 네이티브 및 JavaScript 기반 지연 로딩을 모두 얻을 수 있습니다. 대부분의 브라우저에서 지원됩니다.

시도 해봐! GitHub에서 vanilla-lazyload 에 별표 표시/시청하는 것을 잊지 말고 댓글 섹션에 귀하의 생각을 알려주십시오.

SmashingMag에 대한 추가 정보:

• Now You See Me: IntersectionObserver를 사용하여 지연, 지연 로드 및 조치하는 방법
• ConditionerJS로 JavaScript 모듈을 지연 로드하기
• 2019년 프런트 엔드 성능 체크리스트(PDF, Apple Pages, MS Word)
• 웹사이트 성능 개선이 지구를 구하는 데 도움이 되는 방법