Hız testlerini tamamladık, önbellek (cache) sistemini kurduk ama siteniz hala istediğiniz kadar seri açılmıyor mu? O zaman suçluyu uzaklarda aramayın: Sayfanızdaki devasa boyutlu görseller!

Ortalama bir web sayfasının boyutunun yarısından fazlasını görseller oluşturur. Bu görselleri optimize etmeden sitenizin Google Core Web Vitals (Önemli Web Verileri) testlerinden yüksek puan alması imkansızdır.

pcnett.com okuyucuları için hazırladığımız bu teknik rehberde, görsellerinizi WebP formatına nasıl dönüştüreceğinizi ve sitenizi uçuracak olan Lazy Load (Gecikmeli Yükleme) mantığını inceliyoruz.

Görsel Optimizasyonu: WebP Dönüşümü ve Lazy Load (Gecikmeli Yükleme)

Görsel optimizasyonu, sitenizin hızı kadar kullanıcı deneyimini (UX) ve SEO'yu da doğrudan etkiler. Bu işin iki temel yapı taşı vardır: doğru format ve doğru yükleme yöntemi.

1. WebP Formatı Nedir? Neden JPEG/PNG Yerine Kullanılmalı?

WebP, Google tarafından geliştirilen, web için özel olarak üretilmiş modern bir görsel formatıdır.

• Neden Kullanılmalı? WebP görseller, aynı kalitede olmalarına rağmen JPEG dosyalarından ortalama %25-34, PNG dosyalarından ise %26 daha az yer kaplar.

• Daha Küçük Dosya = Daha Hızlı Site: Ziyaretçilerinizin bilgisayarına veya telefonuna daha az veri indirilir, site daha hızlı açılır.

WordPress'te WebP Dönüşümü Nasıl Yapılır?

• Yöntem A (Otomatik Eklenti): Bir önceki makalemizde bahsettiğimiz LiteSpeed Cache veya Smush / ShortPixel gibi eklentileri kullanarak mevcut JPEG/PNG görsellerinizi otomatik olarak WebP formatına çevirebilirsiniz. Bu eklentiler, ziyaretçinin tarayıcısı WebP'yi destekliyorsa o formatı gösterir (günümüzde tüm tarayıcılar destekliyor).

• Yöntem B (WebP Express Eklenti): Eğer LiteSpeed kullanmıyorsanız, bu basit ve hafif eklenti ile mevcut kütüphanenizi WebP'ye dönüştürebilirsiniz.

2. Lazy Load (Gecikmeli Yükleme) Mantığı

Bir kullanıcının, sitenizdeki 3000 kelimelik uzun bir makaleyi okumak için tıkladığını düşünün. Sayfanın en altında, kullanıcının belki de hiç görmeyeceği 10 tane daha görsel olabilir.

Varsayılan (lazy load kapalı) ayarda, tarayıcı bu 10 görseli de aynı anda yüklemeye çalışır. Bu da sitenin açılışını (LCP metrik) ciddi oranda yavaşlatır.

• Lazy Load (Tembel Yükleme) Çözümü: Bu yöntemle, tarayıcıya "Sadece ekranın içinde görünen görselleri yükle; kullanıcının aşağı kaydırmasını (scroll) bekle" denir. Kullanıcı aşağıya doğru indikçe, görseller o an yüklenir.

3. WordPress'te Lazy Load Ayarları ve Püf Noktaları

WordPress 5.5 sürümüyle birlikte çekirdek seviyesinde (native) Lazy Load desteği kazandı. Artık görsellerinize loading="lazy" etiketi otomatik ekleniyor. Ancak profesyonel bir optimizasyon için ince ayarlar gerekir:

A. Profesyonel Lazy Load Ayarı (LiteSpeed/WP Rocket): Hız eklentinizin (LiteSpeed/WP Rocket) görsel ayarlar sekmesine gidin.

• Enable Lazy Load (Gecikmeli Yüklemeyi Etkinleştir): Açık (ON) konuma getirebilirsiniz. Bu, tarayıcının native desteğinden daha gelişmiş ve uyumlu bir yükleme sunar.

• Exclude Images From Lazy Load (Hariç Tutulacak Görseller): Burası en kritik adımdır. Sayfanın en üstünde, ziyaretçinin ilk gördüğü (Above the fold) görselleri (Örn: Öne Çıkan Görsel / Featured Image) LAZY LOAD'DAN HARİÇ TUTMALISINIZ. Eğer ana görseli geciktirirseniz, Google LCP metrik puanınız daha da kötüleşir. Eklenti ayarlarına o görselin CSS class adını veya URL'sini ekleyerek hariç tutun.

B. "Placeholder" (Yer Tutucu) Kullanımı: Ziyaretçi aşağı kaydırırken görsel henüz yüklenmemişse, o alanda boşluk veya renkli bir kare görünür. LiteSpeed Cache gibi eklentiler, görsellerin gerçek boyutu kadar boş bir alan ayırır (CLS metriği düzeltir). Püf noktası olarak bu alana çok hafif (Örn: 1-2 KB) düşük kaliteli bir yer tutucu (Low Quality Image Placeholder - LQIP) koyabilirsiniz.

Görsellerinizi optimize ederek sitenizin teknik altyapısındaki en büyük "freni" kaldırdınız. Artık fırtınalara dayanıklı, hızlı ve modern bir siteniz var. Teknik kurulum sürecini tamamladık! Daha fazla hız ve teknik ipucu için WordPress A'dan Z'ye Geliştirme Rehberi sayfamızdaki içerikleri takipte kalmaya devam edin.