Lazy Load Nedir? Nasıl Kurulur?

Bir web sayfasının dosya boyutu ve buna bağlı olarak ihtiyaç duyduğu bant genişliği kullanıcı deneyimini en çok etkileyen faktörlerden biridir. Buna karşılık genellikle içeriği daha dikkat çeker bir hale getirmek adına kullanılan görseller web sayfalarının dosya boyutunu büyük oranda arttırır. İşte “Lazy Load nedir?” gibi sorulara verilecek cevapların tam da bu noktayla ilgili olduğunu söyleyebiliriz.

Normalde bir ziyaretçinin girmiş olduğu web sayfasını görüntüleyebilmesi için tüm içeriğin inmesini beklemesi gerekir. Ancak bu inen içeriklerin büyük çoğunluğu, içeriklerin esas unsuru olmayan görsellerdir. Bu noktada Lazy Load yöntemi, web sitelerinin bu görseller henüz indirilmeden açılmasına olanak sağlar. Nitekim WordPress platformunun da web sayfanıza bu türden medya dosyalarını entegre etmeyi çok daha pratik bir hale getirdiği göz önüne alınırsa artan dosya boyutları için ayrıca bir çözüm üretmek gerektiği açıktır. Bu doğrultuda WordPress eklentileri arasında ayrıca pek çok Lazy Load eklentisi de mevcuttur. Ancak Lazy Load yöntemini kullanabilmek için bu eklentilerden yararlanmak şart değildir. Eğer WordPress altyapısını kullanan bir web sitesine sahip değilseniz ya da eklenti kurmaksızın Lazy Load yükleme sağlamak istiyorsanız birkaç basit kod satırı yazmanız yeterli olacaktır.

Lazy Load Nasıl Çalışır?

Lazy Load, görünür içeriği yükleyen ve görüntülenmesini sağlayan ancak bu sırada arka planda kalacak olan içerikleri görüntülenme esnasında yüklemeye devam eden bir optimizasyon tekniğidir. Böylelikle web sayfasının açılış hızını arttıran Lazy Load’ın gerek arama motorları gerekse de kullanıcılar için son derece olumlu bir etki yarattığını söylemek mümkündür. Özellikle web sayfanız yüksek çözünürlüklü görseller içeriyorsa böylesine bir optimizasyon, çok daha az bant genişliğiyle web sitenizin hızlı bir biçimde görüntülenmesini sağlayacaktır. Lazy Load tekniğinin çalışma mantığı ise şu şekilde özetlenebilir:

Bir web sayfasına girildiğinde tarayıcı, görselleri ve videoları indirmeksizin web sayfasının diğer kısımlarını oluşturarak ziyaretçinin görüntülemesini sağlar.
Bu doğrultuda, sayfa yüklendiğinde başlangıçta görünür olan içeriğe göre hangi görsellerin öncelikli olarak yükleneceğini belirleyebilmek için JavaScript kullanılır.
Ek görsel ve videoların indirilmesi ve görüntülenmesi ise ziyaretçinin sayfayı aşağı kaydırmasına ve bu içerikleri görüntülemesine kadar ertelenir.
Dolayısıyla ziyaretçi gerçekten ihtiyaç duymadığı sürece ikincil görsellerin indirilmemesi sağlanır. Böylelikle, çok sayıda yüksek çözünürlüklü görsel ya da gömülü video içeren web sayfalarının görüntülenme hızında büyük oranda iyileştirmeler elde edilir.

Lazy Load Eklentileri

WordPress, diğer pek çok web sitesi performans optimizasyonu başlığında olduğu gibi yükleme süreleri konusunda da önemli ölçüde katkılar sunan eklentiler içermektedir. Bu anlamda web sitenize Lazy Load kodlarını otomatik bir biçimde ekleyen ve böylelikle ikincil görsellerin web sitenizin yükleme hızını düşürmesine engel olan WordPress eklentileri de mevcuttur. Ancak bu eklentilere geçmeden önce WordPress üzerinden web sitenize görsel eklerken optimizasyonu göz ardı etmemeniz gerektiğini de hatırlatalım. Sıkıştırılmış dosya boyutları, görsel kalitesinden ciddi anlamda tavizler vermeden dosya boyutlarını minimize etmenizi sağlayacaktır. Bu hatırlatmayı yaptıktan sonra yararlanabileceğiniz bazı Lazy Load eklentilerinden bahsedebiliriz:

A3 Lazy Load:

50 bini aşkın WordPress kullanıcı tarafından yararlanılan bu eklentinin platform üzerindeki değerlendirme puanının da 4.7 gibi oldukça yüksek bir değere sahip olduğunu belirtelim. İndirdikten sonra “Ayarlar” menüsünden etkinleştirebileceğiniz eklenti, yükleme sürelerinde gerçek anlamda dramatik farklar yaratabilmektedir. Bunun en büyük sebebi ise A3 Lazy Load eklentisinin, görselleri tarayıcı ekranında görüntülenecekleri ölçülere göre optimize etmesidir. Böylelikle eklenti, tarayıcı üzerinde çok daha küçük bir yer kaplamasına rağmen bir dosyanın yüksek çözünürlüklerle indirilmesine engel olarak sayfanın yüklenme hızını arttırır.

Eklentiyi İndir: https://wordpress.org/plugins/a3-lazy-load/

Lazy Load:

İkinci seçenek ise WordPress Rocket ekibi tarafından oluşturulan Lazy Load isimli eklentidir. Değerlendirme puanı 4 olan eklentinin halihazırda 10 binden fazla kullanıcıya sahip olduğunu söyleyebilriiz. Ayrıca A3 Lazy Load eklentisinde olduğu gibi ekstra bir yapılandırma ve ayarlar menüsü içermeyen bu eklenti, özellikle daha basit bir yazılım arayanlar için son derece idealdir.

Eklentiyi İndir: https://wordpress.org/plugins/rocket-lazy-load/

Native Lazy Loading:

Üçüncü seçeneğimizin diğerlerine göre önemli bir farklılığa sahip olduğunu baştan belirtelim. Öncelikle WordPress üzerinde yer alan diğer Lazy Load eklentilerini performans açısından ufak yaratmalarından ötürü bu listeye eklemedik. Google tarafından üretilen Native Lazy Load ise WordPress değil tarayıcı tabanlı bir eklentidir. Özellikle son yıllarda Lazy Load eklentisinin tarayıcıların bir özelliği olması gerektiğine dair genel bir kullanıcı isteği olduğunu gözlemlemek mümkündür. Bu talebe uygun olarak Google, Chromium tabanlı tarayıcılarda kullanılabilecek Native Lazy Load eklentisini kullanıcıların hizmetine sundu. Temelde diğer eklentilerle aynı işleve sahip olan eklenti, sadece bu işlevleri geliştirici tarafından değil ziyaretçi tarafından ele alıyor. Aynı zamanda geliştiricilerin web sitelerine eklemesi için ayrı bir sürümü olduğunu da vurgulayalım.

LiteSpeed Cache:

Son olarak WordPress de bulunan LiteSpeed Cache eklentisinin temelde bir Lazy Load eklentisi olmasa da Lazy Load seçeneği de içerdiğini hatırlatalım. Bu özelliği etkinleştirerek basit ama etkili bir çözüme kavuşabilirsiniz.

Eklentiyi İndir: https://wordpress.org/plugins/litespeed-cache/

Lazy Load Nasıl Kullanılır?

Eklenti kullanmadan ya da WordPress harici sitelerde de Lazy Load yönteminden yararlanmak mümkündür. Bunun için eklentilerin JavaScript ve HTML üzerinde otomatik olarak gerçekleştirdiği değişiklikleri kod aracılığıyla yapmanız gerekmektedir. Bu doğrultuda web sitenizde Lazy Load tekniğini kullanmak için şu adımları izleyebilirsiniz:

HTML üzerinde görsel ögelerin tamamına (<img src=””/>) ortak sınıf atayın.
JavaScript üzerinde window.scroll işlevinden yararlanarak işleminize devam edin.
Each fonksiyonunu ortak sınıf üzerinden çalıştırın.
Each içerisinde yer alan this bölümü aracılığıyla offsett işlevinin top parametresinden yararlanın. Bu sayede en üst değeri kolaylıkla öğrenebilmeniz mümkündür.
Son olarak data-src verdiğiniz dizin yolunu src adı verilen özelliğe atın.

Paylaş:

Google Partner Ajansıyız!

Lazy Load Nedir? Nasıl Kurulur?

Lazy Load Nasıl Çalışır?