Ekran dışı iframe'leri geç yüklemenin zamanı geldi!

Addy Osmani

Barry Pollard

Tarayıcı Desteği

• . 77
• . 79
• . 121
• . 16,4

<iframe> öğelerinin geç yüklenmesi, ekran dışındaki iframe'lerin yüklenmesini erteler ta ki kullanıcı ekranı kaydırarak yakınlarına gelinceye kadar basılı tutun. Bu, daha az veri sağlar, verilerinizin yüklenmesini hızlandırır ve ve bellek kullanımını azaltır.

Resimler için geç yüklemede olduğu gibi Tarayıcıya bir iframe'i geç yüklemek istediğinizi bildirmek için loading özelliğini kullanın.

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

Bu <iframe loading=lazy> demosu geç yüklenen video yerleştirmelerini gösterir:

iframe'ler neden geç yüklemelidir?

Üçüncü taraf yerleştirmeleri, video oynatıcılardan video oynatıcılara kadar çok çeşitli kullanım alanlarını kapsar. sosyal medya gönderilerini reklamlara dönüştürme. Bu içerik genellikle ancak kullanıcılar verileri indirme maliyetini ve maliyeti Kaydırmasalar bile her kare için JavaScript.

Ekran dışı iframe'lerin hızlı bir şekilde yüklenmesi, kullanıcıların hiç görmeyebilecekleri öğeleri indirerek veri israfı yapmalarına yardımcı oluyor.

Chrome'un ekran dışı iframe'leri otomatik olarak geç yükleme ile ilgili araştırmasına dayanır kullanıcılar için geç yüklenen iframe'ler% 2-3 ortalama veri tasarrufu, %1-2 oranında veri tasarrufu sağlayabilir Ortanca değerde First Contentful Paint düşüşleri ve %2 İlk Giriş Gecikmesi (FID) 95. yüzdelik dilimde iyileşti.

Ekran dışı iframe'lerin geç yüklenmesi, sayfanızın En Büyük Contentful Paint (LCP). Çünkü iframe'ler genellikle tüm alt kaynaklarını yüklemek için kayda değer miktarda bant genişliği, geç yükleme ekran dışı iframe'ler ağ kısıtlamalı cihazlarda bant genişliği çakışmasını azaltabilir daha fazla bant genişliği sağlayarak bir sayfanın LCP

iframe'ler için yerleşik geç yükleme nasıl çalışır?

loading özelliği, tarayıcının ekran dışı iframe'lerin yüklenmesini ertelemesini ve yaklaşık 30 dakika sürer. loading iki değeri destekler:

• lazy: geç yükleme için iyi bir aday.
• eager: Geç yükleme için iyi bir aday değildir. Hemen yükleyin.

iframe'lerde loading özelliğini kullanma aşağıdaki gibi çalışır:

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

Özelliğin belirtilmesini, açıkça hızlı bir şekilde yüklemeyle aynı etkiye sahiptir düşünmesi gerekir.

JavaScript kullanarak iframe'leri dinamik olarak oluşturmanız gerekiyorsa Öğedeki iframe.loading = 'lazy' de desteklenir:

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

Popüler iframe yerleştirmelerinin geç yüklenmesi, kullanıcı deneyimini nasıl etkiler?

Geç yüklenen iframe'lerin varsayılan yapılması web sitelerinin çok daha duyarlı olmasını sağlar. Aşağıdaki örneklerde Etkileşime Hazır Olma Süresi (TTI) iyileştirmeleri ve verileri gösterilmektedir medya yerleştirmeleri için tasarruf sağlar, ancak geç yüklenen reklam iframe'leri benzer avantajları

YouTube

Geç yüklenen YouTube video yerleştirmeleri, ilk sayfa yüklemesinde yaklaşık 500 KB tasarruf sağlar:

<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 TTI'sını 10 saniye azalttı ekran dışı YouTube yerleşimlerini geç yükleme ile yükleme.

ziyaret edin.

Not: Yerleştirilmiş YouTube öğelerini yüklemenin daha verimli yollarını arıyorsanız YouTube Lite bileşeni ilginizi çekebilir.

Instagram

Instagram yerleştirmeleri, bir işaretleme bloku ve iframe'i sayfanıza entegre edebilirsiniz. Bu iframe'in geç yüklenmesi, komut dosyasını kullanarak ve ilk yüklemede yaklaşık 100 kB tasarruf sağlayabilir. Çünkü bu yerleştirmeler genellikle çoğu makalede görüntü alanının altında görüntülenir. iframe geç yükleme için makul adaydır.

Spotify

Geç yüklenen Spotify yerleştirmeleri, ilk yüklemede 514 KB tasarruf edebilir.

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

Facebook'un sosyal eklentileri

Facebook sosyal eklentileri, geliştiricilerin Facebook içeriğini web sayfaları. Bunlardan en popüler olanı Beğen eklentisidir. kaç kullanıcının "beğendiğini" gösteren düğme yapalım. Varsayılan olarak, Facebook JSSDK kullanan bir web sayfasında yer alan Like eklentisi, yaklaşık 215 KB boyutunda ve kaynakların 197 KB'ı JavaScript'tir. Eklenti genellikle bir makale veya sayfanın sonuna yakın bir yerde, ekran dışındayken optimum düzeyin altında olabilir.

Facebook'un Like eklentisi.

Mühendis Stoyan Stefanov sayesinde tüm Facebook sosyal medya eklentileri şu anda standartlaştırılmış iframe'i destekleme geç yükleme. Eklentilerin aracılığıyla geç yüklemeyi etkinleştiren geliştiriciler data-lazy. yapılandırması artık kullanıcı sayfayı kaydırana kadar bu eklentilerin yüklenmesini engelleyebilir yakınımda. Bu, yerleştirmenin ihtiyaç duyan kullanıcılar için çalışmaya devam etmesini sağlarken kullanıcılar için veri tasarrufu sağlıyor. Umarız Bu, standartlaştırılmış iframe geç yüklemesini keşfetmek için kullanılan birçok yerleştirmenin ilkidir. çok önemlidir.

Tarayıcılar arası iframe geç yükleme

Tarayıcı düzeyinde iframe geç yükleme, tüm başlıca tarayıcılarda iyi desteklenir ve JavaScript'e fazladan bağımlılık yapma ihtiyacını ortadan kaldırmak için çoğu kullanım durumu için önerilir.

Bununla birlikte, daha fazla tarayıcıyı desteklemeniz gerekiyorsa veya geç yükleme eşikleri üzerinde daha fazla denetime sahip olmak istiyorsanız, sitenize iframe'i geç yüklemek için üçüncü taraf bir kitaplık kullanabilirsiniz.

Ayrıca, lazysizes kullanarak ekran dışı iframe'leri geç yükleyebilirsiniz. JavaScript kitaplığı:

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

Geç yüklemeyi algılamak ve geç boyutları getirme özelliğini kullanmak için aşağıdaki kalıbı kullanın kullanılamadığında:

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

Ekran dışı iframe geç yüklemesi için istisnalar var mı?

Veri Tasarrufu için otomatik olarak geç yüklenen iframe'lerle oluşturulan erken bir deneme Chrome'daki kullanıcıların gizli iframe'ler için bir istisnası vardı. Bunlar genellikle iletişim veya analiz. Bunların geç yüklenmesi önlendi ve bu özelliklerin bozulmasını önlemek için her zaman yüklü olmalıdır.

loading özelliği bu buluşsal yöntemleri uygulamadığından geliştirici her zaman nelerin geç yüklendiğini seçebilir. loading özelliği her zaman ve diğer tarayıcı tercihlerine (örneğin, yazdırma) tabi olarak her zaman geçerlidir.

Kaynaklar

Daha geç yükleme fikirleri için bkz. web.dev resim ve video geç yükleme koleksiyonu.

Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley ve Stoyan sayesinde Stefanov'dan da bahsetmek istiyorum.