Tarayıcı Desteği
- 77
- 79
- 121
- 16,4
<iframe> öğelerinin geç yüklenmesi, kullanıcı ekran dışındaki iframe'lerin yüklenmesini, kullanıcı yakınlarında kaydırana kadar erteler. Bu sayede veri tasarrufu sağlanır, sayfanın diğer bölümleri daha hızlı yüklenir ve bellek kullanımı azaltılı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östermektedir:
iframe'leri neden geç yüklemeli?
Üçüncü taraf yerleştirmeleri, 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 görüntü alanında hemen görünmez ancak kullanıcılar, sayfayı kaydırmasalar bile her kare için veri ve maliyetli JavaScript indirme maliyeti ödemeye devam eder.
Chrome'un Veri Tasarrufu kullanıcıları için ekran dışı iframe'leri otomatik olarak geç yükleme konusunda yaptığı araştırmaya göre geç yüklenen iframe'ler, ortanca değerde% 2-3 medyan veri tasarrufu, ortanca değerde %1-2 İlk Zengin İçerikli Boyama düşüşü ve 95. yüzdelik dilimde İlk Giriş Gecikmesi (FID) iyileştirmelerinde %2 artış sağlayabilir.
Ekran dışı iframe'lerin geç yüklenmesi, sayfanızın Largest Contentful Paint (LCP) performansını da iyileştirebilir. iframe'ler tüm alt kaynaklarını yüklemek için genellikle önemli 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ışındaki iframe'lerin ve resimlerin yüklenmesini kullanıcılar yaklaşıncaya kadar 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ükleyin.
iframe'lerde loading özelliği şu şekilde kullanı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 istekle açıkça yüklenmesiyle 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ştirmeleri geç yükleme kullanıcı deneyimini nasıl etkiler?
Geç yüklenen iframe'leri varsayılan yapmak, web sitelerini çok daha duyarlı hale getirir. Aşağıdaki örneklerde, medya yerleştirmeleri için Etkileşime Hazır Olma Süresi (TTI) iyileştirmeleri ve veri tasarrufu gösterilmektedir ancak geç yüklenen reklam iframe'leri de benzer avantajlar sağlayabilir.
YouTube
Geç yüklenen YouTube videosu 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>
Instagram yerleştirmeleri, bir işaretleme bloğu ve sayfanıza iframe ekleyen bir komut dosyası sağlar. Bu iframe'in geç yüklenmesi, yerleştirme için gereken tüm komut dosyasını yükleme zorunluluğunu ortadan kaldırır ve ilk yüklemede yaklaşık 100 KB tasarruf sağlayabilir. Bu yerleştirmeler çoğu makalede genellikle görüntü alanının altında gösterildiğinden, iframe geç yükleme için makul bir adaydır.
Spotify
Geç yüklenen Spotify yerleştirmeleri, 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 medya eklentileri
Facebook sosyal medya eklentileri, geliştiricilerin Facebook içeriğini web sayfalarına yerleştirmelerine olanak tanır. Bunların en popüleri olan Beğen eklentisi, sayfayı kaç kullanıcının "beğendiğini" gösteren bir düğmedir. Varsayılan olarak, Facebook JSSDK kullanarak bir web sayfasına Like eklentisini yerleştirmek yaklaşık 215 KB kaynak çeker. Bunların 197 KB'ı JavaScript'tir. Eklenti genellikle bir makalenin sonunda veya bir sayfanın sonuna yakın bir yerde görünür. Bu nedenle, eklenti ekran dışındayken istekli bir şekilde yüklenmesi yetersiz kalabilir.
Mühendis Stoyan Stefanov sayesinde, Facebook'un tüm sosyal eklentileri artık standartlaştırılmış iframe geç yüklemeyi destekliyor.
Eklentilerin data-lazy yapılandırması üzerinden geç yüklemeyi etkinleştiren geliştiriciler, artık kullanıcı sayfayı aşağı kaydırana kadar bu eklentilerin yüklenmesini engelleyebilir. Bu sayede, yerleştirme işlemi ihtiyaç duyan kullanıcılar için çalışmaya devam ederken sayfanın en altına inmeyen kullanıcıların verileri de kaydedilir. Bunun, üretimde standartlaştırılmış iframe geç yüklemesini keşfetmek için birçok yerleştirmenin ilki olduğunu umuyoruz.
Tarayıcılar arası iframe geç yükleme
iframe geç yükleme işlemini, aşamalı bir geliştirme olarak sitenize uygulayabilirsiniz.
iframe'lerde loading=lazy uygulamasını destekleyen tarayıcılar iframe'i geç yükler ve loading özelliğini desteklemeyen tarayıcılar güvenli bir şekilde yoksayar.
Ayrıca, lazysizes JavaScript kitaplığını kullanarak ekran dışı iframe'leri geç yükleyebilirsiniz. Aşağıdaki durumlarda bunu yapmak isteyebilirsiniz:
- Standartlaştırılmış geç yükleme tekliflerinden daha fazla özel geç yükleme eşiği gerektirir
- Kullanıcılara, tarayıcılar arasında tutarlı bir iframe geç yükleme deneyimi sunmak isteyen.
<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 kullanılamadığında geç boyutları getirmek için aşağıdaki kalıbı kullanın:
<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ükleme ile ilgili istisnalar var mı?
Chrome'daki Veri Tasarrufu kullanıcıları için otomatik olarak geç yüklenen iframe'lerin kullanıldığı ilk denemelerde, genellikle iletişim veya analiz için kullanılan gizli iframe'lerle ilgili bir istisna mevcuttu. Bunların geç yüklenmesi önlenmişti ve özelliklerin bozulmaması için her zaman yükleniyordu.
loading özelliği bu buluşsal yöntemleri uygulamaz. Bu yüzden, geliştirici her zaman geç yüklenen öğeleri seçer. loading özelliği, mesafe sınırlarına ve diğer tarayıcı tercihlerine (ör. yazdırma) tabi olarak her zaman dikkate alınmalıdır.
Kaynaklar
Geç yükleme ile ilgili daha fazla fikir için web.dev'in görüntü 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.