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

아디 오스마니
애디 오스마니
X GitHub

<iframe> 요소의 지연 로드는 사용자가 프레임 근처로 스크롤할 때까지 오프스크린 iframe이 로드되는 것을 지연시킵니다. 이렇게 하면 데이터를 절약하고 페이지의 다른 부분을 로드하는 속도를 높이며 메모리 사용량을 줄일 수 있습니다.

브라우저 지원

  • 77
  • 79
  • 121
  • 16.4

이미지 지연 로드를 나타내는 것과 동일한 방식으로 loading 속성을 사용하여 iframe을 지연 로드하도록 브라우저에 표시합니다.

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

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

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

서드 파티 삽입은 동영상 플레이어부터 소셜 미디어 게시물, 광고까지 광범위한 사용 사례를 포함합니다. 이러한 콘텐츠는 사용자의 표시 영역에 바로 표시되지 않는 경우가 많습니다. 대신 페이지에서 아래로 스크롤해야만 표시됩니다. 그럼에도 불구하고 사용자는 스크롤하지 않더라도 프레임마다 데이터 다운로드 및 비용이 많이 드는 JavaScript 비용을 지불합니다.

iframe에 iframe 지연 로드를 사용하여 데이터를 절약할 수 있습니다. 이 예에서는 즉시 로드가 3MB를 가져오지만 지연 로드는 사용자가 iframe에 더 가까이 스크롤할 때까지 이 코드를 가져오지 않습니다.

데이터 절약 모드 사용자를 위한 자동 지연 로드 오프스크린 iframe에 관한 Chrome의 연구에 따르면 iframe을 지연 로드하면 데이터 중앙값 2~3%, 첫 콘텐츠 페인트 중앙값 1~2% 감소, 95번째 백분위수에서 2% 첫 입력 지연 (FID) 개선으로 이어질 수 있습니다.

또한 오프스크린 iframe 지연 로드는 최대 콘텐츠 렌더링 시간 (LCP)에 이점을 제공할 수 있습니다. LCP 후보(예: 렌더링하기 위해 웹 글꼴에 종속된 이미지 또는 텍스트). iframe에서 모든 하위 리소스를 로드하는 데 상당한 대역폭이 필요할 수 있으므로 오프스크린 로드 지연 로드는 네트워크가 제한된 기기에서 대역폭 경합을 크게 줄여 페이지의 LCP에 기여하는 리소스를 로드하는 데 더 많은 대역폭을 남겨둘 수 있습니다.

iframe에 내장된 지연 로드는 어떻게 작동하나요?

loading 속성을 사용하면 사용자가 iframe 근처로 스크롤할 때까지 브라우저가 화면을 벗어난 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);

웹이 변경되어 오프스크린 로드 지연 로드가 기본값이 되면 다음과 같이 표시됩니다.

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>

일화: Chrome.com용 YouTube 삽입을 지연 로드 방식으로 전환하면서 휴대기기에서 페이지가 얼마나 빨리 상호작용할 수 있게 될지 10초 단축했습니다. loading=lazy를 소스 코드에 추가하는 것에 대해 논의하기 위해 YouTube에 내부 버그를 공개했습니다.

Chrome.com은 YouTube 동영상 삽입을 위해 오프스크린 iframe을 지연 로드하여 상호작용까지의 시간을 10초 단축했습니다.

Instagram 임베딩 지연 로드 (초기 로드 시 gzip으로 약 100KB 절약):

Instagram 삽입에서는 페이지에 iframe을 삽입하는 마크업 블록과 스크립트를 제공합니다. 이 iframe을 지연 로드하면 삽입에 필요한 모든 스크립트를 로드할 필요가 없습니다. 이러한 삽입은 대부분의 기사에서 표시 영역 아래에 표시되는 경우가 많으므로 iframe의 지연 로드에 적합한 후보로 보입니다.

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>

앞서 살펴본 삽입 방식은 미디어 콘텐츠의 iframe을 지연 로드할 때 얻을 수 있는 이점을 보여주지만, 광고에서도 이러한 이점을 얻을 수 있습니다.

우수사례: Facebook의 소셜 플러그인 지연 로드

Facebook 소셜 플러그인을 사용하면 개발자가 웹페이지에 Facebook 콘텐츠를 삽입할 수 있습니다. 삽입된 게시물, 사진, 동영상, 댓글 등 다양한 플러그인이 제공됩니다. 가장 인기 있는 플러그인은 페이지에 '좋아요' 표시한 사용자의 수를 보여주는 버튼인 좋아요 플러그인입니다. 기본적으로 Facebook JSSDK를 사용하여 웹페이지에 '좋아요' 플러그인을 삽입하면 약 215KB의 리소스, 즉 197KB의 자바스크립트가 가져옵니다. 대부분의 경우 플러그인은 기사 끝부분이나 페이지 끝 부분에 표시될 수 있으므로 화면 밖에 있을 때 바로 로드하는 것이 적합하지 않을 수 있습니다.

Facebook 좋아요 버튼

엔지니어 Stoyan Stefanov 덕분에 이제 Facebook의 모든 소셜 플러그인이 표준화된 iframe 지연 로드를 지원합니다. 이제 플러그인의 data-lazy 구성을 통해 지연 로드를 선택한 개발자는 사용자가 근처로 스크롤할 때까지 로드를 방지할 수 있습니다. 이를 통해 삽입은 필요한 사용자에게는 계속해서 완벽하게 작동하는 동시에 페이지를 끝까지 스크롤하지 않는 사용자에게는 데이터를 절약할 수 있습니다. 이 작업이 프로덕션에서 표준화된 iframe 지연 로드를 살펴볼 수 있는 많은 삽입 중 첫 번째가 되기를 바랍니다.

여러 브라우저에서 iframe을 지연 로드할 수 있나요? 예

iframe 지연 로드는 점진적 개선으로 적용할 수 있습니다. iframe에서 loading=lazy를 지원하는 브라우저는 iframe을 지연 로드하는 반면 loading 속성은 아직 지원하지 않는 브라우저에서는 안전하게 무시됩니다.

pausesizes JavaScript 라이브러리를 사용하여 오프스크린 iframe을 지연 로드할 수도 있습니다. 다음과 같은 경우 이 기능을 사용하는 것이 좋습니다.

  • 현재 표준화된 지연 로드에서 제공하는 것보다 더 많은 맞춤 지연 로드 기준이 필요합니다.
  • 사용자에게 여러 브라우저에서 일관된 iframe 지연 로드 경험을 제공하고자 함
<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

다음 패턴을 사용하여 지연 로드를 감지하고 지연 크기를 사용할 수 없을 때 지연 크기를 가져옵니다.

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

loading=lazy인 오프스크린 iframe이 여전히 로드되는 경우가 있나요?

Chrome의 데이터 절약 모드 사용자를 위해 iframe을 자동으로 지연 로드하는 초기 실험에서는 통신이나 분석에 흔히 사용되는 숨겨진 iframe에 관한 예외가 있었습니다. 이러한 기능은 지연 로드를 방지하고 기능이 중단되지 않도록 항상 로드되도록 했습니다.

loading 속성을 사용하면 선택 항목이 개발자에게 다시 반환되므로 이러한 휴리스틱이 적용되지 않으며 loading 속성은 거리 제한 및 기타 브라우저 선택 (예: 인쇄)에 따라 항상 적용됩니다.

결론

더 많은 지연 로드 아이디어는 web.dev의 이미지 및 동영상 지연 로드 컬렉션을 확인하세요.

리뷰를 작성해 주신 돔 파롤리노, 스콧 리틀, 후세인 디지르데, 사이먼 피터스, 케이스 바스크, 조 메들리, 스토얀 스테파노프에게 감사드립니다.