Görüntüler ve <iframe> öğeleri genellikle diğer kaynak türlerinden daha fazla bant genişliği tüketir. <iframe> öğeleri söz konusu olduğunda, içlerindeki sayfaların yüklenmesi ve oluşturulması için oldukça fazla ek işlem süresi gerekebilir.
Görüntülerin geç yüklenmesi durumunda, ilk görüntü alanının dışındaki görüntülerin yüklenmesini ertelemek, ilk görüntü alanındaki daha kritik kaynaklar için bant genişliği çakışmasını azaltmaya yardımcı olabilir. Bu, ağ bağlantılarının zayıf olduğu bazı durumlarda bir sayfanın Largest Contentful Paint (LCP) özelliğini iyileştirebilir ve yeniden tahsis edilen bant genişliğinin, LCP adaylarının daha hızlı yüklenmesine ve boyanmasına yardımcı olabilir.
<iframe> öğeleri söz konusu olduğunda, sayfanın Sonraki Boyama ile Etkileşim
(INP) özelliği başlangıç sırasında bunları geç yükleyerek iyileştirilebilir. Bunun nedeni, <iframe> öğesinin kendi alt kaynaklarının bulunduğu tamamen ayrı bir HTML belgesi olmasıdır.
<iframe> öğeleri ayrı bir işlemde çalıştırılabilse de, bir süreci diğer iş parçacıklarıyla paylaşmaları yaygın değildir. Bu durum, sayfaların kullanıcı girişine daha az yanıt verdiği durumlara neden olabilir.
Bu nedenle, ekran dışı resimlerin ve <iframe> öğelerinin yüklenmesini ertelemek, izlenmeye değer bir tekniktir ve performans açısından makul düzeyde iyi bir getiri elde etmek üzere oldukça az çaba gerektirir. Bu modülde, sayfanın kritik başlatma döneminde daha hızlı ve daha iyi bir kullanıcı deneyimi için bu iki öğe türünün geç yüklenmesiyle ilgili bilgiler yer almaktadır.
Resimleri loading özelliğiyle geç yükleyin
Tarayıcılara nasıl yüklenmeleri gerektiğini bildirmek için <img> öğelerine loading özelliği eklenebilir:
"eager", tarayıcıya resmin ilk görüntü alanının dışında olsa bile hemen yüklenmesi gerektiğini bildirir. Bu, aynı zamandaloadingözelliği için varsayılan değerdir."lazy", bir resmin yüklenmesini, görünür görüntü alanından belirli bir uzaklıkta olana kadar erteler. 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 olarak ayarlanır.
Ayrıca, <picture> öğesini kullanıyorsanız loading özelliğinin yine de <picture> öğesinin kendisine değil, alt <img> öğesine uygulanması gerektiğini de belirtmek gerekir. Bunun nedeni, <picture> öğesinin, farklı resim adaylarını işaret eden ek <source> öğeleri içeren bir kapsayıcı olması ve tarayıcının seçtiği adayın doğrudan alt <img> öğesine uygulanmasıdır.
İlk görüntü alanındaki resimleri geç yüklemeyin
loading="lazy" özelliğini yalnızca ilk görüntü alanının dışına konumlandırılmış <img> öğelerine eklemelisiniz. Bununla birlikte, sayfa oluşturulmadan önce görüntü alanı içindeki bir öğenin tam konumunu bilmek karmaşık olabilir. Farklı görüntü alanı boyutları, en boy oranları ve cihazlar göz önünde bulundurulmalıdır.
Örneğin, masaüstü görüntü alanı, fiziksel olarak daha küçük bir cihazın ilk görüntü alanında görünmeyen resimleri ilk görüntü alanına sığdırabilen daha fazla dikey alan oluşturduğundan, cep telefonundaki görüntü alanından oldukça farklı olabilir. Dikey yönde kullanılan tabletler de bazı masaüstü cihazlardan daha fazla olmak üzere, önemli miktarda dikey alan gösterir.
Bununla birlikte, loading="lazy" uygulamasından kaçınmanın oldukça açık olduğu bazı durumlar vardır. Örneğin, lokomotif resim söz konusu olduğunda veya <img> öğelerinin ekranın üst kısmında ya da herhangi bir cihazda düzenin üst kısmına yakın olabileceği durumlarda <img> öğelerinde loading="lazy" özelliğini kesinlikle çıkarmanız gerekir. Bu, LCP adayı olabilecek resimler için daha da önemlidir.
Geç yüklenen görüntülerin, resmin son konumunun görüntü alanı içinde olup olmadığını anlamak için tarayıcının düzeni bitirmesini beklemesi gerekir. Diğer bir deyişle, görünür görüntü alanındaki bir <img> öğesinin loading="lazy" özelliği varsa bu öğenin ham işaretlemede önceden yükleme tarayıcısı tarafından keşfedildiğinde getirilmesi yerine, bu özelliğin sadece tüm CSS indirildikten, ayrıştırıldıktan ve sayfaya uygulandıktan sonra istenir.
<img> öğesindeki loading özelliği tüm önemli tarayıcılarda desteklendiğinden, resimleri geç yüklemek için JavaScript'in kullanılmasına gerek yoktur. Çünkü tarayıcının sağladığı özellikler sunmak için sayfaya ilave JavaScript eklemek, sayfa performansının INP gibi diğer yönlerini etkiler.
Görüntü geç yükleme demosu
<iframe> öğelerini geç yükle
<iframe> öğelerini görüntü alanında görünene kadar geç yüklemek, önemli verileri kaydedebilir ve üst düzey sayfanın yüklenmesi için gereken kritik kaynakların yüklenmesini iyileştirebilir. Buna ek olarak, <iframe> öğeleri aslında üst düzey bir belgede yüklenen HTML dokümanlarının tamamı olduğundan, çok sayıda alt kaynak (özellikle JavaScript) içerebilir. Bu çerçeveler içindeki görevler önemli ölçüde işlem süresi gerektiriyorsa bir sayfanın INP'sini önemli ölçüde etkileyebilirler.
Üçü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 çok sayıda alt kaynak gerektirir. Bu da üst düzey sayfanın kaynakları için bant genişliği çakışmasına yol açabilir. Örneğin, bir YouTube videosunun yerleştirmesinin geç yüklenmesi ilk sayfa yükleme sırasında 500 KiB'den fazla tasarruf ederken, Facebook Beğen düğmesi eklentisinin geç yüklenmesi 200 KiB'den fazla tasarruf sağlar. Bunların çoğu JavaScript'tir.
Her iki durumda da, bir sayfada ekranın alt kısmında <iframe> olduğunda, önden yüklemek çok önemli değilse geç yükleme işlemini, kullanıcı deneyimini önemli ölçüde iyileştirebileceği için kesinlikle değerlendirmelisiniz.
<iframe> öğeleri için loading özelliği
<iframe> öğelerinde loading özelliği tüm önemli tarayıcılarda de desteklenir. 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>öğ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 mesafe içine girinceye kadar erteler.
iframe'leri geç yükleme demosu
Dış cepheler
Bir yerleştirmeyi sayfa yüklenirken hemen yüklemek yerine, kullanıcı etkileşimine yanıt olarak isteğe bağlı olarak yükleyebilirsiniz. Bu, kullanıcı etkileşimde bulununcaya kadar bir resim veya başka bir uygun HTML öğesi göstererek yapılabilir. Kullanıcı öğeyle etkileşimde bulunduğunda bunu üçüncü taraf yerleştirmesiyle değiştirebilirsiniz. Bu teknik, cephe olarak bilinir.
Cephelerin yaygın bir kullanım alanı, üçüncü taraf hizmetlerinden video yerleştirmedir. Yerleştirme işlemi, video içeriğine ek olarak JavaScript gibi birçok ek ve potansiyel olarak pahalı alt kaynağın da yüklenmesini içerebilir. Böyle bir durumda (videonun otomatik olarak oynatılması için geçerli bir ihtiyaç olmadığı sürece), video yerleştirmeleri kullanıcının oynat düğmesini tıklayarak oynatmadan önce ilgili video ile etkileşimde bulunmasını gerektirir.
Bu, video yerleştirmesine görsel olarak benzeyen statik bir resim göstermek ve işlem sırasında önemli miktarda bant genişliği tasarrufu sağlamak için iyi bir fırsattır. Kullanıcı resmi tıkladığında, resim üçüncü taraf <iframe> öğesinin HTML'sini ve alt kaynaklarını tetikleyen gerçek <iframe> yerleştirmesiyle değiştirilir.
İlk sayfa yüklemesini iyileştirmenin yanı sıra, bir diğer önemli avantaj da kullanıcının videoyu hiç oynatmaması durumunda yayınlamak için gereken kaynakların hiçbir zaman indirilmemesidir. Bu iyi bir kalıptır. Çünkü kullanıcının ihtiyaçları hakkında hatalı olabilecek varsayımlarda bulunmadan yalnızca gerçekten istediklerini indirmesini sağlar.
Cephe tekniğinin mükemmel kullanım alanlarından biri de sohbet widget'larıdır. Çoğu sohbet widget'ı, sayfa yüklemeyi ve kullanıcı girişine yanıt vermeyi olumsuz etkileyebilecek önemli miktarda JavaScript indirir. Herhangi bir şeyin önceden yüklenmesinde olduğu gibi, maliyet yükleme sırasında ortaya çıkar ancak bir sohbet widget'ında her kullanıcı hiçbir zaman widget'la etkileşimde bulunmayı amaçlamaz.
Öte yandan, hafif cephe ile üçüncü taraf "Sohbet Başlat" düğmesini sahte bir düğmeyle değiştirmek mümkündür. Kullanıcı, widget ile anlamlı bir şekilde etkileşimde bulunduğunda (örneğin, bir işaretçiyi makul bir süre boyunca üzerinde tuttuğunda veya bir tıklamayla) gerçek ve işlevsel sohbet widget'ı, kullanıcı ihtiyaç duyduğunda yerine yerleştirilir.
Kendi cephenizi oluşturmanız elbette mümkün olsa da daha popüler üçüncü taraflar için kullanılabilecek açık kaynak seçenekleri vardır. Örneğin, YouTube videoları için lite-youtube-embed, Vimeo videoları için lite-vimeo-embed ve sohbet widget'ları için React Canlı Sohbet Yükleyici.
JavaScript geç yükleme kitaplıkları
<video> öğelerini, <video> öğesini poster resimlerini, CSS background-image özelliği tarafından yüklenen resimleri veya diğer desteklenmeyen öğeleri geç yüklemeniz gerekiyorsa lazysizes veya yall.js gibi JavaScript tabanlı bir geç yükleme çözümü kullanabilirsiniz. Bu kaynakların geç yüklenmesi, tarayıcı düzeyinde bir özellik değildir.
Özellikle, ses parçası olmadan otomatik oynatılan ve döngüye alınan <video> öğeleri, animasyonlu GIF'lerin kullanımına kıyasla çok daha verimli bir alternatiftir. Bu, genellikle eşdeğer görsel kaliteye sahip bir video kaynağından birkaç kat daha büyük olabilir. Buna rağmen, bu videolar bant genişliği açısından yine de önemli olabilir. Bu nedenle, geç yükleme, boşa bant genişliğinin azaltılmasına yardımcı olabilecek ek bir optimizasyon işlevi görür.
Bu kitaplıkların çoğu, bir öğenin kullanıcının görüntü alanına girmesini algılamak için Intersection Observer API'yi (ve buna ek olarak bir sayfanın HTML'si ilk yüklemeden sonra değişirse Mutation Observer API'yi) kullanarak çalışı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) doğru özellikle (ör. src) değiştirir.
Animasyonlu GIF'in yerine geçen bir videonuz olduğunu ve bu videoyu bir JavaScript çözümüyle geç yüklemek istediğinizi varsayalım. Aşağıdaki işaretleme kalıbıyla bu, yall.js ile mümkündür:
<!-- 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, uygun olan tüm HTML öğelerini "lazy" sınıfıyla gözlemler. yall.js yüklenip sayfada yürütüldükten sonra, kullanıcı tarafından görüntü alanına girene kadar video yüklenmez. Bu noktada, <video> öğesinin alt <source> öğelerindeki data-src özellikleri, videoyu indirme ve otomatik olarak oynatmaya başlama isteği gönderen src özellikleriyle değiştirilir.
Bilginizi test etme
Hem <img> hem de <iframe> öğeleri için loading özelliğinin varsayılan değeri aşağıdakilerden hangisidir?
"eager""lazy"JavaScript tabanlı geç yükleme çözümlerinin kullanılması ne zaman mantıklıdır?
<video> öğesinin poster resmini geç yüklemek için otomatik oynatılan videolar gibi loading özelliğinin desteklenmediği kaynaklar için.
Dış cephe ne zaman faydalı bir tekniktir?
Sıradaki: Önceden getirme ve önceden oluşturma
Artık geç yüklenen resimleri ve <iframe> öğelerini yönetebildiğinize göre, kullanıcılarınızın ihtiyaçlarını gözetirken sayfaların daha hızlı yüklenmesini sağlamak için uygun bir konumdasınız. Bununla birlikte, kaynakların spekülatif olarak yüklenmesinin istenebileceği durumlar da vardır. Bir sonraki modülde, önceden getirme ve önceden oluşturma hakkında bilgi edineceksiniz. Ayrıca, bu tekniklerin (dikkatli bir şekilde kullanıldığında) sonraki sayfaları önceden yükleyerek gezinmeyi önemli ölçüde nasıl hızlandırabileceğini öğrenebilirsiniz.