- Konu Başlıkları
- Yavaş Yüklenen Sayfaları Hızlandırmak İçin Lazy Load Yapabilirsiniz!
- Lazy Load Nasıl Yapılır? – Web Siteniz Yavaş Mı Yükleniyor?
- Lazy Load Gereksiz İçeriklerin Yüklenmesini Engeller! – Lazy Load Nedir, Nasıl Yapılır?
Yavaş Yüklenen Sayfaları Hızlandırmak İçin Lazy Load Yapabilirsiniz!
Lazy load, bir web sayfasının belirli bölümlerinin, özellikle de resimlerin, ihtiyaç duyulana kadar yüklenmesini beklemek için kullanılan bir tekniktir. "Hevesli (eager)" yükleme olarak bilinen her şeyi bir kerede yüklemek yerine, tarayıcı, kullanıcı kaynaklara ihtiyaç duyacak şekilde etkileşime girene kadar belirli kaynakları talep etmez. Düzgün bir şekilde uygulandığında, lazy load, sayfa yükleme sürelerini hızlandırabilir.
Lazy load nedir sorusunu bu basit açıklamayla cevaplamak mümkündür. Bu tür yüklemeye "tembel (lazy)" denir çünkü web tarayıcısını ertelemeye teşvik eder. Geç yüklenen bir web sayfasını görüntülerken, bir tarayıcı aslında "Gerçekten ihtiyacım olana kadar bu resimleri yüklemek için bekleyeceğim" der. Bir tarayıcı, hevesli yüklemede ise bir web sayfasını görüntülerken tam tersi bir tavır alır. Erteleme bazen gerçek dünyada olumsuz çağrışımlar taşırken, bu durumda genellikle daha etkilidir.
Örneğin, bir blog gönderisinin sayfanın üstünde bir resmi ve alt kısmında bir diyagramı olabilir. Blog gönderisini okuyan biri birkaç dakika metnin sonuna ulaşamayabilir, bu nedenle tarayıcı, okuyucu o bölüme gelene kadar diyagramı yüklemek için bekler. Bu şekilde, tarayıcı iki yerine bir resim yüklediğinden, sayfa ilk başta daha hızlı yüklenir.
Lazy Load Nasıl Yapılır? – Web Siteniz Yavaş Mı Yükleniyor?
Lazy load nedir sorusuna yanıt verdiğimize göre yavaş yüklenen sayfalar için çözüm önerimize lazy load nasıl yapılır sorusuyla devam edelim. Kullanıcı navigasyonu tipik olarak lazy load işlemini tetikleyen şeydir. Özellikle, bir kullanıcı bir sayfayı aşağı kaydırdığında, tarayıcıya orada görünen resimleri yüklemesini söyler.
Bir web sayfası yüklendiğinde, kullanıcının gördüğü kısım "ekranın üst kısmı", henüz görmediği kısım ise "ekranın alt kısmı" olarak adlandırılır.* Ekranın üst kısmındaki resimlerin hemen yüklenmesi gerekir, yoksa kullanıcı deneyimi etkilenecektir. Ancak kullanıcı, ekranı aşağı kaydırana kadar ekranın alt kısmındaki resimleri görmez. Böylece, ekranın altındaki görüntüler lazy load olarak kullanabilir.
Bunu tıpkı yarısından katlayarak okuduğunuz bir gazete gibi düşünebilirsiniz. Gazeteler tipik olarak yatay olarak ikiye katlanır ve okuyucunun ilk gördüğü ön kısım -katlamanın üstündeki alan- olur. Terim bir web düzenine uygulandığında, aynı katlama kullanıcı için ekranının alt kısmına yapılabilir.
Geç yüklemeyi uygulamanın bir yolu, bir resim etiketinde yükleme HTML niteliğini kullanmaktır. Lazy load HTML kodu tarayıcıya kullanıcı görüntüye yaklaşana kadar görüntüyü yüklemek için beklemesini söyler. Ayrıca web geliştiricileri daha karmaşık lazy load komutları verebilmek için JavaScript kodlarından da yararlanabilmektedir.
Cloudflare Mirage, tembel yüklemeyi uygulamanın başka bir yoludur. Görüntüleri otomatik olarak yeniden boyutlandırmaya ek olarak, Mirage yalnızca istek üzerine görüntüleri yükleyen tembel bir yükleyici görevi görür.
Lazy Load Gereksiz İçeriklerin Yüklenmesini Engeller! – Lazy Load Nedir, Nasıl Yapılır?
Bir sayfanın ekranın alt kısmında birden çok resim yüklediğini, ancak kullanıcının aşağı kaydırmadan önce sayfadan çıktığını varsayalım. Böyle bir durumda, görüntüleri teslim etmek için kullanılan bant genişliği ve tarayıcının görüntüleri istemek ve oluşturmak için harcadığı zaman esasen boşa gitmiş demektir.
Buna karşılık, tembel yükleme, bu görüntülerin yalnızca gerektiğinde yüklenmesini sağlar. Bu, zamandan ve işlem gücünden ve daha az bant genişliği kullanıldığından web sitesi sahibi için bütçe açısından tasarruf imkanı sunabilir.
Ancak kimi durumlarda kullanıcılar, kaynakları beklenenden daha hızlı talep edebilir: Örneğin, bir kullanıcı bir sayfayı hızla aşağı kaydırırsa, resimlerin yüklenmesini beklemesi gerekebilir. Bu da kullanıcı deneyimini olumsuz etkileyebilir. Yine de kullanıcı deneyimi açısından bu çok daha az karşılaşacağınız bir durumdur ve SEO açısından sayfa hızını arttırmak için feda edilebilir.
[widget-136]
