Bilgisayar Mühendisliği

Lazy Load Nedir? Ekran Dışındaki Resimleri Erteleme

Lazy load nedir? Neden kullanılır, ne işe yarar? Ekran dışındaki resimleri ertele sorununa ne yol açar ve bu sorunun çözümü nedir? Hepsinin cevabı tek bir yazıda! Haydi başlayalım.

Lazy Load Nedir? (Tembel Yükleme)

Lazy Load: Ekranın alt kısmında görünen içeriğin indirilmesini ve oluşturulmasını geciktiren bir optimizasyon tekniğidir. Diğer adı dinamik fonksiyon yükleme şeklindedir.

Bunların Türkçe meali ise şudur: Hani bazı sitelere (veya uygulamalara) girersiniz; içerikler, resimler, reklamlar siz ekranı kaydırıp aşağı indikçe yüklenir. İşte bu lazy load olayının ta kendisidir.

Bu sayede ilk başta yüklenmesi gereken dosya boyutu önemli ölçüde azaltılarak, sitenin ilk zengin içerikli boyaya (FCP) ulaşma süresi azaltılmış olur. Yani hemen kısa bir süre içerisinde açılması sağlanır.

Lazy Load: Sayfanın üstündeki resimler hemen yüklenir, alttakiler ise sayfayı kaydırdıkça yüklenir
Lazy Load: Sayfanın üstündeki resimler hemen yüklenir, alttakiler ise sayfayı kaydırdıkça yüklenir

Zira, standart bir İnternet sitesinde sayfadaki görseller, videolar, içerik, reklamlar her ne varsa hepsi indirilmeden sayfa yüklenmez. Bu da;

  • Geç açılan bir sayfa,
  • Kaybedilen okuyucular,
  • Arama motorlarında sıralama kaybı ve
  • Gelir kaybı demektir.

Tabi tembel yüklemenin tek kullanım alanı İnternet siteleri değil. İsterseniz yaptığınız programlarda, isterseniz performans arttırma amaçlı olarak ihtiyaç duyduğunuz her yerde kullanabilirsiniz.

Lazy Load Ne İşe Yarar?

Malumunuz 21. yüzyılda içerikler salt yazıdan, emoji ve görsel ağırlığa binmeye başladı. Ünlü haber sitelerindeki galeri şeklindeki içerikler bu konuda nokta atışı bir örnektir.

Bu durumdan dolayı sayfalar geç açılmaya başlıyor. Bunun çözümü ise lazy load, yani ekran dışındaki resimleri ertele metodu. Lazy load yöntemi ile;

  • İçerikteki resimlerin,
  • İçerikteki videoların,
  • Blokların (yani içeriğin ta kendisinin),
  • En önemlisi reklamların,

Yüklenmesini geciktirme, bu sayede sayfayı hızlandırma imkanı elde etmiş oluyorsunuz. Fakat bunların hepsi için ayar yaptığınıza ve bu ayarların doğru bir şekilde çalıştığına emin olunuz.

Lazy Load Nedir - Ekran Dışındaki Resimleri Ertele Sorunu Çözümü Rehber
Lazy Load Nedir – Ekran Dışındaki Resimleri Ertele Sorunu Çözümü Rehber

Reklamlar ve Tembel Yükleme

Tembel yükleme tekniğini değerli yapan en önemli husus reklamlar. Sitenize / uygulamanıza / programınıza reklam eklediğiniz vakit malumunuz performansınız ciddi bir şekilde düşer.

Reklamlar için durumu farklı kılan şey, reklamların resimler gibi statik (sabit) değil, dinamik (değişken) olması sebebiyle (her seferinde farklı reklam çıkmasından dolayı) reklam görselini ön belleğe alamıyor, boyutunu küçültemiyor veyahut herhangi bir optimizasyon yapamıyor olmamızdır.

Geriye tek çare kalıyor, ne mi o, doğru bildiniz efendim: ekran dışındaki resimleri ertele metodu, yani lazy load!

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

– Tarayıcılar, görselleri ve videoları indirmeden önce İnternet 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.

Bu Durumun Dezavantajları

Siteniz hızlı yüklendiği, uygulamanız çok hızlı bir şekilde açıldığı için; sayfalarda / uygulamada kullanıcı çok hızlı bir şekilde aşağı kaydırma yaparsa görseller hemen yüklenmeyeceği veya hiç yüklenmeme ihtimali olduğu için can sıkıcı bir görünümle karşılaşabilirsiniz.

Bu Sorunun Çözümü: Kullanacağınız geç yükleme uygulamasında image placeholder yani resim yer tutucu görseller özelliğinin olmasına dikkat edin.

Yer Tutucu Resim Örneği (PlaceHolder)
Yer Tutucu Resim Örneği (PlaceHolder)

Bunun mantığı şudur: oldukça küçük dosya boyutuna sahip, (genellikle gri renkte) bir yer tutucu görsel kullanılır. Ve her resim veya reklam için ayrı ayrı indirme yerine onlar inene kadar onların yerini tutacak tek bir görsel gösterilir. Bu sayede de;

  • Görsel karmaşanın önüne geçilir,
  • Sayfanın hızlı açılması sağlanır.

Hangi Lazy Load Eklentisini Kullanmalı?

1. Tercih: (İnternet sitenizin) temasını yapanların temaya dair yaptığı bir eklenti var ise o, (Zira sizin temada neyin işe yarayacağını en iyi onu yapanlar bilir)

2. Tercih: Sizinle aynı temayı kullananların veya tema yapımcılarının önerdiği eklenti varsa o eklenti,

3. Tercih: Bunların hiçbirisi yoksa tek tek deneyerek sizin bulduğunuz en iyi sonucu veren eklenti.

Ekran Dışındaki Resimleri Ertele Sorunu ve Çözümü

Malumunuz, Google İnternet sitelerini sıralamaya sokarken bu işi yüzlerce kritere göre yapıyor. Şüphesiz bunlardan en önemlileri arasında sayfa açılış hızı da yer alıyor.

Zira istediğiniz kadar özgün ve kaliteli içeriğiniz olsun, siteniz hızlı olmadıktan sonra ne işe yarar ki? Kullanıcıların çoğu zaten 2-3 saniyelik bir açılmama durumundan sonra siteyi terk ediyor.

İşte bu durumun önüne geçmek için, ekran dışındaki resimleri ertele sorunu ile karşılaşan kişiler, lazy load (gecikmeli yükleme) veyahut AMP (hızlandırılmış mobil sayfalar) eklentilerini kullanmayı düşünebilirler.

Gelin bunu bir de Google amcanın ağzından dinleyelim:

Etkileşim için hazır olma süresini kısaltmak için ekran dışı ve gizli resimleri, tüm kritik kaynakların yüklenmesi bittikten sonra gecikmeli olarak yükleme seçeneğini değerlendirin.

Ekran dışı görüntüleri erteleme veya bu işlevselliği sağlayan bir temaya geçiş yapma olanağı veren bir geç yükleme (Lazy Load) eklentisi yükleyin. Ayrıca AMP eklentisini kullanmayı da değerlendirin.

(Google Pagespeed Insights)

Technogezgin.com Bilgi
Lazy load nedir ve ekran dışındaki resimleri ertele sorunu” konulu yazımız hakkında eklemek istediklerinizi, sorularınızı ve (eğer varsa) yazıdaki yanlışları yorumlarda belirtebilirsiniz.

Yazıyı da yazının altındaki (logolu) paylaşım tuşlarını kullanarak gönül rahatlığı ile paylaşarak bize büyük bir iyilik yapabilirsiniz.

Ana Sayfa: 
https://www.technogezgin.com/
Hayata Dair Özgün ve Kaliteli Yazılarımız: 
https://www.technogezgin.com/blog/

MrKaptainTR

Merhabalar. Ben bu internet sitesinin sahibiyim. Aynı zamanda Hacettepe Üniversitesi'nde bilgisayar mühendisliği okuyorum. Bu sitede de; ufkunuzu açacak, bilgi hazinenizi katlayacak, bakış açınızı adeta uçuracak, “Vay be, adamlar bunu da mı yapmış?” dedirtecek cinsten içerikler üretmeye çalışıyorum.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı