Lazyload Kodu WordPress’te Nasıl Kullanılır?

Web siteleri günümüzde hız ve performans açısından oldukça önemli bir rol oynamaktadır. Özellikle görseller ve diğer medya dosyaları sayfa yükleme süresini olumsuz etkileyebilir. Bu noktada “Lazy Loading” (Tembel Yükleme) tekniği devreye girer. Lazyload, bir web sayfasındaki içeriklerin (görseller, videolar, iframeler vb.) sadece gerektiğinde, yani kullanıcı sayfada o noktaya ulaştığında yüklenmesini sağlar. Bu sayede sayfa yükleme süresi kısalır ve kullanıcı deneyimi iyileşir. Bu rehberde, Lazyload tekniğinin WordPress’te nasıl kullanılacağını adım adım ele alacağız.

Lazyload Nedir?

Lazyload, web sayfalarının daha hızlı yüklenmesini sağlamak için geliştirilmiş bir tekniktir. Sayfa ilk yüklendiğinde yalnızca görünen içerikler yüklenir, sayfanın alt kısımlarında yer alan diğer içerikler (görseller, videolar, iframeler) ise kullanıcı sayfayı aşağıya kaydırdıkça yüklenir. Bu yöntemle hem sayfa yükleme süreleri azaltılır hem de bant genişliği tasarrufu sağlanır.

Lazyload’ın Avantajları

• Daha Hızlı Sayfa Yükleme: Görsellerin ve diğer medya dosyalarının hemen yüklenmemesi, sayfanın daha hızlı yüklenmesine olanak tanır.
• Daha Az Bant Genişliği Tüketimi: Kullanıcı yalnızca gördüğü içerikleri indirir, böylece gereksiz veri transferi engellenir.
• SEO’ya Katkı: Hızlı yüklenen sayfalar, arama motorları tarafından daha yüksek değerlendirilebilir.
• İyileştirilmiş Kullanıcı Deneyimi: Hızlı yüklenen sayfalar kullanıcıları sitede daha uzun süre tutabilir.

WordPress’te Lazyload Nasıl Kullanılır?

WordPress kullanıcıları için Lazyload özelliğini etkinleştirmek oldukça kolaydır. İşte Lazyload’u WordPress sitenizde kullanmanın birkaç yolu:

1. Eklenti Kullanarak Lazyload

WordPress eklenti deposunda Lazyload özelliğini eklemek için çeşitli eklentiler mevcuttur. Bunlardan bazıları:

• WP Rocket: Sadece Lazyload değil, birçok performans optimizasyonu özelliği sunan bir premium eklentidir.
• a3 Lazy Load: Ücretsiz bir eklenti olan a3 Lazy Load, görseller, videolar ve iframeler için Lazyload desteği sağlar.
• Lazy Load by WP Rocket: Bu eklenti WP Rocket’in sadece Lazyload özelliğini sunan ücretsiz bir versiyonudur.

1.1. Eklenti Kurulumu ve Ayarları

1. Eklenti Kurulumu: WordPress yönetici paneline gidin ve “Eklentiler > Yeni Ekle” yolunu izleyin. Yukarıdaki eklentilerden birini aratıp “Şimdi Kur” butonuna tıklayın.
2. Eklentiyi Etkinleştirme: Kurulum tamamlandıktan sonra “Etkinleştir” butonuna tıklayın.
3. Ayarları Yapılandırma: Eklenti etkinleştirildikten sonra, Lazyload ayarlarını yapılandırmak için ilgili eklentinin ayar sayfasına gidin. Burada, Lazyload’un hangi içerik türleri için etkin olacağını seçebilirsiniz.

2. Kod ile Lazyload Ekleme

Eğer eklenti kullanmak istemiyorsanız, Lazyload özelliğini manuel olarak kod ile de ekleyebilirsiniz. İşte adım adım nasıl yapabileceğiniz:

2.1. JavaScript ile Lazyload

Görselleri Lazyload yapmak için JavaScript tabanlı bir çözüm kullanılabilir. İşte bir örnek:

1. HTML’de Görsellerin Veri Kaynaklarını Değiştirin:

//html//
<img src="gorsel-yer-tutucu.jpg" data-src="orijinal-gorsel.jpg" alt="Görsel">

2. JavaScript Kodunu Ekleyin:

//javascript//
document.addEventListener("DOMContentLoaded", function() {
       var lazyloadImages = document.querySelectorAll("img[data-src]");
       var imageObserver = new IntersectionObserver(function(entries, observer) {
           entries.forEach(function(entry) {
               if (entry.isIntersecting) {
                   var image = entry.target;
                   image.src = image.dataset.src;
                   imageObserver.unobserve(image);
               }
           });
       });

       lazyloadImages.forEach(function(image) {
           imageObserver.observe(image);
       });
   });

3. JavaScript Dosyasını WordPress Temasına Entegre Etme:

//php//
function my_enqueue_scripts() {
wp_enqueue_script('lazyload-js', get_template_directory_uri() . '/js/lazyload.js', array(), null, true);
   }
   add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Bu kod ile Lazyload işlemi manuel olarak yapılabilir. Bu çözüm genellikle daha esnek olmasını isteyen geliştiriciler tarafından tercih edilir.

Performans Testleri ve Sonuçlar

Lazyload uygulandıktan sonra, web sitenizin performansını test etmek önemlidir. GTmetrix, Google PageSpeed Insights gibi araçları kullanarak sayfa hızınızı ölçebilir ve Lazyload’un site performansına etkisini gözlemleyebilirsiniz.

Değerlendirme

Lazyload tekniği, WordPress sitenizin hızını artırmak ve kullanıcı deneyimini geliştirmek için güçlü bir yöntemdir. Eklentiler ile kolayca entegre edilebileceği gibi, manuel olarak kod ile de eklenebilir. Hangi yöntemi tercih ederseniz edin, sitenizin performansını artırmak için bu tekniği kullanmanızı şiddetle öneririz.