Es hora de cargar de forma diferida los

iframes ?

— , . , , . , , JavaScript , .

Chrome iframe Data Saver, , 2-3% , 1-2% First Contentful Paint 2% (FID) 95- .

?

loading , . :

• lazy .
• eager . .
• auto , .

loading iframes :

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

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

<!--   loading="eager"      
lazy-loading   Lite Mode -->
<iframe src="https://example.com" 
        loading="eager" 
        width="600" 
        height="400"></iframe>

loading , , (Lite Mode), Chrome auto, , .

iframe JavaScript, iframe.loading = 'lazy':

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

iframe

loading , , , . ( iframe .)

Chrome , iframe :

• iframe 4 .
• display: none visibility: hidden
• iframe X Y
• loading = lazy, loading = auto.

iframe - , Chrome .

, , , . Chrome ,

iframe?

, . :

YouTube ( ~ 500 ):

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

iframe YouTube Chrome.com, 10 , . YouTube, loading = lazy .



YouTube , YouTube lite.

Instagram (> 100 ):

Instagram , iframe . iframe , . , , iframe.

Spotify ( 514 )

<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 -. , , , , … « » — , «» . Like - ( FB JSSDK) ~ 215 , 197 — JavaScript. , , , .

(Stoyan Stefanov) Facebook iframe. , , , , , . , , , . , , iframe .

, ?

, , . Chrome 77 , Lite Mode ( ) Chrome Android.

Lite Mode , . , .

, , navigator.connection.saveData, API NetworkInformation.

-? —

iframe . , loading=«lazy» iframes, iframe , , .

iframes JavaScript lazysizes. , :

• , ,
• 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>

La compatibilidad con iframe de carga diferida incorporada hace que sea mucho más fácil mejorar el rendimiento de sus páginas web. Si tiene algún comentario sobre la carga diferida de un iframe incrustado, no dude en publicarlo en Chromium Bug Tracker .

Gracias a Addy Osmani por el artículo. Si está interesado en profundizar en el iframe de etiquetas, llame su atención sobre un artículo Una guía completa sobre el iframe de etiquetas