네이티브 지연 로딩 오프스크린 iframe

지연 로딩은 나중에 무언가를 로드할 수 있도록 하는 로딩 전략입니다. Gatsby, React 또는 이미지에서 이것을 알 수 있습니다. 스크롤 없이 볼 수 있는 이미지 또는 iframe은 나중에 로드할 수 있습니다.

버전 76부터 Chrome은 native lazy-loading for images 을 지원합니다. 이제 iframes에 대한 지연 로딩은 그의 게시물에서 언급한 것처럼 standard입니다.

Tldr;

이 게시물에서 네이티브 지연 로딩 iframe에 대해 읽었습니다. 작동 방식과 사용해야 하는 이유를 보여 드리겠습니다.

iframe에 지연 로딩을 사용해야 하는 이유는 무엇입니까?

타사 임베드는 매우 다양합니다. iframe을 사용하여 웹사이트에 비디오 플레이어, 소셜 미디어 게시물 또는 광고를 포함할 수 있습니다. 종종 iframe은 사용자의 뷰포트에서 스크롤 없이 볼 수 있는 부분 위에 있지 않습니다. 지연 로딩 iframe을 사용하지 않으면 브라우저가 타사 리소스를 즉시 다운로드하게 됩니다.

지연 로딩 iframe은 어떻게 작동합니까?

iframe의 기본 지연 로드는 loading 속성을 통해 사용할 수 있습니다. 세 가지 값을 정의할 수 있습니다.

lazy - 브라우저에 지연 로드를 원한다고 알립니다.

eager - 브라우저에 즉시 로드하도록 지시합니다

.

auto - 브라우저는 지연 로드 여부를 결정할 수 있습니다.

<!-- Lazy-load the iframe -->
<iframe src="https://example.com" 
        loading="lazy" 
        width="600" 
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com" 
        width="600" 
        height="400"></iframe>

<!-- or use loading="eager" to opt out of automatic 
lazy-loading in Lite Mode -->
<iframe src="https://example.com" 
        loading="eager" 
        width="600" 
        height="400"></iframe>

source
loading 속성을 사용하지 않으면 loading="eager" 와 동일한 영향을 미칩니다. 라이트 모드에서만 Chrome은 auto 값을 사용하여 iframe을 로드하는 방법을 결정합니다.

JavaScript로 만들 수도 있습니다.

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

source

iframe별 지연 로딩 동작

iframe은 이미지와 약간 다르게 작동합니다. iframe이 숨겨져 있고 다음 조건을 충족하면 Chrome에서 지연 로드하지 않습니다. 대부분의 웹사이트는 분석 또는 커뮤니케이션 목적으로 숨겨진 iframe을 사용합니다.

숨겨진 iframe 조건:

iframe의 너비와 높이가 4px 이하입니다.

표시: 없음 또는 가시성: 숨김이 적용됩니다.

음수 X 또는 Y 위치 지정을 사용하여 iframe이 화면에서 벗어났습니다.

지연 로딩 iframe에 미치는 영향은 무엇입니까?

web.dev 팀은 놀라운 결과로 몇 가지 사례 연구를 수집했습니다.

YouTube 비디오 삽입 지연 로드(초기 페이지 로드 시 최대 500KB 절약)

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy" 
        width="560" 
        height="315" 
        frameborder="0" 
        allow="accelerometer; autoplay; 
        encrypted-media; gyroscope; 
        picture-in-picture" 
        allowfullscreen></iframe>

Instagram 삽입 지연 로드(초기 로드 시 gzip으로 압축된 >100KB 저장)

Spotify 임베드 지연 로드(초기 로드 시 514KB 절약)

결론

지연 로딩 iframe에 대한 기본 지원을 통해 웹 사이트의 성능을 더 쉽게 개선할 수 있습니다. 위의 예는 미디어 삽입의 영향을 보여주지만 광고의 엄청난 잠재력을 상상할 수 있습니다. 이 게시물에서 네이티브 지연 로딩 iframe에 대해 읽었습니다. 나는 그것이 어떻게 작동하고 왜 그것을 사용해야 하는지를 보여주었다.

이 글이 마음에 드셨다면 잠시 미소 짓고 공유하고 팔로우 해주세요 check out my RSS feed , subscribe to my newsletter .

건배 마크

추가 읽기

It's time to lazy-load off-screen iframes!