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

Addy Osmani
Addy Osmani
X GitHub

브라우저 지원

  • 77
  • 79
  • 121
  • 16.4

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

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

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

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

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

서드 파티 삽입은 동영상 플레이어부터 소셜 미디어 게시물, 광고에 이르기까지 다양한 사용 사례를 지원합니다. 이러한 콘텐츠는 사용자의 표시 영역에 즉시 표시되지 않는 경우가 많지만, 스크롤하지 않더라도 사용자는 여전히 각 프레임에 대한 데이터 다운로드 및 비용이 많이 드는 JavaScript 비용을 지불합니다.

iframe에 iframe 지연 로드를 사용하여 데이터를 절약할 수 있습니다. 이 예에서는 즉시 로드가 3MB를 가져오지만 지연 로드는 사용자가 iframe에 더 가까이 스크롤할 때까지 이 코드를 가져오지 않습니다.
화면 밖 iframe을 열심히 로드하면 사용자가 절대 보지 않을 수도 있는 요소를 다운로드하여 데이터를 낭비하게 됩니다.

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

오프스크린 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을 기본값으로 설정하면 웹사이트의 응답 속도가 향상됩니다. 다음 예는 미디어 삽입의 상호작용 시간 (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>
Chrome.com은 YouTube 동영상 삽입을 위해 오프스크린 iframe을 지연 로드하여 상호작용까지의 시간을 10초 단축했습니다.
Chrome.com은 오프스크린 YouTube 삽입을 지연 로드하여 TTI를 10초 단축했습니다.

Instagram

Instagram 삽입에서는 페이지에 iframe을 삽입하는 마크업 블록과 스크립트를 제공합니다. 이 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는 자바스크립트입니다. 플러그인은 기사 끝부분이나 페이지 끝 부분에 표시되는 경우가 많으므로 화면 밖에 있을 때 바로 로드하는 것이 적합하지 않을 수 있습니다.

Facebook 좋아요 버튼
Facebook의 '좋아요' 플러그인

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

교차 브라우저 iframe 지연 로드

사이트에 iframe 지연 로드를 점진적 개선으로 적용할 수 있습니다. iframe에서 loading=lazy를 지원하는 브라우저는 iframe을 지연 로드하며 loading 속성을 지원하지 않는 브라우저는 iframe을 안전하게 무시합니다.

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>

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

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

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

자료

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

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