Görüntü ve Medya Optimizasyonu

Resim ve Videolar için Lazy Loading ile WordPress'i Hızlandırın (Eklenti Gerekmez)

Eklentiler olmadan WordPress'te tembel yükleme resimleri ve videoları

Tembel yükleme, WordPress sitenizin özellikle mobil cihazlarda daha hızlı yüklenmesini sağlamanın en basit ve en etkili yollarından biridir ve bunu uygulamak için bir eklentiye bile ihtiyacınız yoktur. Bu kılavuzda, temiz ve hafif kod kullanarak görseller ve videolar için yerel tembel yüklemeyi manuel olarak nasıl etkinleştireceğinizi göstereceğiz.

Lazy Loading Nedir?

Tembel yükleme, resim ve videolar gibi medya varlıklarının yalnızca kullanıcının görüş alanına girmek üzereyken (yani ekranda görünür hale gelirken) yüklendiği bir performans tekniğidir. Bu, ilk sayfa yüklemesindeki HTTP isteklerinin sayısını azaltır ve siteyi daha hızlı ve daha hafif hale getirir.

Tembel Yüklemenin WordPress Performansı İçin Neden Kritik Olduğu

  • İlk Sayfa Ağırlığını Azaltır: Sayfalar daha hızlı yüklenir çünkü önceden daha az kaynak talep edilir.
  • Bant Genişliğinden Tasarruf: Görülmeyen medya ihtiyaç duyulmadığı sürece indirilmez.
  • Core Web Vitals'ı iyileştirir: Tembel yükleme, En Büyük İçerikli Boya (LCP) gibi metrikleri iyileştirir.
  • Daha İyi SEO ve Kullanıcı Deneyimi: Hız bir sıralama faktörüdür. Daha hızlı bir site kullanıcıların ilgisini canlı tutar.

Görüntüler için Yerel Tembel Yükleme Nasıl Uygulanır

WordPress 5.5'ten bu yana, yerel tembel yükleme otomatik olarak resim etiketlerine ekleniyor loading="lazy" öznitelik. Bunun düzgün çalışmasını minimum ayarlamalarla sağlayabilirsiniz:

<img src="your-image.jpg" alt="description" loading="lazy" width="600" height="400">

En iyi uygulama: Her zaman belirtin width Ve height düzen kaymalarını önlemek için (CLS puanı için önemli).

Tüm Görseller İçin Tembel Yüklemeyi Zorlama (İsteğe Bağlı)

Bazı temalar veya eklentiler eklemeyi atlarsa loading="lazy"Bunu basit bir JavaScript kod parçacığıyla zorlayabilirsiniz:

<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('img:not([loading])').forEach(function(img) { img.setAttribute("loading", "lazy"); }); }); </script>

Bu betiği altbilginize ekleyin veya düzgün bir şekilde dahil etmek için bir alt tema kullanın.

OKUMAK  Daha Hızlı WordPress Site Performansı İçin Görseller Nasıl Optimize Edilir

Eklentiler Olmadan Tembel Yüklenen Videolar

Videolar ağırdır. YouTube veya Vimeo'dan gelen yerleştirmeler birden fazla harici betik yükler. Eklentiler olmadan tembel yükleme yapmak için, iframe'i tıklanabilir bir resim önizlemesiyle değiştirin ve videoyu yalnızca etkileşimden sonra yükleyin.

Örnek: Lazy Load YouTube Videosu

<div class="youtube-lazy" data-id="VIDEO_ID"> <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube preview" loading="lazy"> <div class="play-button"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-lazy").forEach(function(el) { el.addEventListener("click", function() { let iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.youtube.com/embed/" + el.dataset.id + "?autoplay=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); el.innerHTML = ""; el.appendChild(iframe); }); }); }); </script>

Yer değiştirmek VIDEO_ID gerçek YouTube video kimliğiyle.

Yardımcı Stil (İsteğe bağlı)

Güzel görünmesi için biraz temel CSS ekleyin:

.youtube-lazy { position: relative; cursor: pointer; max-width: 100%; aspect-ratio: 16/9; background: #000; } .youtube-lazy img { width: 100%; height: auto; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url('play-icon.svg') center center no-repeat; background-size: contain; }

Neden Eklenti Kullanmıyorsunuz?

Eklentiler kullanışlıdır ancak genellikle ekstra betikler, stiller veya şişkinlikle gelir. Manuel tembel yükleme size şunları sağlar:

  • Yüklenenler üzerinde daha fazla kontrol
  • Üçüncü taraf özelliklerinin performans üzerinde hiçbir etkisi yoktur
  • Daha temiz ön uç çıktısı

Bir Eklentiyi Ne Zaman Düşünmelisiniz

Sık sık medya yüklenen büyük bir web siteniz varsa veya kod konusunda deneyimi olmayan katkıda bulunanlarınız varsa, bu optimize edilmiş tembel yükleme eklentilerini değerlendirin:

  • LiteSpeed Önbelleği (eğer sunucunuz destekliyorsa)
  • Uçan Basın
  • Performans Önemlidir (prim)

Ancak unutmayın, bu eklentilerle bile DevTools'da gerçek tembel yükleme davranışını incelemek şarttır.

Son İpuçları

  • Tarayıcı DevTools'unu kullanarak test edin loading="lazy" uygulanır
  • Sitenizi şu şekilde test edin: Google PageSpeed İçgörüleri
  • Tembel yükleme etkinleştirildikten sonra LCP iyileştirmelerini izleyin
OKUMAK  WordPress'te JPEG Optimizasyonu: Daha Hızlı Siteler İçin Eksiksiz Bir Kılavuz

Şişkin eklentiler olmadan WordPress hızını artırmak için uzman yardımına mı ihtiyacınız var? Ücretsiz manuel denetimi deneyin HızlıWP Pro — çekirdekten optimize ediyoruz.