Yeni web sitesi açmak isteyen kişiler son zamanlarda en çok “Lazy loading nedir? Nasıl kullanılır?” sorusunu sormaktadır. Bir kısım JavaScript komutları kullanılarak oluşturulan metoda Lazy loading adı verilmektedir. Bu metot sayesinde sahip olduğunuz web sayfasının içerisindeki tüm görseller sayfanın açıldığı an değil, farklı zamanlarda açılarak kullanıcılara sunulur. Yani Lady Loading kullandığınız zaman tüm görseller birden açılmaz. Siteye giriş yapan kullanıcı site içerisinde gezinirken aşağı yukarı kaydırırken bir görsel ile aynı seviyeye geldiğinde yüklenir.
Lazy Loading metodu sayesinde kullanıcıların siteye giriş hızları oldukça artar. Bunun başlıca sebebi ise açılış hızını etkileyen görsellerdeki Requestler’i devre dışı bırakmış olmanızdır. Lazy Loading komutundan faydalandığınız zaman kullanıcılar web sitenize daha hızlı giriş yapar.
Bu sayede kullanıcı deneyimi ve SEO açısından önemli olan sayfanızın açılış hızını epey bir düşürmüş olursunuz. Web sitesi kullanıcılarının %95’i sitelerin açılış süresi 3 saniyeyi geçtiğinde giriş yapmaktan vazgeçtiği görülmektedir. Lazy Loading metodu sayesinde bu sürenizi 3’ün altında tutarak kullanıcıların zihninde olumlu etkiler bırakabilirsiniz.
Lazy Loading Nasıl Kullanılır?
CMS veya WordPress sistemlerini kullanıyorsanız, bunlar için özel olarak geliştirilen Lazy Loading pluginlerini kullanabilirsiniz. Fakat farklı bir yazılım kullanıyorsanız yazmanız gereken bir dizi kod bulunmaktadır. Kod yazarken aşağıda listelemiş olduğumuz adımları takip edebilirsiniz:
- İlk olarak web sitenizdeki görsellere bir CSS Class atamanız gerekmektedir.
- Atamış olduğunuz CSS’yi display, block ve Width %100 olarak düzenlemeniz gerekir.
- En son olarak da JavaScript kodlarını devreye sokmalısınız.
Lazy Loading kullanımı kimilerine göre ne kadar kolay gözükse de aslında öyle değildir. Çünkü dikkat etmeniz gereken oldukça fazla detay bulunmaktadır. Bu detayları özenle yaptığınız taktirde web sitenizdeki görsellerin farklı zamanlarda yüklenmesini sağlayarak sitenizin açılma hızını iyileştirebilirsiniz.
Kullanıcılarınıza daha iyi bir deneyim yaşatmak ve hizmet vermek istiyorsanız Lazy Loading komutu ile bunu yapmak oldukça kolaydır. Bu hizmeti verirken aynı zamanda web sitenizin performansını da arttırmış olursunuz ve daha çok kullanıcının ilgisini çekersiniz.
Lazy Loading’in Faydaları Nelerdir?
Arama motorlarında ilk sıralarda yer almayı etkileyen birçok faktör bulunmaktadır. Bu faktörlerden bir tanesi de web sitelerinin açılış hızıdır. Google’a gelen Web vitals güncellemesi ile birlikte daha da önem kazanan web sitelerinin açılış hızı, kullanıcıların deneyimlerini oldukça etkilemektedir.
Web sitenizin açılma hızını Lazy Loading metodu sayesinde en yüksek seviyelere çıkarabilirsiniz. Bu metot sayesinde sitedeki tüm görselleri aynı zamanda değil farklı zamanlarda görseller yüklenir. Landing page sitelerinde ortalama 10, blog yazılarında iste en az 2 resim bulunduğunu göz önüne alırsak Lazy Loading, sitenizin açılma hızını epey etkilemektedir.
Lazy Loading metodunu kullanarak elde edebileceğiniz faydalar ise şu şekildedir:
- Web sitenizi ziyaret eden kullanıcılarına oldukça hızlı bir hizmet vermiş olursunuz.
- Yüklenmeyen görseller sayesinde sitenizin açılış hızını arttırabilirsiniz.
- Tüm görsellerin aynı anda yüklenmemesi sayesinde kaynak kullanımı azalır. Bu da Web Vitals gibi konularda sizi ön plana atar.
Lazy Loading metodunun faydaları sayesinde siteye giriş yapan kullanıcıların kaliteli bir deneyim yaşamalarını sağlarsınız. Bu sayede hem kullanıcılarını memnun etmiş olursunuz hem web sitenizin performansını arttırmış olursunuz.
Lazy Loading Hangi Sitelerde Kullanılmalıdır?
Lazy Loading metodu görsel açıdan oldukça zengin olan web sitelerinde kullanılması oldukça önemlidir. Çünkü görsellerin aynı anda açılmasını etkileyen bu metot ne kadar çok görselin açılmasını etkilerse o kadar faydalı olmaktadır.
Örnek olarak görsel açıdan oldukça zengin olan e-ticaret sitelerinde Lazy Loading çok önemli bir yerdedir. Çünkü yüzlerce görsele sahip olan bu sitelerde bu metot uygulandığı zaman açış hızı oldukça artış göstermektedir. Bu sayede sizi rakip firmalarınıza göre daha başarılır bir site yapar. Fakat bu metodu uygularken görselleri doğru tercih etmeniz gerekmektedir. Çünkü bazı görsellerin açılmasını ertelemek bazen olumsuz sonuçlar doğurabilir.
Lazy Loading Hangi Görsellerde Kullanılmalıdır?
Lazy Loading metodunun temel amacı ekran dışında kalan görsellerin açılmasını engellemektir. Bu yüzden site ekranı açıldığında karşınıza çıkan sayfanın dışında kalan görsellerin açılmasını ertelemek oldukça yerinde bir karar olacaktır. Lazy Loading metodunu uygulayabileceğiniz görseller şu şekildedir:
- Sayfa açılışından itibaren ekranın dışında kalan görseller
- İçerik kısmında ve sidebar bölgesinde yer alan görseller ve ikonlar
- Altbilgi kısmında yer alan logo ve thumbnailler
Listelediğimiz bu görsellere Lazy Loading metodu uygulayarak sitenizin açılış hızını oldukça arttırmış olursunuz. Fakat Lazy Loading uygularken oldukça dikkatli olmanız gerekir. Örnek olarak sayfanın açılışından sonra karşınıza gelen ekrandaki logo ve thumbnaillere asla Lazy Loading uygulamamalısınız. Aksi taktirde sitenizin işleyişinde büyük sıkıntılara yol açabilirsiniz. Bunun gibi sitenizin açılışında karşınıza gelen bölgedeki hiçbir görsele Lazy Loading metodu uygulanmamalıdır.
Lazy Loading metodunda dikkat etmeniz gereken bir diğer unsur ise görselleri seçerken geç yüklenebilme ihtimali olanları tercih etmemelisiniz. Ortaya çıkabilecek bu sorunun önüne geçebilmek için sabit bir height değeri belirlemenizde fayda vardır. Çünkü belirlemiş olduğunuz bu değerin üstündeki görsellere otomatik olarak Lazy Loading metodu uygulanmaz.
