Resim ve Videolar için Lazy Loading ile WordPress'i Hızlandırın (Eklenti Gerekmez)
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.
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
Ş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.
