Lazy Load kelimesinin Türkçe olarak karşılığı ‘’Tembel Yükleme’’ demektir. İnternet sitenizde bulunan görselleri, sunucuya yük olmayacak biçimde ve ziyaretçilerinizi rahatsız etmeyecek düzeyde geç yüklemesine Lazy Load denilmektedir. Sitenizde ki görsellerinizi bu şekilde ayarlamanız, genel olarak sitenizin açılma hızınızı arttırmasının yanı sıra arama motoru sonuç sayfalarında (SERP) sıralama kazanmanıza fayda sağlayacaktır. Geç yüklenen sayfaları kullanıcılar sevmez ve sitenizi hemen terk ederler. Arama motorları her zaman kullanıcı odaklı olduklarından dolayı, sizin sitenizden daha hızlı açılan siteleri üst sıralara yerleştirir.
Kullanıcıya tam olarak istediği içeriği sağlıyor
olabilirsiniz. Belki o kullanıcı sitenizde uzun süre kalarak gezinmeye devam
etmek isteyebilir lakin sayfalarınız açılmazsa bu durumun hiçbir önemi kalmaz.
Bu tarz site ayarlarını manuel olarak kendiniz ayarlayabilir veya WordPress
tarzı altyapı kullanıyorsanız eklentiler sayesinde kolayca düzenleyebilirsiniz.
Lazy Load Ne İşe Yarar?
Lazy Load, sadece görsel optimizasyonu olarak
tanımlanmamalıdır. İnternet sitenizin kod yapısı da dâhil olmak üzere birçok
alanı genel olarak kapsar. Sizlere en basitinden anlatmak gerekirse, sadece
görselleriniz üzerinde ayarlamalar yapmanız sayesinde sunucu tepki süreniz
minimuma iner ve dolaylı yoldan kullanıcı deneyiminizi arttırır. Dev arama
motoru Google’ın her zaman web sitesi sahiplerine ‘’İnternet sitenizi, arama
motorunu kandırmaya yönelik değil, kullanıcının ihtiyacına yönelik düzenleyin’’
demiştir.
Resimler İçin Manuel Lazy Load Nasıl Yapılır?
İnternet sitenizde manuel olarak Lazy Load ayarlamaları
yapmak istiyorsanız, temel olarak JS (JavaScript) komutlarını kullanmanız
gerektiğini bilmelisiniz. JS kütüphanelerin neredeyse tamamında Lazy Load
yapmanız mümkündür. İnternet siteniz eğer özel yazılım ise çok kolay ve hızlı
bir biçimde bu ayarlamaları yapabilirsiniz. Sizlere bu örneğimizde ‘’lazysizes’’
isimi JavaScript kütüphanesini kullanarak anlatımda bulunacağız.
<script src="lazysizes.min.js"
async></script>
Sizlere yukarıda belirtmiş olduğumuz JS kodunu kopyalayarak,
internet sitenizin ‘’body’’ bölümüne yapıştırmanız gerekmektedir. Bu adımı
gerçekleştirdikten sonra genel site yapınız itibari ile sitenizde bulunan bütün
<img> etiketlerinde genel düzenleme yapmanız gerekir.
<img src="resimler/ornek.jpg" alt="ornek">
Yukarıda ki kod muhtemelen sizin şuan ki görselleriniz için
geçerli olan koddur. Bu kodlar her web sitesi için temel görsel komutlarıdır.
<img data-src="resimler/ornek.jpg"
class="lazyload" alt="ornek">
Yukarıda belirtmiş olduğumuz kod ise resimlerinizde Lazy
Load ayarlarını yapmanız için düzenlenen koddur. Genel site itibari ile bütün
görsellerinize bu kodu, kendi internet sitenize göre düzenleyerek
kullanabilirsiniz. Bu ayarları yaptıktan sonra internet sitenizi ziyaret eden
kullanıcının ekranında açılan sekmede ki ilk resim görünecektir. Diğer resimler
ziyaretçilerin ekranlarını aşağıya doğru kaydırması ile beraber yüklenecektir.