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

SEO - 04 Eylül 2022

SEO

Arama Motoru Optimizasyonu (SEO)

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?" ve "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ı, web sayfanızın mobil ve masaüstü cihazlarda performansını artırmak için size bazı önerilerde bulunmaktadır. Bu öneriler arasında bazen “kritik olmayan” (non-critical) veya “ekran dışı görseller”in (off-screen) ertelenmesi gerektiğine dair uyarılar sayılabilir. 

İşte PageSpeed Insights tam bu noktada 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.

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

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

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 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 sayfanın geç yüklenmesine neden olmasını önlemek ve performansı iyileştirmek için lazy load kullanılır. Lazy load kullanılmasındaki amaç:

• Bir web sayfası yüklenirken gereksiz yere veri tüketilmesini ve kullanıcının belki de hiç görmeyeceği görsellerin indirilmesini önlemek.
• Web sayfasında yer alan her kaynak için sayfa yüklenirken tekrardan sunucu isteğinde bulunulmasını ve site performanının düşmesini önlemek. 
• Tarayıcının kod içeriğini anlaması, çözmesi ve içeriğe görseli yerleştirmesi için gereken donanımsal kaynakların boşa harcanmasını önlemek.

Lazy load kullanmanın avantajları:

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

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 ö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ı anlamına gelir. Modern tarayıcılar, chromium destekli olan Chrome, FireFox, Edge ve 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.

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

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 ya da image elementi ile yüklenir. Her iki görsel yükleme yöntemi için lazy load özelliğinin nasıl uygulandığını inceleyelim.

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

HTML’de satır içi olarak geçen elemente lazy load özelliği eklenirken, modern tarayıcı düzeyinde lazy load ya da lazy load için JavaScript kütüphanelerinden faydalanabilirsiniz. Eski tarayıcılar için ise JavaScript kütüphanelerinden faydalanabilirsiniz.

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

Bazı web sitelerinin bazı görselleri CSS yardımıyla arka plan resmi olarak kullanılır. Bu durum SEO açısından pek tavsiye edilmemektedir ve SEO çalışmalarında dikkat edilmesi gereken bir durumdur. Bu durum için en iyi çözüm arka plan resminin yerine, sırası gelince orjinal resim ile yer değiştirmek üzere, boyut olarak çok daha küçük bir görselin yüklenmesidir.

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. 

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

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

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 sağlanacaktır. 

Lazy Load Nasıl Kurulur?

Lazy load kurulumu web sitenizin alt yapısına göre değişiklik göstermektedir. WordPress web sitesine sahipseniz, ekran dışındaki resimleri ertelemek için Lazy Load'u aşağıdaki adımları izleyerek kurabilirsiniz.

• WordPress yönetim paneline giriş yapın,
• Eklentiler > Yeni Ekle butonuna tıklayın,
• "Eklentileri ara..." alanına "Native Lazyload" yazın
• Eklentiyi yüklemek için "Şimdi Yükle" butonuna tıklayın,
• Kurulum tamamlandıktan sonra, "Etkinleştir" düğmesine tıklayın.

İşte kurulum bu kadar kolay! Wordpress web sitesini optimize etmek için kurduğunuz bu eklenti, sizin yerine her şeyi otomatik olarak halledecektir.

Web sitesi CMS altyapılı değilse, lazyload kurulumu yapmak için sitenizin etiketleri arasında kullanmak istediğiniz lazyload kütüphanesinin JS dosya URL'ini ekleyiniz. Daha sonrasında görselinizin class'ına "lazyload" yazmanız yeterlidir.

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.