Resimler ve <iframe>
öğeleri genellikle diğer türlere kıyasla daha fazla bant genişliği kullanır
kaynaklar. <iframe>
öğeleri söz konusu olduğunda, yeterli miktarda fazladan işleme
, içlerindeki sayfaların yüklenmesi ve oluşturulmasında zaman alabilir.
Resimlerin geç yüklenmesi durumunda, yavaş yüklenen resimlerin yüklenmesini dışındaki alanlar, bant genişliği çakışmasını azaltmaya yardımcı olabilir. daha kritik kaynaklar için. Bu da sayfanın Largest Contentful Paint (LCP) değeri, ağ bağlantılarının zayıftır ve ayrılan bant genişliği, LCP adaylarının yüklenip daha hızlı boyayın.
<iframe>
öğeleri söz konusu olduğunda, bir sayfanın Sonraki Boyamayla Etkileşimi
(INP) özelliği, başlatma sırasında geç yüklenmesiyle iyileştirilebilir. Bunun nedeni,
<iframe>
, kendi alt kaynakları olan tamamen ayrı bir HTML dokümanıdır.
<iframe>
öğeleri, ayrı bir işlemde çalıştırılabilir olsa da yaygın bir durum değildir.
diğer ileti dizileriyle paylaşmalarını sağlar. Bu da
Bu durumda sayfalar, kullanıcı girişine daha az duyarlı hale gelir.
Dolayısıyla, ekran dışı resimlerin ve <iframe>
öğelerinin yüklenmesini ertelemek
makul düzeyde iyi bir sonuç elde etmek için çok az çaba gerektirir ve
iyi performansa sahip olacaktır. Bu modülde, bu araçların geç yüklenmesiyle ilgili bilgiler
ve sayfa içeriği oynatılırken daha hızlı ve daha iyi bir kullanıcı deneyimi
kritik başlatma süresini uzatır.
Resimleri loading
özelliğine sahip geç yükleyin
loading
özelliği, tarayıcılara bu öğelerin nasıl uygulandığını belirtmek için <img>
öğelerine eklenebilir
yüklenmeleri gerekir:
"eager"
, tarayıcıya resmin hemen yüklenmesi gerektiğini bildirir. bile olsa ilk görüntü alanının dışında olsa bile Bu, aynı zamandaloading
özelliği için değer ekleyebilirsiniz."lazy"
, resim şu noktadan belirli bir mesafe içinde kalana kadar resmin yüklenmesini erteler: görülebilir görüntü alanı. Bu mesafe tarayıcıya göre değişir, ancak genellikle kullanıcı sayfayı kaydırdığında resmin yükleneceği kadar büyük olmalıdır.
<picture>
öğesini kullanıyorsanız
loading
özelliği yine de alt <img>
öğesine uygulanmalıdır, değil
<picture>
öğesinin kendisidir. Bunun nedeni, <picture>
öğesinin
farklı alanlara işaret eden ek <source>
öğeleri içeren kapsayıcı
resim adayları ve tarayıcının seçtiği aday doğrudan uygulanır
alt <img>
öğesine eklemelidir.
İlk görüntü alanındaki resimleri geç yüklemeyin
loading="lazy"
özelliğini, yalnızca şuna sahip <img>
öğelerine eklemeniz gerekir:
ilk görüntü alanının dışına konumlandırılacaktır. Ancak, zaman çizelgesinde
bir öğenin sayfa açılmadan önce görüntü alanındaki göreli konumu
oluşturulur. Farklı görüntü alanı boyutları, en boy oranları ve cihazlar,
dikkate alınır.
Örneğin, bir masaüstü görüntü alanı, tek bir penceredeki görüntü alanından Cep telefonuna sığabilecek daha fazla dikey alan oluşturduğu için bir reklamın ilk görüntü alanında görünmeyen, gerçekleşebilir. Dikey yönde kullanılan tabletler de önemli miktarda dikey alan var. Bu, bazı masaüstü cihazlar.
Bununla birlikte, belirli trafik koşullarının karşılanması konusunda
loading="lazy"
uygulanıyor. Örneğin,
Lokomotif resimlerde <img>
öğelerinden loading="lazy"
özelliği,
veya <img>
öğelerinin,
herhangi bir cihazda ekranın üst kısmına yakın bir yerde
katlanabilir. Bu, şu an daha da önemli
resimlere öncelik verin.
Geç yüklenen görüntülerin, tarayıcının şurada düzeni tamamlamasını beklemesi gerekir:
resmin son konumunun görüntü alanı içinde olup olmadığını öğrenmek için kullanılır. Bunun anlamı şudur:
görünür görüntü alanındaki bir <img>
öğesi loading="lazy"
değerine sahipse
özelliğiyle birlikte, yalnızca tüm CSS indirildikten, ayrıştırıldıktan ve ayrıştırıldıktan sonra istenir
uygulanır; bunun aksine, kullanıcı tarafından keşfedildiğinde getirilmez
ham işaretlemedeki önceden yükleme tarayıcısıdır.
<img>
öğesindeki loading
özelliği, ana makinelerin
tarayıcıların resimlerinin geç yüklenmesi için JavaScript kullanılması gerekmez.
Tarayıcının sağladığı işlevleri sağlamak için sayfaya fazladan JavaScript
sayfa performansının INP gibi diğer yönlerini etkiler.
Resim geç yükleme demosu
<iframe>
öğelerini geç yükle
<iframe>
öğelerinin görüntü alanında görünür olana kadar geç yüklenmesi durumunda
önemli ölçüde veri sağlar ve gerekli olan kritik kaynakların yüklenmesini
üst düzey sayfanın yüklenmesidir. Ayrıca, <iframe>
öğeleri
üst düzey bir dokümana yüklenen HTML dokümanlarının tamamını
başta JavaScript olmak üzere, Çevik Manifesto’da özetlenen
Bir sayfanın INP'sini önemli ölçüde etkileyebilir (bu çerçeveler içindeki görevler için
uzun süre gerektirir.
Üçüncü taraf yerleştirmeleri, <iframe>
öğeleri için yaygın bir kullanım alanıdır. Örneğin,
yerleştirilmiş video oynatıcılar veya sosyal medya yayınları genellikle <iframe>
öğelerini kullanır.
çoğu zaman çok sayıda alt kaynak gerektirirler. Aynı zamanda
üst düzey sayfanın kaynakları için bant genişliği çakışmasına neden olur. Kullanıcı
Örneğin, bir YouTube videosunun yerleştirmenin geç yüklenmesi, yükleme işlemi sırasında 500 KiB'tan fazla tasarruf sağlar.
Facebook Beğen düğmesi eklentisini geç yüklerken ilk sayfa yükleme
200 KiB'tan fazla tasarruf sağlar ve bunların çoğu JavaScript'tir.
Her iki durumda da, bir sayfada ekranın alt kısmında <iframe>
olduğunda
en baştan yüklemek kritik değilse geç yükleme yöntemini de
kullanıcı deneyimini önemli ölçüde iyileştirebilir.
<iframe>
öğeleri için loading
özelliği
<iframe>
öğelerinde loading
özelliği de tüm ana kaynaklarda desteklenir
izin verir. loading
özelliğinin değerleri ve davranışları
loading
özelliğini kullanan <img>
öğeleriyle aynıdır:
"eager"
, varsayılan değerdir. Tarayıcıya<iframe>
öğesini yüklemesi için bilgi verir öğesinin HTML'sini ve alt kaynaklarını ayarlar."lazy"
,<iframe>
öğesinin HTML'sinin ve alt kaynaklarının yüklenmesini erteler belirli bir mesafe içinde kalana kadar görüntüler.
iframe'lerin geç yüklenmesi demosu
Dış cepheler
Yerleştirilmiş öğeyi sayfa yükleme sırasında hemen yüklemek yerine, yanıt olarak ne kadar talep gördüğü Bunun için bir resim veya başka bir uygun HTML öğesi ekleyebilirsiniz. Bir öğeyle etkileşimde bulunursa bunu üçüncü taraf yerleştirme ile değiştirebilirsiniz. Bu teknik, cephe olarak bilinir.
Cepheler için yaygın bir kullanım alanı, üçüncü taraf hizmetlerden video yerleştirmeleridir; birçok ek ve potansiyel olarak pahalı öğelerin yüklenmesini JavaScript gibi alt kaynaklar hazırlar. Böyle bir durumda bir videonun otomatik olarak oynatılması için geçerli bir ihtiyaç olmadığı sürece) Kullanıcının oynatmadan önce oynat düğmesini tıklayarak etkileşimde bulunmasını gerektirir. düğmesini tıklayın.
Bu, görsel olarak benzer, statik bir resim göstermek için çok iyi bir fırsattır.
ve bu süreçte bant genişliği tasarrufu sağlar. Kullanıcı
resmi tıkladığında bu resmin yerine, gerçek <iframe>
yerleştirmesi gelir.
üçüncü taraf <iframe>
öğesinin HTML'sini ve alt kaynaklarını tetikler
indiriliyor.
İlk sayfa yüklemenin iyileştirilmesine ek olarak, bir başka önemli avantaj da Kullanıcı videoyu hiçbir zaman oynatmaz, videoyu yayınlamak için gereken kaynaklar hiçbir zaman indirildi. Bu iyi bir kalıptır çünkü kullanıcının yalnızca belirli içerikleri indirmesini içeriği hakkında hatalı varsayımlarda bulunmadan gerçekten üç önemli adım var.
Sohbet widget'ları, hafif bileşen tekniği için bir başka harika kullanım alanıdır. En sık sohbet widget'ları, spam barındıran önemli miktarda JavaScript indirir. Sayfa yüklemesini ve kullanıcı girişine duyarlılığı etkiler. Herhangi bir şey yüklenirken olduğu gibi maliyet, yükleme anında alınır. Ancak sohbet widget'ı söz konusu olduğunda hiçbir zaman etkileşime geçmeyi amaçlamaz.
Öte yandan, üçüncü taraf "Başlangıç" bileşeninin Sohbet et" olduğunu görebilirsiniz. Kullanıcı önemli bir şekilde etkileşime girdiğinde (örneğin, bir işaretçiyi makul bir süre boyunca üzerinde tutmak) veya yalnızca bir tıklamayla, asıl, işlevsel sohbet widget'ı yerine gerekir.
Kendi cephelerinizi oluşturmanız kesinlikle mümkün olsa da,
lite-youtube-embed
gibi daha popüler üçüncü taraflar için kullanılabilen seçenekler
YouTube videoları için, Vimeo videoları için lite-vimeo-embed
ve React Canlı Sohbet'e
Sohbet widget'ları için yükleyici.
JavaScript geç yükleme kitaplıkları
<video>
öğelerini, <video>
öğesi poster
resimlerini,
CSS background-image
özelliği tarafından yüklenen resimler veya desteklenmeyen
veya
lazysizes veya yall.js
tarayıcı düzeyinde sunulan bir özelliktir.
Özellikle, ses parçası olmadan <video>
öğelerini otomatik oynatma ve döngüye alma
animasyonlu GIF'lerden çok daha verimli bir alternatiftir.
genellikle eşdeğer görsel bir video kaynağından birkaç kat daha büyüktür
kalitedir. Yine de bu videolar bant genişliği açısından önemli olabilir.
Bu yüzden geç yüklemek, performansı artırmanızın
boşa giden bant genişliğini azaltır.
Bu kitaplıkların çoğu Intersection Observer API'yi kullanarak çalışır ve
sonrasında bir sayfanın HTML'si değişirse Mutation Observer API'sini
ilk yük (kullanıcının görüntü alanına bir öğe girdiğinde bu durumu tanımak için). Öğe
resmin göründüğünden veya görüntü alanına yaklaşıyorsa JavaScript kitaplığı
Standart olmayan özelliğin (genellikle data-src
veya benzer bir özellik) yerini alır.
src
gibi doğru özellikle değiştirin.
Animasyonlu GIF'in yerini alan bir videonuz olduğunu ancak bunu geç yüklemek istediğinizi varsayalım JavaScript çözümüyle başlar. Bu, yall.js ile aşağıdaki gibi mümkündür: işaretleme kalıbı:
<!-- The autoplay, loop, muted, and playsinline attributes are to
ensure the video can autoplay without user intervention. -->
<video class="lazy" autoplay loop muted playsinline width="320" height="480">
<source data-src="video.webm" type="video/webm">
<source data-src="video.mp4" type="video/mp4">
</video>
Varsayılan olarak yall.js,
"lazy"
yall.js sayfası yüklendikten ve sayfada yürütüldüğünde,
kullanıcı sayfayı görüntü alanına kaydırana kadar yüklenir. Bu noktada data-src
<video>
öğesinin alt <source>
öğelerindeki özellikler değiştirildi
src
özelliklerine ekleyerek videoyu indirme isteği gönderir ve
otomatik olarak çalmaya başlar.
Bilginizi test etme
loading
özelliğinin varsayılan değeri budur.
hem <img>
hem de <iframe>
öğesi mi var?
"lazy"
"eager"
JavaScript tabanlı geç yükleme çözümlerinin kullanımı ne zaman makuldür?
loading
özelliğinin olmadığı kaynaklar için
olduğu gibi otomatik oynatılan videolardaki gibi
animasyonlu resimler kullanma veya bir <video>
öğesinin
poster resmi.
Dış cephe ne zaman faydalı bir tekniktir?
Sıradaki: Önceden getirme ve önceden işleme
Artık geç yüklenen resimleri ve <iframe>
öğelerini öğrendiğinize göre
çalışırken sayfaların daha hızlı yüklenmesini sağlamak için iyi bir konumdasınızdır.
dikkate almanızı öneririz. Ancak bazı durumlarda
tercih edilir. Bir sonraki modülde,
önceden getirme ve önceden işleme hakkında bilgi edinip bu tekniklerin
dikkatli bir şekilde—sayfa içeriği yüklenerek sonraki sayfalara gezinmeyi önemli ölçüde
çok önemlidir.