Lazy Load: Web Sitesinin Yüklenme Performansı Artırın

Web sitesinin yüklenme hızını ve performansını artırmak için lazy load kullanılması gerektiğini biliyor musunuz?

Muhittin Bilgin
Muhittin Bilgin - 23 Haziran, 2022 - 6 min read
Lazy Load: Web Sitesinin Yüklenme Performansı Artırın

Web sitesinin yüklenme hızını artırmak için, Google tarafından tavsiye edilen ve mutlaka kullanılması gereken lazy-loading konusunu ele alacağız. Site performansını artırmak için, sayfanın içerisinde yer alan resimlere ve/veya videolara uygulanacak yöntem sayesinde, ilk sayfa yükünü (initial page payload) ve yüklenme süresini (load time) azaltan lazy load özelliği kullanılmalıdır.

Bu içerikte lazy load nedir? avantajları ve dezavantajları nelerdir? neden lazy load tercih edilmeli ve nasıl uygulanabilir? gibi pek çok soruya yanıt bulacaksınız.

Lazy Load Nedir?

Türkçe karşılığı tembel yükleme olan lazy load, web sayfası yüklenirken kritik olmayan görsellerin ve videoların sonradan yüklenmesini sağlayan teknik bir yöntemdir. Kritik olmayan kaynaklar ihtiyaç olduğu zaman ya da sırası geldiğinde yüklenir. Tembel yükleme isteğe bağlı olarak yapılmakta ve doğru kullanıldığında web sayfasına olumsuz etkisi bulunmamaktadır.

PageSpeed Insights aracını kullandıysanız, web sayfanızın mobil ve masaüstü cihazlarda performansını artırmak için size bazı önerilerde bulunmaktadır. PageSpeed Insights, analiz ettiğiniz sayfa için performansını artırmanın adına size bazı fırsat önerileri sunmaktadır. Bu öneriler arasında bazen “kritik olmayan” (non-critical) veya “ekran dışı görseller” (off-screen) ertelenmesi gerektiğine dair uyarılarda bulunmaktadır. 

PageSpeed Lazy Load Uyarısı

İşte tam bu noktada PageSpeed Insights, web sitesinde yer alan görsellere lazy load tekniğinin kullanılması gerektiğini belirtmektedir.

Herhangi bir web sitesini ziyaret ettiğinizde aşağıda yer alan olaylar ile karşılaştıysanız yüksek ihtimalle lazy load kullanılan bir sayfayı ziyaret etmişsinizdir. Lazy load kullanımı belirtileri:

  • Ziyaret ettiğiniz sayfada, kaydırma yaptıkça içerik geliyorsa,
  • Ekranı kaydırdıkça görüntünün netleşmesi ve gerçek görüntünün yüklenmesi,
  • İsteğe bağlı tembel yükleme kullanılan görselin, sırası geldiğinde aniden ortaya çıkar.

Resimlerin geç yüklenme tekniğini özellikle başta e-ticaret web siteleri olmak üzere tüm web siteleri kullanmaktadır. 

Medium lazy loading kullanımı

Medium web sitesinde, yer tutucu tekniği kullanılmakta, bu teknikte asıl görselin yerine boyut olarak daha düşük bir görsel ekleniyor ve ekran kaydırmaya başladığında  asıl görsel yerini alıyor.

SEO İpucu: Lazy-loading özelliğinin, ekranın açıldığında yer alan ilk görsellere değil, ekranın dışında yer alan görünmeyen görsellere uygulanması gerekmektedir. 

Web Sayfalarında Neden Lazy Load Kullanılır?

Web sayfalarında yer alan resimler ya da videoların sayfa yüklenirken, sitenin geç yüklenmesini önlemek ve performansı iyileştirmek için lazy load kullanılır. Lazy load kullanılmasındaki amaç:

  •  Lazy load kullanılmadığında, bir web sayfası yüklenirken gereksiz yere veri tüketimi ve belkide kullanıcının hiç görmeyeceği görsellerin indirilmesine neden oluyor.
  • Sunucu isteklerinde azalma olacaktır. Web sayfasında yer alan her kaynak için sayfa yüklenirken boşuna sunucu isteğinde bulunulmaktadır. Bu durumda site performansını olumsuz etkilemektedir.
  • Web sayfasında lazy-loading kullanılmadığı takdirde, tarayıcının kod içeriğini anlaması, çözmesi ve içerikte görseli yerleştirmesi için donanım anlamında kaynakları boşa harcamaktadır.

Web sitesinin performansını iyileştirmek adına, görsellere ve videolara tembel yüklenmesi sağlanarak istek sayısında, kaynak tüketimi ve veri boyutu indirimlerinin azalması performansı olumlu etkileyecek faktörler arasında yer almaktadır.

Lazy load kullanmanın avantajları:

  • Web sitenizde görsel içeriklerinizi çevrimiçi olarak optimize etmek istediğinizde, tembel yükleme kullanımı, bellek kullanımı azaltır ve iyi bir kullanıcı deneyimi yaşatmaktadır.
  • Web sayfasında gereksiz yere kod yürütülmesinden kaçınılır. Sebebi ise içerik sırası geldiğinde yüklenecek olmasıdır.
  • Web site sahipleri için sunucuya yapılan istek azaldığından kaynak maliyetini azaltabilir.

Lazy load kullanmanın dezavantajları:

  • Web sitesi kurulduktan sonra görsellere lazy-loading uygulamak için eklenecek kod satırları kodu yorumlarken kafanızı karıştırabilir.
  • Yanlış kullanımı, içeriğinizin arama motorlarında yer almasını engelleyebilir.

Resimlere ve Videolara Lazy Load Nasıl Uygulanır?

Web sayfasında yer alan görsellere lazy-loading (tembel yükleme) özelliğinin uygulanması için farklı yöntemler bulunmaktadır. Modern web tarayıcıları, web sayfalarında yer alan görsellere ve videolara tarayıcı düzeyinde lazy-loading işlemi uygulanır. Eski tarayıcılarda lazy load tekniğini kullanmak için yardımcı javascript kütüphaneleri bulunmaktadır.

Tarayıcı Düzeyinde Tembel Yükleme Nedir?

Web sayfaları için tarayıcı düzeyinde tembel yükleme, modern tarayıcıların arka planda yerleşik olarak tembel yüklenme özelliğinin kodlanmış olmasıdır. Modern tarayıcılar, chromium destekli olan Chrome, FireFox, Edge, Opera gibi tarayıcılarda aktif olarak kullanılmaktadır.

Örneğin, modern tarayıcılarda görünüm alanının altında yer alan görsellerin daha düşük bir önceliğe sahip olarak yüklenmesini sağlamak için, img ve iframe elementlerine loading özelliğini eklemeniz yeterli olacaktır.

<img src="gorsel.png" loading="lazy" alt="…" width="1024" height="1024">

Yukarıda yer alan loading özelliği ile modern tarayıcılar için web sitenizin kaynak kodunda ekstradan bir kütüphane eklemenize gerek kalmıyor.

Tarayıcı düzeyinde lazy load kullanımı

Resimler İçin Lazy Load Kullanımı

HTML’de görüntülerin web sayfasında yer alması için iki yöntem kullanılır. Resimler web sayfalarına CSS ile background-image olarak ya da <img> elementi ile yüklenir. Her iki görsel yükleme yöntemi için lazy load özelliğini nasıl uygulandığını inceleyelim.

İmage Elementi İçin Lazy Load Kullanımı

HTML’de satır içi olarak geçen <img> elementine lazy load özelliği eklenirken, modern tarayıcı düzeyinde lazy load ya da lazy load için JavaScript kütüphanelerinden faydalanabilirsiniz. Tarayıcı düzeyinde yükleme için örneğimizi bir önceki konu başlığında yer verdik. Eski tarayıcılar için ise JavaScript kütüphanelerinden faydalanabilirsiniz.

Background İmage İçin Lazy Load Kullanımı

Web sitelerinin bazılarında bazı görselleri CSS yardımıyla, arka plan resmi olarak kullanılır. Bu durum SEO açısından pek tavsiye edilmeyen durum olsada, yine dolaylı yoldan SEO çalışmalarında dikkat edilmesi gereken bir durum oluyor. 

Bu durum için en iyi çözüm, arka plan resminin sırası gelene kadar yerine, boyut olarak çok daha küçük bir görselin yüklenmelidir. Sırası gelince orjinal resim ile yer değiştirecektir.

Videolar İçin Lazy Load Kullanımı

Görsel medyalarda olduğu gibi video içeren web sayfalarında da videoların geç yüklenmesi sağlanabilir.  Bu yöntem için en iyi kullanım yöntemi, videoların kullanıcılar tarafından aktif edilmesidir. Örneğin, videolar için lazy load kullanımı:

<video controls preload="none" poster="one-does-not-simply-placeholder.jpg">

 <source src="one-does-not-simply.webm" type="video/webm">

 <source src="one-does-not-simply.mp4" type="video/mp4">

</video>

Burada dikkat edilmesi gereken <video> elementinde kullanılan “preload” özelliğidir. Preload özelliği video verisinin önceden yüklenmesi önlemektedir.

Google’ın Lazy Load Bakış Açısı

Google, web sayfasında ekran dışında kalan görsellerin geç yüklenmesi konusunda, lazy-loading kullanılmasının performans ve kullanıcı deneyimi artırma konusunda en iyi uygulamalar arasında yer aldığını söylüyor. Fakat bu tekniğin yanlış kullanıldığında içeriğin Google’da gizlenmesine sebep olacağını söylemektedir.

Googlebot’un web sayfasındaki tüm içeriği görebilmesi için, içeriğin görüntülenme sırası ekrana geldiğinden emin olunuz. 

Wordpress Web Siteleri İçin Lazy Load Eklenti Önerisi

Wordpress web site sahipleri için Google tarafından yayınlanan native lazy load (yerel tembel yüklenme) eklentisini kullanmanızı tavsiye ederiz. Eklentiyi web sitenize ekledikten sonra ek bir işlem yapmanıza gerek yoktur. Web sitenizde yer alan tüm görsellere ve iframe’lere otomatik olarak loading=”lazy” özniteliği eklenecektir.

Bu basit ve kullanışlı eklenti sayesinde, Googlebot’un web sitenizde yer alan ve lazy-loading uygulanmış görsellerin sorunsuz olarak dizine eklenmesi konusunda problem yaratmayacaktır.

Sonuç

Lazy load özelliği dikkatli ve doğru kullanıldığı zaman, lazy-loading uygulanmış resimler ve videolar, web sayfasının ilk yüklenme süresinde ve sayfa yüklenirken indirilen dosya boyutunu azaltabilir. 

Web sitesini ziyaret eden kullanıcılar, içerikte bazen alt sayfalara kadar kaydırmadan siteyi terk edebilir. Tembel yüklenme kullanılmayan sitelerde ekranın aşağısında  kalan görsellerde indirildiğinden, gerek ağ isteği ve kaynak kullanımına yol açar.

Web sayfasında çok fazla görsel yer alıyorsa, web sitenizin PageSpeed Insights tarafında performansını iyileştirmek için lazy load kullanımı oldukça iyi bir tekniktir.

Lazy load nedir?  konusunda yayınladığımız blog içeriğimizi faydalı bulduysanız, diğer insanlarında erişebilmesi için sosyal medya hesaplarınızda paylaşarak bizlere destek olabilirsiniz.