SEO Konuları

Lazy Loading

02/05/2022
Lazy Loading

Lazy Loading Nedir?

Basitçe Lazy loading web sayfalarının performansını artırmak için sayfalarda kullanılan görsel, video veya iframe kaynaklarından, görünen ekran dışında kalanlarını geç yükletme tekniğidir.

Web sayfalarında kullanılan kaynakların her biri sayfaya bir yük oluşturur, HTTPArchive’e göre web sitelerindeki en popüler kaynak görsellerdir. Görsel kullanımı fazla olduğu için diğer kaynaklara göre daha fazla bant genişliği kullanırlar.

Geçmiş yıllara göre karşılaştırma yapıldığında gittikçe sayfada kullanılan görsel yük boyutu artıyor.

Görsel Boyutları

Sayfadaki yük miktarı arttıkça da web sayfalarının performansı bu durumdan etkileniyor, sayfanın yüklenme anında sadece ekranda görünen görsellerin hemen yüklenmesi ve görünmeyen görsellerin ertelenmesi hep veri tasarrufuna hem de performans kazancına katkı sağlıyor.

Google’ın Page Speed Insight Aracı ve bazı üçüncü parti araçlar web sitelerinde ekran dışı görsellerin ertelenmesi gerektiğinin uyarısını veriyor.

Ekran Dışı Görselleri Engelle

Google Page Speed Insight üzerinde ekran dışı görselleri ertele uyarısı

Not: Sayfanın ilk yükleme ekranında görünecek olan görsellerin yüklenmesi geciktirilmemelidir, bu görseller geciktirildiğinde sayfanın performansı da düşer. Asıl amaç sayfanın hızlı yüklenmesini sağlamak olduğundan dolayı viewport üzerindeki ilk yüklenecek görseller değil ekran dışında kalan (offscreen) görseller geciktirilmelidir.


Videolar İçin Lazy Loading

Görsel elementleri gibi video elementleri de geciktirilebiliyor. Videolar genellikle <video> etiketiyle yükleniyor. (Bazı durumlarda <img> etiketlerinin kullanıldığı durumlar da oluyor.)

Videoları geciktirmek için video etiketine preload="none" özelliği eklenerek video verisinin önceden yüklenmesi engellenmiş olur. Tarayıcılara göre değişkenlik gösterse de bazı tarayıcılarda preload özelliği varsayılan olarak auto şeklinde belirtildiğinden dolayı video verisi önden yükletilebiliyor, bunun önüne geçilmek için preload özelliğini none olarak işaretleniyor.

Kullanıcı tıklamasıyla başlatılacak olan videolar için video yüklenene kadar önizleme görseli poster özelliği ile belirtiliyor.

<video controls preload="none" poster="preview.jpg">
   <source src="..." type="video/webm">
   <source src="..." type="video/mp4">
</video>

Native Lazy Loading

16 Eylül 2019 tarihinde yayınlanan Chrome 77 güncellemesi ile birlikte gelen native lazy loading loading="lazy" özelliği ile birlikte görseller (<img>) ve iframe (<iframe>) etiketleri geciktirilir.

Bu özellik ile birlikte özel geciktirme kodu yazılmasına veya üçüncü parti bir Javascript kütüphanesinin kullanılmasına gerek kalmıyor.

Native Image Lazy Loading

Native lazy loading kullanım oranının zaman içerisinde arttığı görülüyor.

loading="lazy" özelliği ile uygulanan geciktirme yönteminde kullanıcı Javascript’i pasifleştirse dahi çalışır ve üçüncü parti kütüphanelere gerek yoktur.


Görsellerde Native loading="lazy" Kullanımı

Chrome 77 ile gelen ve sonraki sürümlerde de uygulanan aşağıdaki kullanım ile ekran dışı görseller geciktiriliyor.

<img src="..." alt="..." loading="lazy" width:"..." height:"...">

Loading özelliğinin desteklenen 3 değeri bulunuyor;

  • auto: Lazy-loading özelliğinin hiç eklenmemiş olduğu durum gibi düşünülebilir. İşlevi olmadığı için kullanılmasa da olur.
  • lazy: Kullanıcı kaynağın (görsel, video ve iframe) bulunduğu alana ulaşana kadar kaynak ertelenir.
  • eager: Kaynağın sayfada hangi konumda olduğunu önemsemeden hemen yükler.

NOT: Chromium’da geçerli olmasına rağmen auto özelliğinden whatwg.org üzerinde bahsedilmemiş. Burada geçirilmeden kullanılması pek önerilmiyor, zaten ekstra önemi olan bir özellik değil.

Ayrıca <picture> elementi ile tanımlanmış görsellerde de erteleme özelliği çalışıyor.

<picture>
   <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
   <img src="..." alt="..." loading="lazy" width="..." height="...">
</picture>

Bu yapıda <source> elementinde çekilecek görsel üzerinde geciktirme uygulanması için tek yapılması gereken yine <img> etiketi içerisinde loading="lazy" özelliğini kullanmaktır.

NOT: Native lazy-loading CSS ile kullanılan arkaplan görselleri üzerinde çalışmıyor, yalnızca <img> etiketleri ile çalışıyor.


iFrame Etiketlerinde Native loading="lazy" Kullanımı

iFrame etiketlerinin geciktirilmesi Chromium tabanında kullanılıyor.

<iframe src="..." loading="lazy" width="..." height="...">

iFrame geciktirilmesi görsel geciktirilmelerinden daha farklı çalışıyor. iFrame etiketlerinin gizlenmiş olup olmamasına göre değişkenlik gösteriyor. (Gizlenmiş iFrame etiketleri genelde analytic amaçlı amaçlı kullanılıyor.)

Chrome bir iFrame etiketinin gizlenmiş olup olmadığını belirlerken aşağıdaki kriterlere dikkat ediyor;

  • iFrame etiketinin width ve height değerlerinin 4px’den veya daha küçük olması.
  • Etiket üzerinde display: none ve visibility: hidden CSS’lerinin kullanılması.
  • Ekrande X ve Y pozisyonlarında negatif olarak konumlandırılıp ekran dışına yerleştirilmesi.

Bu durumlar geçerli olduğunda Chrome iFrame etiketinin gizli olduğunu düşünüyor ve çoğu durumda kaynağı geciktirmiyor.


loading="lazy" ile Tarayıcı Uyumluluğu

Chromium destekli tarayıcılar ile uyumludur. Loading özelliği ile uyumlu olmayan tarayıcılar herhangi bir yan etkisi olmadan bu özelliği görmezden gelirler.

Can I Use Loading Lazy Uyumlu Tarayıcılar

  • Firefox sadece görseller için destekliyor.
  • Safari görsel geciktirmelerini destekliyor fakat tarayıcı ayarlarından etkinleştirilmesi gerekiyor.

Not: Bu veriler ileriki tarihlerde değişkenlik gösterebilir, güncel veri için https://caniuse.com/loading-lazy-attr adresini ziyaret edin!


Görsellerin Width ve Height Değerleri Belirtilmeli

Görsellerin genişlikleri ve yükseklikleri açıkça belirtilmedikçe tarayıcılar bu boyutları hemen bilemiyor.

Tarayıcının sayfalara yüklenecek görsellere yer ayırabilmeleri için görsellerin genişlikleri ve yüksekliklerini bilmeleri gerekiyor. Bu yüzden görsellerin width ve height değerleri belirtilmeli.

Görsel boyutları belirtilmediğinde düzen kaymalarına sebep olabilir, bu durum yükleme süresi uzun olan sayfalarda daha çok farkedilir.

<img src="..." alt="..." loading="lazy" width="300" height="200">

Alternatif olarak inline CSS olarak da kullanılabilir fakat inline CSS SEO açısından pek önerilmez.

<img src="..." alt="..." loading="lazy" style="width:300px; height:200px;">

Lazy load kullanımı olsa veya olmasa daha görsellerin boyutlarını belirtmek önemlidir. Lazy loading kullanımında bu durum biraz daha önem kazanır. Width ve height değerlerinin belirtilmesi, modern tarayıcıların sayfadaki görsel boyutlarının da hesaplanmasına olanak sağlar.

Çoğu zaman görsellerin boyutları belirtilmese dahi görsel geciktirmesi çalışır fakat bazı durumlarda çalışmayabilir.

Görsel boyutlarının belirtilmediği bir durumda görsellerin başlangıç boyutları 0’a 0’dır. Bu şekilde boyut belirtilmemiş görsellere sahip bir sayfada tarayıcı tüm içeriğin ekrana sığabileceğini ve kullanıcının tüm içeriği göreceğini hesaplayıp her şeyi yüklemeye karar verebilir.

Görsellerin boyutlarının belirtilmesi kümülatif düzen kaymalarının yaşanmasını azaltır. Eğer bir şekilde görsel boyutları verilemiyorsa lazy loading ağ kaynaklarının tasarrufu ve düzen kayması riski arasında bir denge oluşturabilir.


WordPress Altyapısında Lazy Loading

WordPress altyapısında Lazy Loading özelliği WordPress 5.5 versiyonu ile varsayılan olarak geliyor.


Kaynak

https://web.dev/browser-level-image-lazy-loading/#the-loading-attribute

https://caniuse.com/loading-lazy-attr

https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes