이제 오프스크린 iframe을 지연 로드해 보겠습니다.

Addy Osmani

Barry Pollard

<iframe> 요소의 지연 로드로 인해 오프스크린 iframe 로드가 지연됨 스크롤해야 합니다. 이렇게 하면 데이터가 절약되고 페이지의 다른 부분이 더 빠르게 로드되며 메모리 사용량이 줄어듭니다.

이미지 지연 로드와 마찬가지로 loading 속성을 사용하여 브라우저에 iframe을 지연 로드하도록 알립니다.

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<iframe loading=lazy>의 데모 지연 로드 동영상 삽입을 보여줍니다.

iframe을 지연 로드해야 하는 이유

서드 파티 삽입은 동영상 플레이어부터 소셜 미디어 게시물, 광고에 이르기까지 다양한 사용 사례를 다룹니다. 이러한 콘텐츠는 표시 영역만 차지할 뿐 아니라 사용자는 여전히 데이터 다운로드 비용을 지불하고 각 프레임에 대한 JavaScript(스크롤하지 않은 경우 포함)

오프스크린 iframe 자동 지연 로드에 대한 Chrome의 연구 결과 기반 (데이터 절약 모드 사용자의 경우) 지연 로드 iframe을 사용하면 평균 2~3%, 평균 1~2%의 데이터 절감 효과를 얻을 수 있습니다. 중앙값 및 2%에서 콘텐츠가 포함된 첫 페인트 감소 95번째 백분위수에서 최초 입력 지연 (FID)이 개선되었습니다.

화면 밖에 있는 iframe을 지연 로드하면 페이지의 최대 콘텐츠 페인트(LCP)도 개선할 수 있습니다. iframe은 모든 하위 리소스를 로드하는 데 상당한 양의 대역폭이 필요한 경우가 많으므로 오프스크린 iframe을 지연 로드하면 네트워크 제약이 있는 기기에서 대역폭 경합을 줄여 페이지의 LCP에 기여하는 리소스를 로드하는 데 더 많은 대역폭을 남겨 둘 수 있습니다.

iframe의 기본 제공 지연 로드는 어떻게 작동하나요?

loading 속성을 사용하면 브라우저가 사용자가 화면 밖 iframe 및 이미지 근처로 스크롤할 때까지 이러한 콘텐츠의 로드를 지연시킬 수 있습니다. loading는 다음 두 가지 값을 지원합니다.

• lazy: 지연 로드에 적합합니다.
• eager: 지연 로드에 적합하지 않습니다. 지금 바로 로드하세요.

iframe에서 loading 속성을 사용하는 방법은 다음과 같습니다.

<!-- 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>

속성을 지정하지 않으면 명시적으로 빠르게 로드하는 것과 같은 영향이 있습니다. 리소스입니다

JavaScript를 사용하여 iframe을 동적으로 만들어야 하는 경우 요소에 iframe.loading = 'lazy'를 설정하는 것도 지원됩니다.

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

지연 로드가 많이 사용되는 iframe 삽입은 사용자 환경에 어떤 영향을 미치나요?

지연 로드 iframe을 기본값으로 설정하면 웹사이트의 응답 속도가 훨씬 빨라집니다. 다음 예에서는 미디어 삽입의 Time to Interactive(TTI) 개선 및 데이터 절약을 보여줍니다. 하지만 광고 iframe을 지연 로드해도 비슷한 이점을 얻을 수 있습니다.

YouTube

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>

</ph>

Instagram

Instagram 임베딩은 마크업 블록과 삽입해야 합니다. 이 iframe을 지연 로드하면 삽입 시 필요한 스크립트를 작성하며 초기 로드 시 약 100KB의 비용을 절감할 수 있습니다. 왜냐하면 대부분의 기사에서 표시 영역 아래에 표시되지만 iframe 지연 로드에 적합한 후보입니다.

Spotify

지연 로드 Spotify 삽입을 사용하면 초기 로드 시 514KB를 절약할 수 있습니다.

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

Facebook의 소셜 플러그인

Facebook 소셜 플러그인을 사용하면 개발자가 웹페이지에 Facebook 콘텐츠를 삽입할 수 있습니다. 가장 인기 있는 플러그인은 페이지에 '좋아요'를 누른 사용자 수를 보여주는 버튼인 좋아요 플러그인입니다. 기본적으로 Facebook JSSDK를 사용하여 웹페이지에 좋아요 플러그인을 삽입하면 약 215KB의 리소스가 가져오는데, 이 중 197KB가 JavaScript입니다. 플러그인은 기사 끝이나 페이지 끝 근처에 표시되는 경우가 많으므로 화면 밖에 있을 때 플러그인을 미리 로드하면 최적의 성능을 발휘하지 못할 수 있습니다.

엔지니어 Stoyan Stefanov 덕분에 이제 모든 Facebook 소셜 플러그인이 표준화된 iframe 지연 로드를 지원합니다. 플러그인의 '지연 로드'를 통해 지연 로드를 선택하는 개발자는 data-lazy 이제 사용자가 스크롤 할 때까지 이러한 플러그인이 로드되지 않도록 할 수 있습니다. 있습니다. 이렇게 하면 필요한 사용자에게는 삽입이 계속 작동하면서 페이지를 끝까지 스크롤하지 않는 사용자의 데이터는 저장됩니다. 희망적 이는 표준화된 iframe 지연 로드에 대해 살펴볼 수 있는 수많은 임베딩 중 첫 번째입니다. 있습니다

iframe 지연 로드를 더 세부적으로 제어하려는 경우

브라우저 수준 iframe 지연 로드는 모든 주요 브라우저에서 잘 지원되며 JavaScript에 추가 종속 항목이 필요하지 않도록 하기 위해 대부분의 사용 사례에서 권장됩니다.

그러나 이전 브라우저를 지원해야 하거나 지연 로드 기준점을 더 세부적으로 제어하려는 경우 서드 파티 라이브러리를 사용하여 사이트의 iframe을 지연 로드할 수 있습니다. laysizes JavaScript 라이브러리는 필요한 경우 추가 옵션을 허용하는 라이브러리 중 하나입니다.

오프스크린 iframe 지연 로드에 예외가 있나요?

데이터 절약 모드를 위한 자동 지연 로드 iframe에 관한 초기 실험 Chrome의 사용자에게는 숨겨진 iframe(흔히 분석해야 합니다 이러한 파일은 로드가 지연되지 않았으며 항상 로드되어 이러한 기능이 손상되지 않도록 합니다.

loading 속성은 이러한 휴리스틱을 적용하지 않으므로 개발자는 항상 지연 로드할 항목을 선택할 수 있습니다. loading 속성은 항상 거리 제한 및 기타 브라우저 선택 (예: 인쇄)에 따라 적용됩니다.

리소스

지연 로드에 관한 자세한 내용은 web.dev의 이미지 및 동영상 지연 로드 컬렉션을 참조하세요.

리뷰를 제공해 주신 Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley, Stoyan Stefanov님께 감사드립니다.