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

Addy Osmani

Barry Pollard

<iframe> öğelerinin yavaş yüklenmesi, ekran dışındaki iframe'lerin kullanıcı ekranı kaydırana kadar yüklenmesini erteler. 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 Veri Tasarrufu kullanıcıları için ekran dışı iFrame'leri otomatik olarak yavaş yükleme konulu araştırmasına göre, yavaş yüklenen iFrame'ler ortalama% 2-3 oranında veri tasarrufu, ortalama %1-2 oranında ilk zengin içerikli boyama azaltımı ve 95. yüzdelik dilimde %2 oranında ilk giriş gecikmesi (FID) iyileştirilmesi sağlayabilir.

Ekran dışındaki iframe'leri gecikmeli yüklemek, sayfanızı Largest Contentful Paint (LCP) açısından da iyileştirebilir. iframe'ler genellikle tüm alt kaynaklarını yüklemek için kayda değer miktarda bant genişliğine ihtiyaç duyduğundan, geç yüklenen ekran dışı iframe'ler ağ kısıtlamalı cihazlarda bant genişliği çakışmasını azaltarak sayfanın LCP'sine katkıda bulunan kaynakları yüklemek için daha fazla bant genişliği bırakabilir.

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

loading özelliği, tarayıcının ekran dışı iframe'lerin ve resimlerin, kullanıcılar sayfayı kaydırana kadar yüklenmesini ertelemesine olanak tanır. 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üklenir.

iframe'lerde loading özelliğini kullanma işlemi aşağıdaki gibi yapılı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ğın açıkça hızlı bir şekilde yüklenmesiyle aynı etkiye sahiptir.

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

Yavaş yüklenen iframe'leri varsayılan olarak ayarlamak, web sitelerini çok daha duyarlı hale getirecektir. Aşağıdaki örneklerde, medya yerleşimleri için etkileşime geçme süresi (TTI) iyileştirmeleri ve veri tasarrufları gösterilmektedir ancak reklam iframe'lerinin yavaş yüklenmesi de benzer avantajlar sağlayabilir.

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şimleri, bir işaretleme bloğu ve sayfanıza iFrame yerleştiren bir komut dosyası sağlar. Bu iframe'in geç yüklenmesi, yerleştirme için gereken tüm komut dosyasını yüklemek zorunda kalmaz 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

Spotify yerleşiklerinin yavaş yüklenmesi, ilk yüklemede 514 KB tasarruf sağlayabilir.

<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 web sayfalarına Facebook içeriği yerleştirmelerine olanak tanır. Bunlardan en popüler olanı, kaç kullanıcının sayfayı "beğendiğini" gösteren bir düğme olan Beğenme eklentisidir. 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 makalenin veya sayfanın sonunda görünür. Bu nedenle, ekranda olmadığında hevesle yüklemek en uygun seçenek olmayabilir.

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 kaydırana kadar bu eklentilerin yüklenmesini engelleyebilir. Bu sayede, sayfanın en altına kaydırmayan kullanıcılar için veri tasarrufu sağlarken, ihtiyacı olan kullanıcılar için yerleşik içeriğin çalışmaya devam etmesini sağlayabilirsiniz. Standartlaştırılmış iframe'ın üretimde yavaş yüklemesini keşfedecek birçok yerleşimden ilkinin bu olduğunu umuyoruz.

Iframe'lerin gecikmeli yüklenmesi üzerinde daha fazla kontrol sahibi olmak istediğinizde

Tarayıcı düzeyinde iframe gecikmeli yükleme, 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'lerin yavaş yüklenmesi için istisnalar var mı?

Chrome'daki Veri Tasarrufu kullanıcıları için otomatik olarak yavaş yüklenen iframe'lerle ilgili ilk deneme, genellikle iletişim veya analiz için kullanılan gizli iframe'ler için bir istisna içeriyordu. Bu öğelerin yavaşça yüklenmesi engellendi ve bu özelliklerin bozulmasını önlemek için her zaman yüklendi.

loading özelliği bu sezgisel kuralları uygulamaz. Bu nedenle, geliştirici her zaman nelerin yavaş yükleneceğini 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 web.dev'in resim ve video geç yükleme koleksiyonuna bakın.

Yorumları için Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley ve Stoyan Stefanov'a teşekkür ederiz.