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.LCP Resmi Geç Yüklendi


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.


Sık Sorulan Sorular

CSS Background özelliği ile eklenen görsellerde loading özelliği çalışır mı?

Hayır loading özelliği yalnızca <img> etiketi ile çalışır.

Viewport (görüntü alanı) üzerinde lazy load kullanımının bir dezavantajı var mı?

Ekranın üstünde bulunan, kullanıcının ilk yükleme esnasında göreceği görselde lazy load kullanılırsa tarayıcı bu görseli hızlı yükleyemez. İlk yükleme ekranındaki görselde lazyload kullanılmamalı.

Lazy load için sitede zaten bir üçüncü parti kütüphane veya script varsa ne olur?

Native lazy load (loading="lazy") kullanımının modern tarayıcılar üzerinde tamamen desteği sağlandığında native lazy load kullanımının script ve kütüphane yerine kullanılması düşünülebilir.

Üçüncü parti kütüphane kullanılmasının bir sebebi loading özelliğinin desteklenmediği tarayıcılarda polyfill (küçük kod parçaları) kullanarak yavaşlatmayı sağlamaktır.

<iframe> etiketlerinde lazy loading destekleniyor mu?

<iframe> etiketlerinde lazy loading özelliği Chrome 77’den beri destekleniyor.

Web sayfasında lazy loading efekti reklamları nasıl etkiler?

Görüntülenen tüm görsel veya iframe elemanları tıpkı diğer görsel ve iframeler gibi geç yüklenir.


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