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

Addy Osmani

Barry Pollard

<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 devam eder. Bu sayede veri tasarrufu sağlanır, sayfanın diğer bölümlerinin yüklenmesi hızlandırılır ve bellek kullanımı azaltılır.

Resimler için geç yükleme özelliğinde 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>

<iframe loading=lazy> ile ilgili bu demo, video yerleştirmelerin gecikmeli olarak yüklenmesini gösterir:

Iframe'leri neden geç yüklemelisiniz?

Üçüncü taraf yerleşimleri, video oynatıcılardan sosyal medya gönderilerine ve reklamlara kadar çok çeşitli kullanım alanlarını kapsar. Bu içerik genellikle kullanıcının ekran görüntüsünde hemen görünmez ancak kullanıcılar, kaydırma yapmasalar bile her kare için veri ve pahalı JavaScript indirme maliyetini öder.

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ışındaki iframe'leri yavaş yüklemek, sayfanızı Largest Contentful Paint (LCP) açısından da iyileştirebilir. Çü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ğil. 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 belirtilmemesi, kaynağı açıkça istekli olarak yüklemekle aynı etkiye sahiptir.

JavaScript kullanarak iframe'leri dinamik olarak oluşturmanız gerekiyorsa öğede iframe.loading = 'lazy' ayarlaması da 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

YouTube videolarının yerleştirilmesini geciktirmek, 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>

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. Bu yerleşimler genellikle çoğu makalede görüntü alanının altında gösterildiği için iframe'ın gecikmeli yüklenmesi için uygun bir 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. Facebook JSSDK'yi kullanarak Beğenme eklentisini varsayılan olarak bir web sayfasına yerleştirdiğinizde yaklaşık 215 KB kaynak yüklenir. Bu kaynakların 197 KB'sı JavaScript'dir. Eklenti genellikle bir makale veya sayfanın sonuna yakın bir yerde, ekran dışındayken optimum düzeyin altında olabilir.

Mühendis Stoyan Stefanov sayesinde Facebook'ın tüm sosyal eklentileri artık standartlaştırılmış iframe gecikmeli yüklemeyi destekliyor. Eklentilerin data-lazy yapılandırması aracılığıyla yavaş yüklemeyi etkinleştiren geliştiriciler artık kullanıcı yakına gelene kadar bu eklentilerin yüklenmesini engelleyebilir. 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.

iframe geç yükleme üzerinde daha fazla kontrol istediğinizde

Tarayıcı düzeyinde iframe'lerin gecikmeli yüklenmesi tüm büyük tarayıcılarda iyi desteklenir ve JavaScript'e yönelik ek bağımlılıkların ortadan kaldırılması için çoğu kullanım alanı için önerilir.

Ancak eski tarayıcıları desteklemeniz gerekiyorsa veya yavaş yükleme eşikleri üzerinde daha fazla kontrol sahibi olmak istiyorsanız sitenizdeki iFrame'leri yavaş yüklemek için üçüncü taraf kitaplığı kullanabilirsiniz. lazysizes JavaScript kitaplığı, ihtiyaç duyduğunuzda ek seçenekler sunan bu tür kitaplıklardan biridir.

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 sezgisel kuralları uygulamaz. Bu nedenle, nelerin yavaş yükleneceğini her zaman geliştirici seçer. loading özelliği, mesafe sınırlamalarına ve diğer tarayıcı seçeneklerine (ör. baskı) tabi olarak her zaman dikkate alınmalıdır.

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.