Lazy Load Nedir? Nasıl Kullanılır? Site Hızını Nasıl Yükseltirim?

Bir web sitesi veya içeriği daha ilgi çekici bir hale getirmek için görseller olmazsa olmaz etkenlerden birisidir. Doğru ve özgün görseller tercih etmeniz web sitenizin öne çıkması için çok önemli bir adımdır. Ancak görsellerin boyutu, çözünürlüğü ve adeti fazla olduğunda sitenizin hızını bir hayli etkiler. Bu durumda görselleri kaldırmak veya azaltmak yerine lazy load sistemini kullanarak yüklenme hızını etkili bir şekilde arttırmanız mümkün.

Lazy Load Nedir?

Lazy Load, fazla görsele sahip sitelerde sayfanın daha hızlı yüklenmesini sağlayan bir yöntemdir. Basit bir JavaScript kodu ile gerçekleştirilen bu işlem bant genişliğinde tasarruf sağlayarak sitenin daha hızlı açılmasını sağlar. Daha anlaşılır bir şekilde tanımlamak gerekirse; görseller sayfa dökümanı yüklendikten sonra gösterilir.

Bir çok farklı lazy load sistemi mevcuttur, ekran kayması ile ilgili alanda sırayla görsel çeken, döküman yüklendikten sonra sayfadaki tüm görselleri yükleyen vs.

Biz bu içeriğimizde döküman yüklendikten sonra tüm görsellerin yüklendiği lazy load kodunu sizlere sunacağız.

Lazy Load Nasıl Kullanılır?

Lazy Load, döküman yüklendikten sonra görsellerin gösterilmesi için uygulanan pratik ve kullanımı kolay bir yöntemdir. (Aşağıdaki yöntem jquery kütüphanesini gerektirir)

Öncelikle lazy load ile yüklenmesini istediğiniz görsellere "lazy" classı eklemeli ve görsel urlsini "data-src" olarak belirlemelisiniz.

HTML
<img class="lazy" src="" data-src="image/gorsel.png" />

Görsel yüklenene kadar farklı bir görsel gözükmesini istiyorsanız "src" kısmına default görsel tanımlayabilirsiniz;

HTML
<img class="lazy" src="image/loader.gif" data-src="image/gorsel.png" />

Aşağıdaki kodları css dosyasına ekleyin.

CSS
.lazy {
   opacity: 0;
   transition: opacity .5s;
}
.lazy.Load {
   opacity: 1;
}

JavaScript
/* NS Lazy Load */
$(document).ready(function() {
    $(".lazy").each(function() {
        $(this).attr("src", $(this).attr("data-src")).queue(function() {
            $(this).addClass('Load');
        });
    });
});
/* NS Lazy End */

yukarıdaki işlemleri kısaca açıklamak gerekirse;

gösterilecek görseli data-src kısmına çekiyoruz, JavaScript kodumuz lazy classı bulunan görselleri döküman yüklendikten sonra data-src verisini alıyor ve src kısmına taşıyor. Bu sayede döküman yüklenene kadar görseller yüklenmiyor. Görsel yüklenene kadar herhangi bir görsel/gif gözükmesini istiyorsanız bunu 2. kodda gösterdiğimiz gibi src kısmına ekliyoruz.

Görsel yüklendikten sonra lazy bulunan classımıza load classı ekleniyor, bu işlem görselleri aniden gelmesi yerine daha hoş yüklenmesini sağlıyor. Dilerseniz cssleri geliştirebilir animasyonlu yüklenmeler gerçekleştirebilirsiniz.

Ayrıca Lazy load haricinde site hızını etkileyecek görsel kullanımları hakkında bazı ufak bilgiler vermek istiyoruz. 

Görselleri WebP Formatında Kullanın!

WebP; web sitenizde kullandığınız jpg, png gibi benzer bir kalite seviyesinde lakin çok daha küçük dosya boyutlarında görüntülenmesine izin veren Google tarafından geliştirilmiş yeni nesil görüntü formatıdır.

Görsellerinizi hızlı ve kolay bir şekilde webp formatına çevirmek için aşağıdaki siteleri kullanabilirsiniz;

• FreeConverter
• CloudConverter
• Convertio

Sitenizdeki görselleri WebP formatında güncellediğiniz takdirde site hızınızın olumlu yönde etkilendiğini görebilirsiniz.

Görselleri Sıkıştırın!

Web siteniz veya blog içeriğiniz için oluşturulan görselleri doğrudan yüklemeyin. Görsellerin boyutu yüksek olduğundan yüklenme hızını olumsuz yönde etkileyecek ve gecikmelere sebep olacaktır. Görsellerinizi sitenize dahil etmeden önce sıkıştırma araçları ile sıkıştırın ve görselin boyutunu düşürün. İyi bir sıkıştırma aracı görsel kalitenizi düşürmeden daha ufak dosya boyutları ile görseli kullanmanız sağlayacaktır.

Görsellerinizi kolay ve hızlı bir şekilde sıkıştırmanızı sağlayacak bazı araçlar;

• Compressor
• CompressNow
• TinyPNG
• ImageCompressor

Sıkıştırma işlemi ile hem site hızınızı yükseltebilir ve sunucunuzda daha az yer kullanmış olursunuz.