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

Addy Osmani

Barry Pollard

브라우저 지원

• <ph type="x-smartling-placeholder"></ph> 77
• <ph type="x-smartling-placeholder"></ph> 79개
• <ph type="x-smartling-placeholder"></ph> 121명
• <ph type="x-smartling-placeholder"></ph> 16.4

<iframe> 요소의 지연 로드로 인해 오프스크린 iframe 로드가 지연됨 스크롤해야 합니다. 이렇게 하면 데이터가 절약되고 메모리 사용량을 줄일 수 있습니다

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

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

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

iframe을 지연 로드하는 이유

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

<ph type="x-smartling-placeholder">

</ph>

오프스크린 iframe을 빠르게 로드하면 사용자가 절대 볼 수 없는 요소를 다운로드하여 데이터를 낭비하는 것입니다.

오프스크린 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을 기본값으로 설정하면 웹사이트의 응답 속도가 훨씬 빨라집니다. 다음 예는 상호작용까지의 시간 (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 type="x-smartling-placeholder">

</ph>

Chrome.com은 TTI를 10초 오프스크린 YouTube 삽입에 대한 지연 로드

를 통해 개인정보처리방침을 정의할 수 있습니다.

참고: YouTube 삽입 동영상을 더 효율적으로 로드하는 방법을 찾으려면 YouTube Lite 구성요소를 확인해 보세요.

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 소셜 플러그인을 사용하면 개발자는 웹페이지 이 중 가장 인기 있는 것은 Like 플러그인입니다. '좋아요'를 누른 사용자 수를 보여주는 버튼 있습니다. 기본적으로 Facebook JSSDK를 사용하는 웹페이지의 '좋아요' 플러그인에서는 약 215KB의 이 중 197KB는 JavaScript입니다. 플러그인은 보통 너무 많기 때문에 화면 밖에 있을 때 빠르게 로드해야 합니다. 차선책일 수 있습니다

<ph type="x-smartling-placeholder">

</ph>

Facebook의 '좋아요' 플러그인입니다.

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

교차 브라우저 iframe 지연 로드

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

그러나 더 많은 브라우저를 지원해야 하거나 지연 로드 기준점을 더 세부적으로 제어하려는 경우 서드 파티 라이브러리를 사용하여 사이트에서 iframe을 지연 로드할 수 있습니다.

또한 latencysizes를 사용하여 오프스크린 iframe을 지연 로드할 수도 있습니다. JavaScript 라이브러리:

<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 지연 로드에 예외가 있나요?

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

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

리소스

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

돔 파롤리노, 스콧 리틀, 하우세인 지르데, 사이먼 피터스, 케이스 바스케스, 조 메들리, 스토얀의 참여로 스테파노프의 리뷰입니다