Lazy Loading Nedir?
Lazy Loading, web sitesinde gerekli olmayan kaynakların yüklenmesini ihtiyaç duyulana kadar erteleyen, kullanıcı deneyimi ve sayfa açılış sürelerini iyileştiren performans optimizasyon tekniğidir. Resim, video, JavaScript modüllerin yüklenmesini geciktirerek sayfa yükleme hızını arttırmak yaygın olarak kullanılır. Bu yöntem sayfa hızını arttırır, veri miktarını azaltır ve kullanıcının bant genişliğini kullanımını azaltır.
Örnekler
- İçerik alanındaki görseller,
- Footer alanındaki logo,
- Alt bölümde kullanılan sosyal ikonlar,
- Sidebar görselleri.
Lazy Loading Kullanmanın Faydaları
Site Hızı
Çok sayıda görsel içeren bir sayfaya giriş yapıldığında, sayfada yer alan bütün görsellerin aynı anda yüklenir, bu durum web sitesinin daha geç açılmasına yol açar. Lazy Loading ile genellikle başlangıç ekranında yalnızca 4–5 görsel yüklenir; sayfa daha hızlı açılır.
Kullanıcı Deneyimi
Kullanıcıların sayfaları gereksiz gecikmeler olmadan hızlıca gezinmesini sağlar. Hızlı açılan sayfalar kullanıcıların sayfadan ayrılma olasılığını azaltır, ilgisini canlı tutar. Özellikle mobil cihazlar üzerinden daha yavaş internet bağlantısına sahip kullanıcılar için çok faydalıdır.
Optimize Edilmiş Kaynak Kullanımı
İlk açılış ekranında yüklenen kaynak sayısı daha az olur, sayfanızı ziyaret eden kullanıcının bant genişliğini korur. Arama motorları sayfanızı ziyaret ettiğinde ilk olarak en alakalı içeriği taramaya odaklanır ve bu da öncelikli içeriğin daha iyi şekilde arama motoru dizinine eklenmesine yardımcı olur.
Core Web Vitals
Google Core Web Vitals, web sitelerinin yükleme süresi, görsel kararlılığı ve etkileşimini ölçer. Lazy Loading, sayfanın üst kısmında görünen içeriğin oluşturulmasına öncelik verir. LCP, Google’ın Temel Web Verileri’nde önemli bir faktör olduğundan, iyileştirilmesi sıralamanızı olumlu yönde etkileyebilir. Önemli içerikleri önce yükleyip, gereksiz öğeleri erteleyerek, SEO için bir diğer önemli performans ölçütü olan FCP’yi iyileştirmeye yardımcı olur.
Lazy Loading Nasıl Uygulanır?
Lazy Loading web sitesine çeşitli şekillerde uygulanabilir. CSS tabanlı bazı manuel çözümler, alanında uzman kişiler tarafından uygulandığında işe yarayabilir. Eklentiler kullanan hazır yazılımlarda (WordPress, Shopify vb.) genellikle kullanabileceğiniz Lazy Load modülü bulunur.
Örnek: <Img> Etiketi ile Lazy Load
Görsellerinizi <img> etiketi kullanarak ekliyorsanız aşağıdaki ilgili kodları kullanmalısınız.
HTML: Class etiketine “lazy” ekleyin ve görsellerinizi “data-src” yolu ile çağırın.
<img class="lazy" data-src="images/gorsel.jpg" width="300" height="50" alt="Kukumav.Net">
CSS: Lazy classı için aşağıdaki css kodunu oluşturun.
.lazy {
display: block;
width: 100%;
}Lazy Loading uygulamasından en iyi şekilde faydalanmak için dikkat etmeniz gereken bazı noktalar vardır:
- Sayfanın yalnızca alt kısmında yer alan kaynakları Lazy Loading’e dahil edin.
- Sitenin ilk açılış ekranında işlevsellik için gerekli olan kaynakları Lazy Loading’e dahil etmeyin.
- Lazy Loading’i sayfalarınıza uyguladıktan sonra; ana sayfa, kategori ve ürün detay sayfalarının Google PageSpeed analizini gerçekleştirin.
- Yanlış bir uygulama varsa, Lazy Loading ile ilgili uyarılarla karşılaşabilirsiniz.
- Çok katı tembel yükleme parametreleri belirlemekten kaçının.
- Daha verimli hale getirmek için tembel yükleme kodunu en aza indirin.
- Tembel yüklemeyi veya JavaScript’i desteklemeyen tarayıcılar için yedek çözümler uygulayın.