Tarayıcı Desteği
- .
- .
- .
- .
<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.
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>
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.
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.