Ekran dışı iframe’leri tembel yükleme zamanı!

aracılığıyla Chrome 76’ya gelen görüntüler için standartlaştırılmış yavaş yükleme loading öznitelik ve daha sonra Firefox’a geldi. Bunu paylaşmaktan mutluluk duyuyoruz iframe’ler için tarayıcı düzeyinde geç yükleme şimdi standartlaştırılmış ve ayrıca Chrome ve Chromium tabanlı tarayıcılarda desteklenir.

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

iframe’lerin standartlaştırılmış geç yüklenmesi, ekran dışı iframe’lerin yüklenmesini kullanıcı kaydırana kadar erteler. Bu veri tasarrufu sağlar, sayfanın diğer bölümlerinin yüklenmesini hızlandırır ve bellek kullanımını azaltır.

Bu gösteri ile ilgili &LTiframe loading=lazy> geç yüklenen video yerleştirmelerini gösterir:

Neden iframe’leri tembel olarak yüklemeliyiz? #

Üçüncü taraf yerleştirmeler, video oynatıcılardan sosyal medya gönderilerine ve reklamlara kadar çok çeşitli kullanım durumlarını kapsar. Genellikle bu içerik, kullanıcının görüntü alanında hemen görünmez. Bunun yerine, yalnızca sayfada daha aşağı kaydırdıklarında görülür. Buna rağmen, kullanıcılar kaydırma yapmasalar bile her çerçeve için veri indirme ve yüksek maliyetli JavaScript maliyetini öderler.

Chrome’un araştırmasına dayanarak Veri Tasarrufu kullanıcıları için ekran dışı iframe’leri otomatik olarak geç yüklemegeç yüklenen iframe’ler ortalama %2-3 veri tasarrufu, orta değerde %1-2 First Contentful Paint azalmaları ve 95. yüzdelik dilimde %2 İlk Giriş Gecikmesi (FID) iyileştirmeleri sağlayabilir.

Ek olarak, geç yüklenen ekran dışı iframe’ler, En Büyük İçerikli Boyama’ya (LCP) fayda sağlayabilir. LCP adayları, resimler veya metinler gibi web yazı tiplerine bağımlı hale getirmek için. İç çerçeveler, tüm alt kaynaklarını yüklemek için genellikle önemli miktarda bant genişliği gerektirebileceğinden, geç yüklenen ekran dışı iframe’ler, ağ kısıtlamalı cihazlardaki bant genişliği çekişmesini önemli ölçüde azaltabilir ve bir 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 yavaş yükleme nasıl çalışır? #

bu loading özniteliği, bir tarayıcının ekran dışı iframe’lerin ve görüntülerin yüklenmesini kullanıcılar kaydırana kadar ertelemesine olanak tanır. loading iki değeri destekler:

• lazy: yavaş yükleme için iyi bir adaydır.
• eager: geç yükleme için iyi bir aday değildir. Hemen yükleyin.

Kullanmak loading iframe’lerdeki öznitelik şu şekilde çalışır:

&LT!-- Lazy-load the iframe -->
iframe src="https://example.com"
loading="lazy"
width="600"
height="400">&LT/iframe>
&LT!-- Eagerly load the iframe -->
iframe src="https://example.com"
width="600"
height="400">&LT/iframe>

Özniteliği hiç belirtmemek, kaynağı açıkça ve isteyerek yüklemekle aynı etkiye sahip olacaktır.

Eğer ihtiyacın olursa dinamik olarak JavaScript aracılığıyla iframe’ler oluşturun, ayar iframe.loading = 'lazy' eleman üzerinde ayrıca desteklenen:

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

iframe’e özgü yavaş yükleme davranışı #

Yükleme özelliği, iframe’in gizli olup olmamasına bağlı olarak iframe’leri görüntülerden farklı şekilde etkiler. (Gizli iframe’ler genellikle analiz veya iletişim amacıyla kullanılır.) Chrome, bir iframe’in gizli olup olmadığını belirlemek için aşağıdaki ölçütleri kullanır:

• iframe’in genişliği ve yüksekliği 4px veya daha küçük.
• display: none veya visibility: hidden uygulanır.
• iframe, negatif X veya Y konumlandırması kullanılarak ekran dışına yerleştirilir.
• Bu kriter her ikisi için de geçerlidir. loading=lazy Ve loading=auto.

Bir iframe bu koşullardan herhangi birini karşılıyorsa, Chrome onu gizli olarak kabul eder ve çoğu durumda geç yüklemez. gizli olmayan iframe’ler, yalnızca yükleme mesafesi eşiği içindeyken yüklenir. Chrome, hâlâ getirilmekte olan geç yüklenen iframe’ler için bir yer tutucu gösterir.

Geç yüklenen popüler iframe yerleştirmelerinden nasıl bir etki görebiliriz? #

Ya yavaş yüklenen ekran dışı iframe’lerin varsayılan olması için web’i genel olarak değiştirebilseydik? Biraz şöyle görünecek:

Geç yüklenen YouTube video yerleştirmeleri (ilk sayfa yüklemesinde ~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>&LT/iframe>

Anekdot: Chrome.com için geç yüklenen YouTube yerleştirmelerine geçtiğimizde, sayfalarımızın mobil cihazlarda etkileşimli hale gelmesinden 10 saniye tasarruf ettik. Eklemeyi tartışmak için YouTube’da dahili bir hata açtım loading=lazy ekleme koduna.

Yavaş yüklenen Instagram yerleştirmeleri (ilk yüklemede gzip’lenmiş >100 KB tasarruf sağlar):

Instagram yerleştirmeleri, sayfanıza bir iframe ekleyen bir işaretleme bloğu ve bir komut dosyası sağlar. Bu iframe’in geç yüklenmesi, yerleştirme için gerekli tüm betiğin yüklenmesini önler. Bu tür gömmelerin çoğu makalede genellikle görünümün altında görüntülendiği göz önüne alındığında, bu, iframe’lerinin geç yüklenmesi için makul bir aday gibi görünüyor.

Yavaş yüklenen Spotify yerleştirmeleri (ilk yüklemede 514 KB tasarruf sağlar):

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

Yukarıdaki yerleştirmeler, medya içeriği için geç yüklenen iframe’lerin potansiyel faydalarını gösterse de, bu faydaları reklamlar için de görme potansiyeli vardır.

Örnek olay: Facebook’un sosyal eklentilerini geç yükleme #

Facebook’un sosyal eklentiler geliştiricilerin Facebook içeriğini web sayfalarına yerleştirmelerine olanak tanır. Gömülü gönderiler, fotoğraflar, videolar, yorumlar gibi bir dizi bu eklenti sunulmaktadır… En popüler olanı eklenti gibi – sayfayı kimlerin “beğendiğini” gösteren bir düğme. Varsayılan olarak, Like eklentisini bir web sayfasına yerleştirmek (FB JSSDK kullanarak), 197 KB’ı JavaScript olan ~215 KB kaynak çeker. Çoğu durumda, eklenti bir makalenin sonunda veya bir sayfanın sonuna yakın bir yerde görünebilir, bu nedenle ekran dışındayken hevesle yüklemek yetersiz olabilir.

Mühendis Stoyan Stefanov sayesinde, Facebook’un tüm sosyal eklentileri artık standartlaştırılmış iframe geç yüklemeyi destekliyor. Eklentiler aracılığıyla geç yüklemeyi seçen geliştiriciler data-lazy yapılandırması artık kullanıcı yana kaydırana kadar yüklenmesini engelleyebilecek. Bu, bir sayfada tamamen aşağı kaydırmayanlar için veri tasarrufu sunarken, yerleştirmenin ihtiyaç duyan kullanıcılar için tam olarak çalışmasına olanak tanır. Bunun, üretimde standartlaştırılmış iframe geç yüklemeyi keşfetmeye yönelik pek çok yerleştirmeden ilki olduğunu umuyoruz.

Çapraz tarayıcıda iframe’leri tembel yükleyebilir miyim? Evet #

iframe geç yükleme aşamalı bir geliştirme olarak uygulanabilir. destekleyen tarayıcılar loading=lazy iframe’lerde iframe’i tembel olarak yüklerken, loading özelliği, henüz desteklemeyen tarayıcılarda güvenli bir şekilde göz ardı edilecektir.

Lazysizes JavaScript kitaplığını kullanarak ekran dışı iframe’leri tembel yüklemek de mümkündür. Aşağıdaki durumlarda bu istenebilir:

• şu anda standartlaştırılmış yavaş yüklemenin sunduğundan daha fazla özel yavaş yükleme eşiği gerektirir
• kullanıcılara tarayıcılarda tutarlı bir iframe geç yükleme deneyimi sunmak istiyor

script src="lazysizes.min.js" async>&LT/script>

iframe frameborder="0"
	  class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
&LT/iframe>

Yavaş yüklemeyi algılama özelliği ve mevcut olmadığında yavaş boyutları getirme özelliği için aşağıdaki modeli kullanın:

iframe frameborder="0"
	  class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
&LT/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);
  }

&LT/script>

WordPress kullanıcıları için bir seçenek #

Bir WordPress sitesinde yıllarca süren gönderi içeriğine dağılmış birçok iframe’iniz olabilir. İsteğe bağlı olarak aşağıdaki kodu WordPress temanıza ekleyebilirsiniz. functions.php otomatik olarak eklenecek dosya loading="lazy" her birini ayrı ayrı manuel olarak güncellemek zorunda kalmadan mevcut iframe’lerinize.

Dikkat Geç yüklenen iframe’ler için tarayıcı düzeyinde destek de WordPress çekirdeğinde çalışılmaktadır.. Aşağıdaki kod parçası, ilgili bayrakları kontrol edecek, böylece WordPress yerleşik işlevselliğe sahip olduğunda, artık manuel olarak eklemeyecektir. loading="lazy" öznitelik, bu değişikliklerle birlikte çalışabilir olmasını ve yinelenen bir öznitelikle sonuçlanmamasını sağlar.

// TODO: Remove once  lands.
function wp_lazy_load_iframes_polyfill( $content ) {
// If WP core lazy-loads iframes, skip this manual implementation.
if ( function_exists( 'wp_lazy_loading_enabled' ) && wp_lazy_loading_enabled( 'iframe', 'the_content' ) ) {
return $content;
}
return str_replace( '&LTiframe ', '&LTiframe loading="lazy" ', $content );
}
add_filter( 'the_content', 'wp_lazy_load_iframes_polyfill' );

WordPress siteniz önbelleğe alma kullanıyorsa (ipucu: gerekir), daha sonra sitenizin önbelleğini yeniden oluşturmayı unutmayın.

Çözüm #

Geç yüklenen iframe’ler için standartlaştırılmış destekle çalışmak, web sayfalarınızın performansını iyileştirmenizi önemli ölçüde kolaylaştırır. Herhangi bir geri bildiriminiz varsa, lütfen şuraya bir sorun göndermekten çekinmeyin: Chromium Hata Takibi.

Ayrıca, kaçırdıysanız, daha fazla yavaş yükleme fikri için web.dev’in resim ve video geç yükleme koleksiyonuna göz atın.

İncelemeleri için Dom Farolino, Scott Little, Houssein Djirdeh, Simon Pieters, Kayce Basques, Joe Medley ve Stoyan Stefanov’a teşekkürler.