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

Resimler ve <iframe> öğeleri genellikle diğer kaynak türlerine kıyasla daha fazla bant genişliği tüketir. <iframe> öğeleri söz konusu olduğunda, içindeki sayfaların yüklenmesi ve oluşturulması oldukça fazla işlem süresi gerektirebilir.

Resimlerin gecikmeli yüklenmesi durumunda, ilk görüntü alanının dışındaki resimlerin yüklenmesi ertelenebilir. Bu, ilk görüntü alanındaki daha kritik kaynaklar için bant genişliği anlaşmazlığını 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 ayrılan bant genişliği, LCP adaylarının daha hızlı yüklenmesine ve boyanmasına yardımcı olabilir.

<iframe> öğeleri söz konusu olduğunda, sayfanın Interaction to Next Paint (INP) metriği, başlangıçta geç yükleyerek iyileştirilebilir. Bunun nedeni, <iframe>'ün 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çalarıyla işlem paylaşmaları yaygındır. Bu durum, sayfaların kullanıcı girişine daha az duyarlı hale geldiği koşullar oluşturabilir.

Bu nedenle, ekran dışındaki resimlerin ve <iframe> öğelerinin yüklenmesini ertelemek, uygulanması gereken bir tekniktir ve performans açısından makul düzeyde iyi bir getiri elde etmek 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 öğe türünü nasıl yavaş yükleyeceğiniz açıklanmaktadır.

loading özelliğiyle resimleri geç yükleme

<img> öğelerine loading özelliği eklenebilir. Bu özellik, tarayıcılara öğelerin nasıl yükleneceğini bildirir:

• "eager", tarayıcıya resmin ilk görüntü alanının dışında olsa bile hemen yüklenmesi gerektiğini bildirir. Bu, loading özelliğinin 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 resmin üzerine geldiğinde resmin yüklenecek kadar büyük olacak şekilde ayarlanır.

<picture> öğesini kullanıyorsanız loading özelliğinin <picture> öğesinin kendisine değil, alt öğesi <img> öğesine uygulanması gerektiğini de belirtmek isteriz. 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ışında konumlandırılmış <img> öğelerine eklemeniz gerekir. Ancak sayfa oluşturulmadan önce bir öğenin görüntü alanına göre tam 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ü cihazlardaki 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ırabilecek daha fazla dikey alan oluşturduğundan mobil cihazlardaki görüntü alanından oldukça farklı olabilir. Dikey yönde kullanılan tabletler de önemli miktarda dikey alan gösterir. Bu alan, bazı masaüstü cihazlardan bile daha fazla olabilir.

Ancak loading="lazy" uygulamaktan kaçınmanız gerektiği oldukça açık olan bazı durumlar vardır. Örneğin, hero resimlerde veya <img> öğelerinin herhangi bir cihazda katlanmanın üstünde ya da düzenin üst kısmında 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 görseller için daha da önemlidir.

Yavaşça yüklenen resimlerin, resmin nihai konumunun görüntüleme alanında olup olmadığını öğrenmek için tarayıcı düzenlemeyi tamamlayana kadar beklemesi gerekir. Bu, görünür görüntü alanındaki bir <img> öğesinin loading="lazy" özelliği varsa yalnızca tüm CSS'lerin indirilmesi, ayrıştırılması ve sayfaya uygulanması sonrasında istendiği anlamına gelir. Bu, ham işaretlemede ön yükleme tarayıcı tarafından keşfedildiği anda getirilmesinin aksinedir.

<img> öğesindeki loading özelliği tüm büyük tarayıcılarda desteklendiğinde, tarayıcıda zaten mevcut olan özellikleri sağlamak için bir sayfaya ek JavaScript eklemek sayfa performansının INP gibi diğer yönlerini etkilediğinden, resimleri yavaş yüklemek için JavaScript'i kullanmaya gerek yoktur.

Resim geç yükleme demosu

<iframe> öğelerini geç yükleme

<iframe> öğelerini, görüntü alanında görünene kadar yavaş 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 temel olarak üst düzey bir doküman içine yüklenen HTML dokümanlarının tamamı olduğundan, özellikle JavaScript olmak üzere önemli sayıda alt kaynak içerebilir. Bu çerçevelerdeki görevler önemli miktarda işleme süresi gerektiriyorsa bu durum sayfanın INP'sini önemli ölçüde etkileyebilir.

Üçüncü taraf yerleşimleri, <iframe> öğeleri için yaygın bir kullanım alanıdır. Örneğin, yerleşik video oynatıcılar veya sosyal medya yayınları genellikle <iframe> öğeleri kullanır ve genellikle önemli sayıda alt kaynak gerektirir. Bu da üst düzey sayfanın kaynakları için bant genişliği çekişmesine neden olabilir. Örneğin, YouTube videosunun yerleştirilmesini gecikmeli yüklemek ilk sayfa yükleme sırasında 500 KiB'den fazla tasarruf sağlar. Facebook beğen düğmesi eklentisini gecikmeli yüklemek ise 200 KiB'den fazla tasarruf sağlar. Bu tasarrufun büyük kısmı JavaScript'ten oluşur.

Her iki durumda da, bir sayfanın ekranın alt kısmında <iframe> varsa ve sayfanın en başında yüklenmesi kritik değilse bunu geç yüklemeyi kesinlikle düşünmeniz gerekir. Bu, kullanıcı deneyimini önemli ölçüde iyileştirebilir.

<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> öğeleriyle aynıdır:

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

Geç yükleme iframe'leri demosu

Dış cepheler

Bir yerleşik içeriği sayfa yüklenirken hemen yüklemek yerine, kullanıcı etkileşimine yanıt olarak gerektiğinde yükleyebilirsiniz. Bu işlem, kullanıcı etkileşime geçene kadar bir resim veya başka bir uygun HTML öğesi gösterilerek yapılabilir. Kullanıcı öğeyle etkileşime geçtikten sonra öğeyi üçüncü taraf yerleşimiyle değiştirebilirsiniz. Bu teknik, cephe olarak bilinir.

Cephelerin yaygın kullanım alanlarından biri, üçüncü taraf hizmetlerinden gelen video yerleşimleridir. Bu yerleşimlerde, video içeriğinin yanı sıra JavaScript gibi birçok ek ve potansiyel olarak pahalı alt kaynak yüklenebilir. Böyle bir durumda, videonun otomatik olarak oynatılması için geçerli bir neden yoksa video yerleşimleri, oynatmadan önce kullanıcının oynat düğmesini tıklayarak videoyla etkileşim kurmasını gerektirir.

Bu, video yerleşimine görsel olarak benzer bir statik 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ştirmeyle 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ükleme hızını iyileştirmenin yanı sıra, kullanıcı videoyu hiç oynatmazsa videoyu yayınlamak için gereken kaynakların hiç indirilmemesi de bu özelliğin önemli avantajlarından biridir. Bu, kullanıcının ihtiyaçları hakkında hatalı varsayımlarda bulunmadan yalnızca gerçekten istediğini indirmesini sağladığı için iyi bir modeldir.

Chat widget'ları, cephe tekniği için mükemmel bir kullanım alanıdır. Çoğu sohbet widget'ı, sayfa yükleme hızını ve kullanıcı girişine yanıt verme hızını olumsuz yönde etkileyebilecek önemli miktarda JavaScript indirir. Herhangi bir öğeyi önceden yüklerken olduğu gibi, maliyet yükleme sırasında oluşur. Ancak sohbet widget'ı söz konusu olduğunda, her kullanıcı bu widget ile etkileşime geçmek istemez.

Öte yandan, hafif bileşen sayesinde üçüncü taraf "Sohbet başlat" düğmesini sahte bir düğmeyle değiştirebilirsiniz. Kullanıcı, işaretçiyi üzerinde makul bir süre boyunca tutarak veya tıklayarak widget'la anlamlı bir şekilde etkileşime geçtiğinde, kullanıcı ihtiyaç duyduğunda gerçek ve işlevsel sohbet widget'ı yerine yerleştirilir.

Kendi ön yüzlerinizi oluşturmanız mümkün olsa da YouTube videoları için lite-youtube-embed, Vimeo videoları için lite-vimeo-embed ve sohbet widget'ları için React Live Chat Loader gibi daha popüler üçüncü taraflar için açık kaynak seçenekleri mevcuttur.

JavaScript yavaş yükleme kitaplıkları

<video> öğelerini, <video> öğesi poster resimlerini, CSS background-image mülkü tarafından yüklenen resimleri veya desteklenmeyen diğer öğeleri yavaş yüklemeniz gerekiyorsa bunu lazysizes veya yall.js gibi JavaScript tabanlı bir yavaş yükleme çözümüyle yapabilirsiniz. Bu tür kaynakların yavaş yüklenmesi tarayıcı düzeyinde bir özellik değildir.

Özellikle <video> öğelerini ses parçası olmadan otomatik oynatma ve döngüde oynatma, animasyonlu GIF'lerden çok daha verimli bir alternatiftir. Animasyonlu GIF'ler, eşdeğer görsel kaliteye sahip bir video kaynağından genellikle birkaç kat daha büyük olabilir. Buna rağmen bu videolar bant genişliği açısından önemli olabilir. Bu nedenle, videoları yavaş yüklemek, bant genişliği israfını azaltmak için çok yararlı olabilecek ek bir optimizasyondur.

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

Bir animasyonlu GIF'in yerini alan bir videonuz olduğunu ve bunu JavaScript çözümüyle yavaş yüklemek istediğinizi varsayalım. Bu, yall.js ile mümkündür. Bunun için aşağıdaki işaretleme kalıbını kullanın:

<!-- 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üklenip çalıştırıldıktan sonra, kullanıcı görüntü alanına kaydırana kadar video yüklenmez. Bu noktada, <video> öğesinin alt <source> öğelerindeki data-src özellikleri src özellikleriyle değiştirilir. Bu işlem, videonun indirilmesi ve otomatik olarak oynatılması için bir istek gönderir.

Bilginizi test etme

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

Resim ve <iframe> öğelerini gecikmeli yükleme hakkında bilgi sahibi olduğunuza göre, kullanıcılarınızın ihtiyaçlarına saygı duyarken sayfaların daha hızlı yüklenmesini sağlamak için iyi bir konumdasınız. Bununla birlikte, kaynakların spekülatif olarak yüklenmesi istenebilecek durumlar vardır. Sonraki modülde ön getirme ve ön oluşturma hakkında bilgi edinin. Ayrıca, bu tekniklerin dikkatli bir şekilde kullanıldığında sonraki sayfaları önceden yükleyerek sonraki sayfalara geçişleri önemli ölçüde hızlandırabileceğini öğrenin.