Bilgisayar Mühendisliği

Lazy Load Nedir? Ne İşe Yarar?

Lazy Load Nedir: Ekranda henüz yer almayan görsellerin yüklenmesinin ertelenmesini sağlayarak internet sitelerinin daha hızlı açılmasını sağlayan özel bir optimizasyon tekniğidir. Türkçesi tembel yükleme veyahut diğer adı ile dinamik fonksiyon yükleme şeklindedir. Bu yazıda;

✅ Lazy load nedir ve ne işe yarar sorularının cevapları
✅ İnternet sitenizi yavaşlatan resim ve videolara çözüm önerileri
✅ Ekran dışındaki resimleri ertele sorununu çözümü

-Reklam-

Gibi alt başlıklar hakkında detaylı bilgilerden ve özel tekniklerden bahsedeceğiz. Lafı uzatmadan konuya girelim.

Lazy Load Sayfadaki Görsel Sayısı Kaç Tane Olursa Olsun Sitenizi Ciddi Ölçüde Hızlandırır
Lazy Load Sayfadaki Görsel Sayısı Kaç Tane Olursa Olsun Sitenizi Ciddi Ölçüde Hızlandırır

Lazy Load Nedir? (Tembel Yükleme)

1- Neden Lazy Load Kullanılır?

Standart bir internet sayfasına girdiğinizde, sayfanın cihazınızda açılması için sayfa içeriğinin, resimlerin, videoların, reklamların ve sayfadaki ek kodların yüklenmesi gerekir. Araştırmalara göre bu yüklenme süresi 3 saniyeyi geçtikten sonra kullanıcıların çoğu siteyi terk etme eğiliminde oluyor.

“3 saniye bekledikten sonra trafiğinizin %40’ı sitenizi terk edecektir.”
– Lara Hogan, Etsy Mühendislik Müdürü

Eğer sitenin olduğu sunucuda yoğunluk yaşanıyorsa veyahut sayfada fazlasıyla görsel içerik, ek kod ve hele hele reklamlar varsa sayfanın açılması anormal şekilde uzayabiliyor. İşte bu durum şu tarz çok ciddi sorunlara yol açabiliyor:

-Reklam-
Site Hızı Neden Önemlidir?

Tıpkı bu görselde ifade edildiği gibi geç açılan bir sayfa arama motorlarında sıralama kaybı, kaybedilen okuyucular ve ciddi oranda gelir kaybı demektir. Peki lazy load burada ne işe yarıyor?

Lazy load ise yazının başındaki karikatürde ifade edildiği gibi sayfada kaç tane görsel içerik olursa olsun sitenizin görsellerden ötürü yavaşlamasının ciddi bir şekilde önüne geçiyor. Bu durum da daha iyi bir kullanıcı deneyimi sunmanızı sağlıyor.
(Ayrıca Bakınız: Kullanıcı Deneyimi Nedir? Nasıl Geliştirilir?)

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

.#. Tembel yükleme; sayfanın en üstündeki görsellerin ilk başta yüklenmesini, sayfanın devamında kalan görsellerin ise sayfayı kaydırdıkça yüklenmesini sağlayarak internet sitelerinin açılma sürelerini önemli ölçüde kısaltır. Tıpkı şu görselde anlatıldığı gibi:

-Reklam-

Lazy Load Sayesinde Sayfanın Başındaki Resimler Hemen Yüklenir, Altındakiler İse Sayfayı Kaydırdıkça Yüklenir
Lazy Load Sayesinde Sayfanın Başındaki Resimler Hemen Yüklenir, Altındakiler İse Sayfayı Kaydırdıkça Yüklenir

.#. Lazy load eklentileri ek bir JavaScript dosyası oluşturarak, ihtiyaç duyulmayan nesnelerin çağrılmasının önüne geçerek bant genişliği tasarrufu yapmanızı sağlar. Bu özellik;
— Resimlere
— Videolara
— Reklamlara uygulanabilir.

.#. Bu özellik özellikle emoji ve görsel ağırlıklı, adeta görsel bir galeri şeklindeki içerikler üreten internet siteleri için sayfa açılış süresini önemli ölçüde azaltacaktır. Tıpkı şu görselde anlatıldığı gibi:

Lazy Load Görsellerin Yüklenmesini Erteleyerek Sayfa Açılış Hızını Arttırır
Lazy Load Görsellerin Yüklenmesini Erteleyerek Sayfa Açılış Hızını Arttırır

3- Lazy Load Nasıl Yapılır?

💡 İnternet sitesi sahipleri, siteler için kodlanmış lazy load eklentilerinden birisini indirerek sadece 2-3 tıklama ile bu özelliği sitelerine ekleyebilirler. Zira tüm eklentiler özünde aynı işi yaptığı için, çok nadir durumların haricinde bir sorun yaşamazsınız. Ayrıca yazının devamında bahsettiğimiz resim yer tutucu özelliği kullanmanızı öneririz.

💡 Ayrıca bu özelliği eğer isterseniz yaptığınız programlarda başta olmak üzere performans arttırma amaçlı olarak ihtiyaç duyduğunuz her yerde kullanabilirsiniz.
(Ayrıca Bakınız: Başarılı Bir Programın Özellikleri Nelerdir?)

-Reklam-

💡 Profesyonel İpucu: Lazy load özelliğini kullanmanız halinde, sitenizde sayfalarınıza gönül rahatlığı ile (kullanıcıyı baymamak şartıyla) istediğiniz kadar görsel ekleyebilirsiniz.

➽ Arama motorları görsel arama sonuçlarında en yüksek verimi almanız adına resimlerin ve videoların SEO ayarlarını yapmanız gerekir. Bu konuda detaylı bilgiye ve özel tekniklere “Görsel SEO: Resimler İçin SEO Teknikleri” adlı yazımızda ulaşabilirsiniz.

Lazy Load Sayfanın Açılması İçin Yüklenmesi Gereken Resim Boyutunu Önemli Ölçüde Azaltır
Lazy Load Sayfanın Açılması İçin Yüklenmesi Gereken Resim Boyutunu Önemli Ölçüde Azaltır

4- Tembel Yükleme ve Resim Yer Tutucu (Image Placeholder)

Dinamik fonksiyon yükleme, nam-ı diğer lazy load ile siteniz hızlı yüklendiği veyahut 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örsellerin hemen yüklenmeme veyahut hiç yüklenmeme ihtimali olduğu için can sıkıcı ve anlamsız 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)

İmage Placeholder Ne İşe Yarar: Sayfa ilk başta yüklenirken tembel yükleme yapılan görsellerin yerine yer tutucu gösterilir. Sayfa kaydırılıp diğer görsellere inildikçe, yer tutucu silinip yerine gerçek resim konulur. Bu sayede;
— Tıpkı pek çok ünlü sitenin yaptığı gibi olası bir görsel karmaşanın önüne geçilmiş olur.
— Sayfanın hemen açılmasını engelleyen görsel render blocking faktörlerin engellenmesini sağlar.
(Ayrıca Bakınız: Render Blocking Nedir? Nasıl Engellenir?)
— Yeniden hesaplama miktarı (recalculate) azalacağı için sayfanın hızlı açılması sağlanır.

Durun tahmin edeyim, bunu anlamadınız değil mi? Çoğunuzun yüzünden okunuyor vallahi. Gelin ünlü bir video izleme sitesinden örnek verelim:

-Reklam-

Resim Yer Tutucu (İmage Placeholder) Nedir? Ne İşe Yarar?
Resim Yer Tutucu (İmage Placeholder) Nedir? Ne İşe Yarar?

Örnek: Görseldeki, hepimizin de yakından tanıdığı video sitesinde ilk başta ana video yükleniyor, yandaki önerilenler kısmının yüklenmesi ertelenerek sayfanın açılış hızı arttırılıyor. Görsel karmaşanın önüne geçmek içinse, resimde gördüğünüz üzere önerilenler kısmı yüklenene kadar düşük dosya boyutlu tek renkli yer tutucular kullanılıyor. İşte bunlar hızı arttıran profesyonel site içi SEO çalışmalarıdır.
(Ayrıca Bakınız: Site İçi SEO Nedir? Nasıl Yapılır?)

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

Google Pagespeed sitesinde, site hızınızı test ettiğinizde eğer ekran dışındaki resimdeki ertele şeklinde bir uyarı aldı iseniz, Google sitenize lazy load eklentisi kurmanız halinde site hızınızın önemli ölçüde iyileşebileceğini söylüyor. Gelin bunu bir de Google amcanın ağzından dinleyelim:

Ekran Dışındaki Resimleri Ertele Sorunu Lazy Load İle Çözülebilir
Ekran Dışındaki Resimleri Ertele Sorunu Lazy Load İle Çözülebilir

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)

Lazy Load Nedir? Ekran Dışındaki Resimleri Ertele Sorunu Çözümü [Rehber]
Lazy Load Nedir? Ekran Dışındaki Resimleri Ertele Sorunu Çözümü [Rehber]

 Tembel yükleme ile görselleri optimize etmek site hızlandırmanın önemli ama ufak bir adımıdır. Eğer sitenizi yavaşlatan tüm sorunları öğrenmek ve bunları özel tekniklerle çözmek istiyorsanız “Google Pagespeed İnsights ile Site Hızlandırma” adlı yazımıza göz atmanızı öneriyoruz.

-Reklam-

Technogezgin.com Bilgi
Lazy load nedir, ne işe yarar” 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 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ı