Bir Web Sayfasını Hızlandırmak için Neden WordPress Lazy Load'a İhtiyacınız Olabilir?

Neden görüntüleyebileceğimizden daha fazla veri yükleyelim?

Hızlı bir web sitesi daha sürdürülebilir ve genellikle ihtiyaç duyduklarını hızlı ve kolay bir şekilde bulabilen daha fazla kullanıcıyı çekmede daha verimlidir. Ancak görüntüler düzgün şekilde optimize edilmezse, sayfa yüklemesini, yanıt verme hızını ve daha fazlasını yavaşlatabilecek önemli bir yüke de neden olabilir.

Akamai'ye göre, ziyaretçilerin yüzde 47'si bir web sayfasının iki saniye veya daha kısa sürede yüklenmesini bekliyor. Bir sayfanın yüklenmesi 3 saniyeden uzun sürerse, ziyaretçilerin yüzde 40'ı web sitesini terk edecektir. Ayrıca, 1 saniyelik bir gecikme, satışlarda yüzde 7'lik bir düşüşe neden olabilir. Çünkü:

Hiç kimse bir web sayfasının yüklenmesini "beklemek" istemez.

Sadece bu değil, arama motoru devi Google da hızlı yükleme süreleri 2-3 saniyenin altında olan web sitelerini tercih ediyor.

Tipik olarak, bir web veya WordPress gönderisi/sayfası, HTML, CSS, JavaScript, resimler, videolar, yorumlar vb. içeren birden çok sayfa içeriğinden oluşur. Genel olarak, bir WordPress web sitesini hızlandırmanın birkaç yolu vardır, ancak tekniklerin çoğu WordPress'te kodu en aza indirmekten tembel yükleme tekniğine kadar.

Bu kılavuzda, tembel yüklemeyi, avantajlarını/dezavantajlarını, kullanım örneklerini açıklayacağız ve ardından size WordPress resimlerini, videolarını, yorumlarını tembel olarak nasıl yükleyeceğinizi ve sonsuz kaydırmayı nasıl kullanacağınızı göstereceğiz.

Tembel Yük Nedir?

Bir ziyaretçi bir web sayfasını açtığında, içeriği ne kadar ağır olursa olsun, tüm sayfanın içeriği indirilmeye ve görüntülenmeye başlar. Bir ziyaretçinin yalnızca ilk sayfayı görüntüledikten sonra bir web sayfasını kapatma olasılığı vardır.

Bir sayfayı ziyaret etmek bant genişliğini tüketir ve önbelleğe alınan verileri kaydetmek için belleği kullanır. Sayfadan çok hızlı çıkmak, boşa bellek ve bant genişliğine neden olabilir. Tembel yükün atladığı yer burasıdır:

Tembel yükleme, web içeriğini tek seferde yüklemek yerine gerektiğinde yüklemek için kullanılan bir tekniktir.

Tembel yükleme tekniği kullanılarak, sayfa içerikleri yalnızca görünüm alanında (ekranda) görünür hale geldiklerinde yüklenir.

Tembel Yükleme Nasıl Çalışır?

Temel olarak, tembel yükleme, tembel olarak yüklenen web sayfası kaynaklarına (resim, video vb.) bir referans src niteliği koyar ve orijinal içerik için başka bir nitelik ekler, ardından ziyaretçilerin bir sayfanın kaydırma konumunu algılamak için JavaScript kullanır. Kaydırma konumu bir referans nesnesine en yakın olduğunda, referans kaynağı niteliğini gerçek kaynak ile değiştirir ve içeriği yükler.

Örneğin, bir ziyaretçi bir web sayfasını açar ve hemen bırakırsa, web sayfasının üst kısmının ötesinde hiçbir şey yüklenmez.

Varlıkları çalışma zamanında yüklemek, bir sayfanın ilk yükleme için sunucuya göndermesi gereken istek sayısını azaltır, bu da WordPress barındırma sunucusu ile ziyaretçi arasında tek seferde daha hızlı ve minimum iletişim sağlar.

Tembel Yük SEO'yu Etkiler mi?

Tembel Yük SEO Dostu değildir (en azından bu kılavuzun yazıldığı zaman itibariyle). İçerikler (Resimler, Videolar, Yorumlar vb.) başlangıçta ziyaretçiler için yüklenmediği için aynı akış arama motoru örümcekleri için de geçerlidir. Lazy Loaded içeriğin (resim, videolar) birkaçının Google görseller/videolar bölümünde indekslenmeme olasılığı vardır ki bu SEO açısından iyi değildir.

Tembel Yüklenen içeriğinize bağlantılar eklemek gibi geçici çözümler mevcuttur. Bu şekilde Google, onu standart bir web sayfası olarak alacak ve içeriği buna göre dizine alacaktır. Ancak ziyaretçiler yine de bir web sayfasını Lazy Loaded olarak görecektir.

Arama motoru devi Google, Lazy Loading'den nasıl yararlanılabileceği ve Lazy Loaded içeriğinin GoogleBot tarafından nasıl keşfedilebileceği konusunda yardım belgeleri hazırlıyor ve çalışıyor.

Medya Web Sitelerini Yavaşlatıyor mu?

Görüntüler ve videolar, bir web sayfasının web içeriği öğelerinin bir parçasıdır. Böylece, Evet, yükleme süresine etkisi.

Bir web sayfası boyutu ne kadar ağırsa, yüklenmesi o kadar uzun sürer.

Bu nedenle, resimleri bir WordPress sitesine yüklemeden önce her zaman optimize etmeniz önerilir. Görüntü boyutunu küçültmek için WP Compress, ShortPixel, WP Smush It vb. kullanabilirsiniz.

Ayrıca, görüntü boyutlarını belirtin, örneğin 1000×1000 piksellik bir görüntünüz varsa ancak 100×100 piksele ölçeklendirdiyseniz, tarayıcı gerekenden on kat daha fazla yükleyecektir. Ek olarak, tarayıcılar JPG, PNG ve GIF görüntülerini hızlı bir şekilde yükleyebildiğinden TIFF, BMP vb. gibi karmaşık dosya biçimlerinden kaçının.

Tembel Yük Kullanmalı mıyım?

Bu hız çağı!

Her ziyaretçi bir web sayfasının göz açıp kapayıncaya kadar yüklenmesini bekler. Sayfa yükleme sürelerini iyileştirmenin yollarını bulmaya devam etmeniz gerekir ve bunu yapmanın yollarından biri de tembel yüklemedir.

Mobil kullanıcıların muazzam büyümesiyle birlikte, dünya çapındaki trafiğin %52'sinden fazlası akıllı telefonlar üzerinden sunuluyor. Bir WordPress web sitesini optimize ederken kesinlikle mobil kullanıcıları göz önünde bulundurmalısınız.

3 Tembel Yük Kullanım Durumları

Çoğu zaman, tembel yükleme görüntüler için kullanılır, ancak bu yalnızca görüntülerle sınırlı değildir. Videolar, yorumlar, komut dosyaları vb. ile entegre etmek için kullanılabilir. İnternet devleri şu veya bu şekilde tembel yükü zaten kullanıyor. İşte bunlardan birkaçı:

1. Orta

Medium'u daha önce ziyaret ettiyseniz, gerçek yüksek çözünürlüklü görüntü tamamen yüklenene kadar tembel yükleme görüntüleri için bulanık bir yer tutucu görüntülediğini gözlemlemiş olmalısınız, bu nedenle ziyaretçiler bir görüntünün yüklenmesini bekler. Bu, ziyaretçinin dikkatini çekmek için başlangıçta yüklenen içeriğin bir kısmını göstererek kullanıcı deneyimini geliştirir.

2. Youtube

Varsayılan olarak, YouTube'un gösterdiği ilk şey, izlemeyi düşündüğünüz videodur ve ilk yüklemede diğer önerilen videoların yorumlarını ve küçük resimlerini yüklemez. Kaydırmaya başladığınızda, küçük resimler ve yorumlar gibi tembelce yüklenen öğeleri yüklemeye başlayacaktır. Bu şekilde, ziyaretçinin tüm sayfanın yüklenmesini beklemesi gerekmez. Hemen videoyu izlemeye başlayabilir.

3. Google görüntüleri

Google'da bir görsel aradığınızda, yer tutucu görsellerin küçük resimlerle değiştirildiğini ve birkaç görsel gösterdikten sonra daha fazla görsel yüklediğini gözlemlemiş olabilirsiniz. Google, arama sonuçlarını iyileştirmek için sonsuz kaydırma ve tembel yüklemeyi birleştirmek için farklı bir yaklaşım kullanır.

Bir WordPress Web Sitesine Tembel Yük Ekleyin

Bir WordPress web sitesinde sunucu yanıt süresini azaltmaya yardımcı olan ve daha hızlı sayfa yükleme deneyimi sağlayan bir tembel yükleme tekniği uygulayarak istek sayısını azaltabilirsiniz.

Katkıları için WordPress Topluluğu sayesinde, WordPress içeriğine tembel yükleme uygulamak o kadar teknik değildir.

1. WordPress Lazy Load Eklentileri

WordPress eklentileri dizininde “ lazy load ” araması yaparsanız, bir dizi lazy load eklentisiyle karşılaşırsınız. Ancak bu kılavuz için, bir WordPress web sitesinde tembel yükleme tekniğini uygulamak için en popüler, zengin özelliklere sahip ve yaygın olarak kullanılan eklentilerden biri olan a3 Lazy Load'u seçiyorum.

2. WordPress Tembel Yükleme Görüntüleri

Görüntüler kaynak yoğundur ve çok fazla bant genişliği ve depolama alanı tüketir. a3 Lazy Load eklentisi ile AÇIK/KAPALI arasında geçiş yapabilirsiniz. Sadece bu değil, görüntüler için tembel yükleme açıldığında, aşağıdakileri içeren nerede çalışması gerektiğini kontrol edebilirsiniz:

• Gönderi, sayfalar ve özel gönderi türleri (tüm içerik alanları)
• Widget'lar (kenar çubuğu, üstbilgi ve altbilgi)
• Küçük resim yayınlamak için uygula
• Gravatarlara Uygula

3. WordPress Lazy Load Videoları ve iFrame'ler

a3 Lazy Load, yalnızca tembel yükleme görüntüleri ile sınırlı değildir, aynı zamanda videoları tembel olarak yüklemenize de olanak tanır. İlk yüklemede videoları yüklemek için iFrame'leri kullanan tüm WordPress video yerleştirmelerini destekler. Yine, AÇIK/KAPALI geçişleri içerir. Açıksa, aşağıda belirtilen alanları kontrol edebilirsiniz:

• URL'ye göre gönderilere ve sayfalara yerleştirilmiş videolar (tüm içerik alanları)
• Widget türleri, metin widget'ı ve HTML widget'larındaki videolar
• Popüler YouTube Embed Eklentisi ile Tam Uyumlu

4. WordPress Tembel Yük Yorumları

WordPress kullanıcılarının çoğu tarafından kullanılan bir dizi WordPress yorum eklentisi vardır. Farklı WordPress tembel yükleme eklentileri kullanılarak çoğuna tembel yükleme uygulanabilir:

• Varsayılan WordPress yorumları için, Yorumlar için Lazy Load'u kullanabilirsiniz.
• Disqus yorumları için Disqus Koşullu Yükü kullanabilirsiniz.
• Facebook yorumları için Tembel Facebook Yorumlarını kullanabilirsiniz.

5. 5. WordPress için Daha Fazla Tembel Yükleme Eklentisi

a3 Lazy Load'un yanı sıra, dikkate alınabilecek bir dizi faydalı eklenti vardır:

• a3 Tembel Yük
• bj tembel yük
• WordPress Infinite Scroll – Ajax Daha Fazla Yükle
• WP Rocket'ten Tembel Yük
• WooCommerce için Daha Fazla Ürün Yükleyin
• Yorumlar için Tembel Yük
• Disqus Koşullu Yük
• Videolar için Tembel Yükleme

WordPress Sonsuz Kaydırma

Adından da anlaşılacağı gibi, sonsuz kaydırma otomatik olarak bir sonraki sayfayı ekler ve tam sayfadan bir kerede yüklemek için zaman kazanmanızı sağlar. Örneğin, muhtemelen bunu Facebook Haber Kaynağı'nda deneyimlemişsinizdir. Sadece aşağı kaydırmaya devam edersiniz ve besleme, tüm sayfa yükü yerine otomatik olarak güncellenir.

WordPress'te bunu WordPress Infinite Scroll İndir – Ajax Daha Fazla Yükle eklentisini kullanarak uygulayabilirsiniz. AJAX destekli sorgularla gönderileri, tek gönderileri, sayfaları, yorumları ve daha fazlasını tembelce yüklemek için kullanılır.

Sadece bu değil, aynı zamanda tüm web sayfasını yüklemeden binlerce ürünü görüntüleyen WooCommerce ve Easy Digital Downloads gibi popüler e-ticaret eklentileriyle sonsuz kaydırma yapmak için de kullanışlıdır.

Google Chrome, Tembel Yükü Varsayılan Olarak Entegre Edebilir

Google, tembelce yüklenen içeriği daha erişilebilir hale getirmek için çalışıyor. Ayrıca, Google Chrome'da tembel yükleme için destek ekleme olanaklarını deniyor. Bu nedenle, sayfaların yalnızca o anda ekranda görüntülenen kısımlarını yükleyecek ve siz aşağı kaydırdıkça "ekranın alt kısmındaki" her şey yüklenecektir.

Şu anda, geliştiriciler ve erken benimseyenler için tasarlanmış bir erken yayın sürümü olan Google Chrome Canary'de test edilebilir. Denemek için Canary'yi indirin, ardından adres çubuğuna aşağıya girin:

• chrome://flags/#enable-lazy-image-loading
• chrome://flags/#enable-lazy-frame-loading

Bu işaretler etkin olduğunda, Google Chrome o anda ekranda görünmeyen hiçbir resmi veya iFrame'yi yüklemez. Google Chrome'da web sayfalarının daha hızlı yüklenmesine yardımcı olacak ve bant genişliği kullanımını azaltarak mobil tarayıcılar için özellikle kullanışlı bir özellik haline getirecektir. Devam edin ve mobil ziyaretçilerinize daha iyi bir şekilde hizmet verin!