Resimleri ve <iframe> öğelerini geç yükleme

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ı zamanda loading ö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

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.