Google Page Speed'te resimleri arka planda yüklemesini erteleyerek hızlandırma (lazy load)

erencan

Administrator
Yönetici
Administrator
6 May 2020
59
35
18
izmir
Google PageSpeed Insights hız testi aracında web sitenizi test ederken şu hatayı almış olabilirsiniz. “Ekran dışındaki resimleri ertele” (Offscreen Images).

Alt açıklama olarak ise “Etkileşimli hale gelme süresini kısaltmak için ekran dışındaki ve gizli resimleri, tüm kritik kaynakların yüklenmesi bittikten sonra gecikmeli olarak yükleme seçeneğini değerlendirin.” yazmakta.

Bu uyarının açıklamasını şöyle yapabiliriz; herhangi bir websiteye girdikten sonra karşınıza gelen belirli ölçüde bir görüntü vardır. Bu görüntü genellikle şunlardan oluşur, logo, menüler ve makale başlığı. Siteden siteye değişiklik göstermekle birlikte genelde bu şekilde karşılaşırız.

Makalenin geri kalanını görmek için aşağı inmemiz gerekir. Makalenin içerisinde veya altında bulunan resimleri, ancak aşağı inersek görürüz. O halde, bu siteye giriş yaptıktan sonra makale içerisinde bulunan resimleri siteye giriş yaparken yüklemenin bir anlamı yok.

İşte Google’ın anlatmak istediği de bu. Görseller, yük bakımından websiteniz de en çok yer alan nesnelerdir. O halde görsellerin yüklenme işlemini ertelersek, websitemizi ilk açışımızda sunucuya binen istek sayısı azalacak ve websitemiz daha hızlı açılacaktır. Aynı yöntemi Css ve Js dosyalarınız için de kullanabilirsiniz.

Peki görselleri nasıl erteleyeceğiz? Bunun için sizin yerinize bu işi yapacak Lazy Load (Tembel Yük) sisteminden ve eklentilerinden faydalanacağız.

Lazy Load Nedir?
Lazy Load kısaca ekranın alt kısmında görünen içeriğin indirilmesini ve oluşturulmasını geciktiren bir optimizasyon tekniğidir.

Lazy Load Nasıl Çalışır?
  • Tarayıcılar, görselleri ve videoları indirmeden önce web sayfasına istek gönderir.
  • JavaScript, hangi resimlerin indirileceğini ve hangi videoların önceden yükleneceğini belirlemek için kullanılır. Bu görüntüler ve videolar indirilir ve uygun şekilde önceden yüklenir.
  • Diğer görsellerin indirilmesi ve görüntülenmesi, bir site ziyaretçisi sayfayı aşağı kaydırıp içerik görüntülenene kadar ertelenir.
Sonuçta, görüntüler gerçekten indirilmeden yüklenemez. Bu, çok sayıda yüksek çözünürlüklü görüntü ve gömülü video içeren siteler için performansta önemli bir artış sağlayabilir.

Lazy Load Eklentisinin Avantajı
Lazy Load eklentisi temel avantajı zaten bellidir; Daha hızlı yükleme süreleri. Sayfa ağırlığınızın büyük bir bölümünü ortadan kaldırabildiğiniz için doğal olarak tarayıcıda çok daha hızlı görünecektir.

Bunun güzel bir yan etkisi de ziyaretçilerinizi kayda değer bir bant genişliğinden kurtarmanızdır. Özellikle mobil cihazlarında veri bağlantısını kullananlar size borçlu olacaktır 🙂

Lazy Load Eklentisinin Dezavantajı
Siteniz hızlı yüklendiği için sayfalarınızı çok hızlı bir şekilde aşağı kaydırırken, görselleriniz hemen yüklenmeyeceği için, sayfa içeriğinin farklı görünmesine sebep olur, bu da can sıkıcı olabilir.

WordPress Lazy Load Eklentileri
Lazy Load tekniğini WordPress’e manuel olarak eklemek mümkün olsa da daha kolay olan alternatif, aşağıdaki eklentilerden birini kullanmaktır.

WordPress eklenti dizininde görüntülerin ve videoların yüklenmesini ertelemek için kullanılabilecek
Linke erişmek için lütfen Giriş yap veya üye ol.
var. Fakat biz bunlar arasında ki en iyi eklentileri seçip sunucağız.

1. Lazy Load by WP Rocket
Wprocket Lazy Load

Linke erişmek için lütfen Giriş yap veya üye ol.
eklentisi, bir web sayfasındaki görüntüleri yalnızca ziyaretçiler tarafından görülebildiklerinde gösteren ücretsiz bir eklentidir. Bu, HTTP istekleri mekanizmasının azalmasına ve dolayısıyla yükleme süresinin iyileştirilmesine neden olur.

Lazy Load eklentisi bir yazıdaki resimlerde, avatarlarda, iframe’lerde ve gülen yüzlerde çalışıyor. Ayrıca, web sitesinin yükleme süresini daha da hızlandırabilmeniz için Youtube iframe’lerini önizleme küçük resmiyle değiştirmenize olanak tanır.

2. a3 Lazy Load Eklentisi
a3 Lazy Load

Linke erişmek için lütfen Giriş yap veya üye ol.
, en iyi Lazy Load eklentilerinden biri. Eklenti, yazılardaki, sayfalardaki, widget’lardaki, videolar ve iframe’ler, küçük resimlerdeki ve avatarlardaki tembel yükleme görüntüleri için uygun. Aynı zamanda WooCommerce ile uyumlu.

a3 Lazy Load, komut dosyasını headera mı, footera mı yükleneceğine ve istediğiniz görüntüleri veya videoları yoksaymayı seçmenize izin verir.

3. Lazy Loader
Wordpress Lazy Load

Linke erişmek için lütfen Giriş yap veya üye ol.
, görüntülerin, videoların, ses öğelerinin ve iFrame’lerin tembel yüklenmesini de destekleyen bir başka basit WordPress Lazy Load eklentisidir. Hafif bir komut dosyası kullanır. Ayrıca, işaretlemenin manuel olarak değiştirilmesiyle arka plan resimlerinin, stillerin ve komut dosyalarının tembel yüklenmesini sağlar.

4. Zedna Lazy Load Eklentisi
Zedna Lazy Load

Linke erişmek için lütfen Giriş yap veya üye ol.
, CSS arka plan resimlerini destekliyor. WordPress için görüntüleri aşamalı olarak yükleyerek sayfa yükleme süresini çok azaltır. Ayrıca CSS arka plan görüntülerini de tembel olarak yükleyebilir. Bu eklenti aynı zamanda Visual Composer ile de uyumludur ve bazı özel sınıflardaki elemanları atlamayı seçmenize izin veriyor.

5. JCH Optimize
JCH Optimize

Linke erişmek için lütfen Giriş yap veya üye ol.
eklentisi sadece lazy load tekniği için yapılmamış. Ayrıca web sitenizin hızını artıran ve birçok optimizasyon seçeneği sunan özellik dolu bir eklenti. Toplam HTTP isteklerini azaltmak için CSS / JS dosyalarını birleştirir ve ayrıca HTML’nizi küçültür.

Yukarıda sıraladığımız eklentilerden herhangi birini rahatlıkla kullanabilirsiniz. Böylece Google PagesPeed aracındaki “ekran dışındaki resimleri ertele” uyarısı da kalkmış olacaktır. Bu uyarıdan ziyade, websiteniz hızlanacak ve kullanıcılarınız için daha iyi bir deneyim sunmuş olacaksınız.
 
  • Beğendim
Tepkiler: omerburak ve Yunus