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

bookmark_border Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Resimler ve <iframe> öğeleri genellikle diğer kaynak türlerine kıyasla daha fazla bant genişliği kullanır. <iframe> öğelerinde, sayfaların yüklenmesi ve oluşturulması için makul miktarda ek işlem süresi gerekebilir.

Gecikmeli yüklenen resimler söz konusu olduğunda, ilk görüntü alanının dışındaki resimlerin yüklenmesini ertelemek, ilk görüntü alanındaki daha kritik kaynaklar için bant genişliği çekişmesini azaltmaya yardımcı olabilir. Bu, ağ bağlantılarının zayıf olduğu bazı durumlarda sayfanın Largest Contentful Paint (LCP) değerini iyileştirebilir. Yeniden tahsis edilen bant genişliği, LCP adaylarının daha hızlı yüklenmesine ve oluşturulmasına yardımcı olabilir.

<iframe> öğeleri söz konusu olduğunda, bir sayfanın Interaction to Next Paint (INP) değeri, başlangıç sırasında bu öğeler geç yüklenerek iyileştirilebilir. Bunun nedeni, bir <iframe> öğesinin kendi alt kaynaklarına sahip tamamen ayrı bir HTML dokümanı olmasıdır. <iframe> öğeleri ayrı bir işlemde çalıştırılabilse de diğer iş parçacıklarıyla bir işlemi paylaşmaları yaygın bir durumdur. Bu durum, sayfaların kullanıcı girişine daha az yanıt vermesine neden olabilir.

Bu nedenle, ekran dışındaki resimlerin ve <iframe> öğelerinin yüklenmesini ertelemek, takip etmeye değer bir tekniktir ve performans açısından makul ölçüde iyi bir geri dönüş için oldukça az çaba gerektirir. Bu modülde, sayfanın kritik başlangıç döneminde daha hızlı ve daha iyi bir kullanıcı deneyimi için bu iki tür öğenin geç yüklenmesi açıklanmaktadır.

loading özelliğiyle resimleri geç yükleme

Tarayıcılara nasıl yükleneceklerini bildirmek için loading özelliği, <img> öğelerine eklenebilir:

• "eager", tarayıcıya, ilk görüntü alanının dışında olsa bile resmin hemen yüklenmesi gerektiğini bildirir. Bu, loading özelliğinin de varsayılan değeridir.
• "lazy", bir resmin yüklenmesini, görünür görüntü alanından belirli bir mesafeye gelene kadar erteler. Bu mesafe tarayıcıya göre değişir ancak genellikle kullanıcı kaydırarak resme ulaştığında resmin yüklenmesini sağlayacak kadar büyük olacak şekilde ayarlanır.

Ayrıca, <picture> öğesini kullanıyorsanız loading özelliğinin <picture> öğesine değil alt <img> öğesine uygulanması gerektiğini de unutmayın. Bunun nedeni, <picture> öğesinin farklı resim adaylarını gösteren ek <source> öğelerini içeren bir kapsayıcı olması ve tarayıcının seçtiği adayın doğrudan alt öğesi olan <img> öğesine uygulanmasıdır.

İlk görüntü alanındaki resimleri geç yüklemeyin

Yalnızca ilk görüntü alanının dışında konumlandırılmış <img> öğelerine loading="lazy" özelliğini eklemelisiniz. Ancak sayfa oluşturulmadan önce bir öğenin görüntü alanı içindeki kesin konumunu bilmek karmaşık olabilir. Farklı görüntü alanı boyutları, en boy oranları ve cihazlar dikkate alınmalıdır.

Örneğin, masaüstü görünüm alanı, mobil telefondaki görünüm alanından oldukça farklı olabilir. Masaüstü görünüm alanı, daha fazla dikey alan oluşturur. Bu sayede, başlangıçtaki görünüm alanına sığmayan resimler, fiziksel olarak daha küçük bir cihazın başlangıçtaki görünüm alanına sığabilir. Dikey yönde kullanılan tabletlerde de önemli miktarda dikey alan gösterilir. Bu alan, bazı masaüstü cihazlardan bile daha fazla olabilir.

Ancak loading="lazy" uygulamamanız gerektiğinin açıkça belli olduğu bazı durumlar vardır. Örneğin, önemli resimler veya <img> öğelerinin katlanma çizgisinin üzerinde ya da herhangi bir cihazdaki düzenin en üstünde görünme olasılığının yüksek olduğu diğer resim kullanım alanlarında loading="lazy" özelliğini <img> öğelerinden kesinlikle çıkarmanız gerekir. Bu, LCP adayı olma olasılığı yüksek olan resimler için daha da önemlidir.

Tembel yüklenen resimlerin, son konumlarının görünüm alanında olup olmadığını belirlemek için tarayıcının düzeni tamamlamasını beklemesi gerekir. Bu, görünür görünüm alanındaki bir <img> öğesinde loading="lazy" özelliği varsa bu öğenin yalnızca tüm CSS'ler indirilip ayrıştırıldıktan ve sayfaya uygulandıktan sonra istendiği anlamına gelir. Bu öğe, önceden yükleme tarayıcısı tarafından ham işaretlemede keşfedilir keşfedilmez getirilmez.

<img> öğesindeki loading özelliği tüm büyük tarayıcılarda desteklendiğinden resimleri geç yüklemek için JavaScript kullanmaya gerek yoktur. Tarayıcının zaten sağladığı özellikleri sunmak için sayfaya ek JavaScript eklemek, sayfa performansının diğer yönlerini (ör. INP) etkiler.

Resim geç yükleme demosu

<iframe> öğelerini geç yükleme

<iframe> öğelerini görünür hale gelene kadar geç yüklemek, önemli miktarda veri tasarrufu sağlayabilir ve üst düzey sayfanın yüklenmesi için gereken kritik kaynakların yüklenmesini iyileştirebilir. Ayrıca, <iframe> öğeleri temelde üst düzey bir dokümana yüklenen HTML dokümanlarının tamamı olduğundan önemli sayıda alt kaynak (özellikle JavaScript) içerebilir. Bu da söz konusu çerçevelerdeki görevlerin önemli bir işlem süresi gerektirmesi durumunda sayfanın INP'sini önemli ölçüde etkileyebilir.

Üçü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 gönderileri genellikle <iframe> öğelerini kullanır ve genellikle önemli sayıda alt kaynak gerektirir. Bu durum, üst düzey sayfanın kaynakları için bant genişliği anlaşmazlığına da yol açabilir. Örneğin, bir YouTube videosunun yerleştirilmiş halinin geç yüklenmesi, sayfanın ilk yüklenmesi sırasında 500 KiB'den fazla veri tasarrufu sağlar. Facebook Beğen düğmesi eklentisinin geç yüklenmesi ise 200 KiB'den fazla veri tasarrufu sağlar. Bu verilerin çoğu JavaScript'tir.

Her iki durumda da, bir sayfada ekranın alt kısmında bir <iframe> olduğunda, önceden yüklenmesi kritik değilse geç yüklemeyi kesinlikle düşünmelisiniz. Aksi takdirde, kullanıcı deneyimi önemli ölçüde iyileşebilir.

<iframe> öğeleri için loading özelliği

<iframe> öğelerindeki loading özelliği de tüm büyük tarayıcılarda desteklenir. loading özelliğinin değerleri ve davranışları, loading özelliğini kullanan <img> öğelerindekiyle aynıdır:

• "eager" varsayılan değerdir. Tarayıcıya, <iframe> öğesinin HTML'sini ve alt kaynaklarını hemen yüklemesini bildirir.
• "lazy", <iframe> öğesinin HTML'sinin ve alt kaynaklarının yüklenmesini, görüntü alanından önceden tanımlanmış bir mesafeye gelene kadar erteler.

iframe'leri geç yükleme demosu

Dış cepheler

Yerleştirilmiş bir öğeyi sayfa yükleme sırasında hemen yüklemek yerine, kullanıcı etkileşimine yanıt olarak isteğe bağlı olarak yükleyebilirsiniz. Bu işlem, kullanıcı etkileşimde bulunana kadar bir resim veya başka bir uygun HTML öğesi gösterilerek yapılabilir. Kullanıcı öğeyle etkileşime girdikten sonra öğeyi üçüncü taraf yerleştirmesiyle değiştirebilirsiniz. Bu teknik, cephe olarak bilinir.

Cephelerin yaygın bir kullanım alanı, üçüncü taraf hizmetlerinden video yerleştirmeleridir. Bu yerleştirmeler, video içeriğinin yanı sıra JavaScript gibi birçok ek ve potansiyel olarak maliyetli alt kaynağın yüklenmesini içerebilir. Bu gibi durumlarda (videonun otomatik oynatılması için meşru bir neden olmadığı sürece) video yerleştirmeleri, oynatılmadan önce kullanıcının oynat düğmesini tıklayarak etkileşimde bulunmasını gerektirir.

Bu, video yerleştirmeyle görsel olarak benzer olan statik bir resim göstermek ve bu süreçte önemli ölçüde bant genişliği tasarrufu sağlamak için mükemmel bir fırsattır. Kullanıcı resmi tıkladığında resim, gerçek <iframe> yerleştirme koduyla değiştirilir. Bu işlem, üçüncü taraf <iframe> öğesinin HTML'sinin ve alt kaynaklarının indirilmeye başlamasını tetikler.

İlk sayfa yüklemesini iyileştirmenin yanı sıra, kullanıcının videoyu hiç oynatmaması durumunda videoyu sunmak için gereken kaynakların indirilmemesi de bu özelliğin önemli bir avantajıdır. Bu, kullanıcının ihtiyaçları hakkında hatalı olabilecek varsayımlarda bulunmadan kullanıcının yalnızca gerçekten istediği şeyi indirmesini sağladığı için iyi bir kalıptır.

Sohbet widget'ları, cephe tekniğinin bir başka mükemmel kullanım alanıdır. Çoğu sohbet widget'ı, sayfa yükleme hızını ve kullanıcı girişine yanıt verme durumunu olumsuz etkileyebilecek önemli miktarda JavaScript indirir. Herhangi bir şeyi önceden yüklemede olduğu gibi, maliyet yükleme sırasında oluşur. Ancak sohbet widget'ı söz konusu olduğunda, her kullanıcı widget'la etkileşim kurmak istemez.

Öte yandan, hafif bileşen kullanıldığında üçüncü taraf "Sohbeti Başlat" düğmesi sahte bir düğmeyle değiştirilebilir. Kullanıcı, widget'la anlamlı bir şekilde etkileşime girdiğinde (ör. makul bir süre boyunca üzerine fareyle geldiğinde veya tıkladığında) gerçek ve işlevsel sohbet widget'ı, kullanıcının ihtiyacı olduğunda yerine yerleştirilir.

Kendi cephelerinizi oluşturmanız kesinlikle mümkün olsa da daha popüler üçüncü taraflar için açık kaynaklı seçenekler mevcuttur. Örneğin, YouTube videoları için lite-youtube-embed, Vimeo videoları için lite-vimeo-embed ve sohbet widget'ları için React Live Chat Loader.

JavaScript tembel yükleme kitaplıkları

<video> öğeyi, <video> öğesi poster resimlerini, CSS background-image özelliğiyle yüklenen resimleri veya desteklenmeyen diğer öğeleri geç yüklemeniz gerekiyorsa bu kaynakların geç yüklenmesi tarayıcı düzeyinde bir özellik olmadığından lazysizes veya yall.js gibi JavaScript tabanlı bir geç yükleme çözümüyle yapabilirsiniz.

Özellikle ses parçası içermeyen <video> öğelerin otomatik oynatılması ve döngüye alınması, animasyonlu GIF'ler kullanmaktan çok daha verimli bir alternatiftir. Animasyonlu GIF'ler, eşdeğer görsel kalitede bir video kaynağının boyutundan genellikle birkaç kat daha büyük olabilir. Bununla birlikte, bu videolar bant genişliği açısından önemli olabilir. Bu nedenle, videoları geç yüklemek, boşa harcanan bant genişliğini azaltmak için önemli bir optimizasyon yöntemidir.

Bu kitaplıkların çoğu, bir öğenin kullanıcının görüntü alanına ne zaman girdiğini anlamak için Intersection Observer API'yi kullanır. Ayrıca, bir sayfanın HTML'si ilk yüklemeden sonra değişirse Mutation Observer API'yi de kullanır. Resim görünür durumdaysa veya görüntü alanına yaklaşıyorsa JavaScript kitaplığı, standart olmayan özelliği (genellikle data-src veya benzer bir özellik) src gibi doğru özelliklerle değiştirir.

Animasyonlu bir GIF'in yerine geçen bir videonuz olduğunu ancak bu videoyu JavaScript çözümüyle geç yüklemek istediğinizi varsayalım. Bu, aşağıdaki işaretleme kalıbıyla yall.js kullanılarak yapılabilir:

<!-- 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" sınıfına sahip tüm uygun HTML öğelerini gözlemler. yall.js sayfaya yüklendikten ve sayfada yürütüldükten sonra video, kullanıcı tarafından görüntü alanına kaydırılana kadar yüklenmez. Bu noktada, <video> öğesinin alt <source> öğelerindeki data-src özellikleri, src özellikleriyle değiştirilir. Bu işlem, videoyu indirme ve otomatik olarak oynatmaya başlama isteği gönderir.

Bilginizi test etme

Sıradaki: Önceden getirme ve önceden işleme

Resimlerin ve <iframe> öğelerinin geç yüklenmesi konusunda bilgi sahibi olduğunuz için artık sayfaların daha hızlı yüklenmesini sağlarken kullanıcılarınızın ihtiyaçlarını da karşılayabilirsiniz. Ancak, kaynakların spekülatif olarak yüklenmesinin istenebileceği durumlar vardır. Bir sonraki modülde, önceden getirme ve önceden oluşturma hakkında bilgi edinin. Bu tekniklerin dikkatli kullanıldığında, sonraki sayfalara geçişleri hızlandırmak için sayfaları önceden yükleyerek nasıl önemli ölçüde hızlandırabileceğini öğrenin.