Performans
2025
WordPress Hızlandırma 2025: Cache Eklentileri, WebP/AVIF, CDN ve Core Web Vitals Yükseltme
Bu kapsamlı rehberde cache eklentileri (LiteSpeed, WP Rocket, W3TC), WebP/AVIF görsel dönüşümü,
CDN (Cloudflare/BunnyCDN) yapılandırması ve Core Web Vitals (LCP/INP/CLS) iyileştirmelerini adım adım anlatıyoruz.
Hedef: ilk boyalı içerik süresini kısaltmak, etkileşim gecikmesini düşürmek ve dönüşümü artırmak.
INP ↓ 280ms → 160ms
CLS ↓ 0.18 → 0.03
Sayfa Boyutu ↓ -45%
1 Ön Koşullar & Hız Ölçümü
Lighthouse
WebPageTest
Hız optimizasyonuna başlamadan önce bir baz skor oluşturun. Hem mobil hem masaüstü için ölçüm alın ve değişiklikleri küçük adımlarla yapıp yeniden test edin.
- PSI/Lighthouse: LCP, INP, CLS için maksimum hedefler: LCP < 2.5s, INP < 200ms, CLS < 0.1.
- WebPageTest:
TTFB,Start Render,Fully LoadedveWaterfallanalizi. - Gerçek Kullanıcı Verisi (CrUX): Sabit laboratuvar skorlarından farklı olabilir; field data önceliklidir.
s →
s
ms →
ms
→
KB →
KB
İpucu
Testleri temiz oturum ve soğuk cache ile yapın. Tarayıcı uzantılarını kapatın. CDN/HTML cache etkisini ayrı ayrı ölçün.
2 Cache Eklentileri Karşılaştırması
| Eklenti | Öne Çıkanlar | Uygun Ortam | Not |
|---|---|---|---|
| LiteSpeed Cache | Server-level cache, QUIC.cloud CDN, ESI, görüntü optimizasyonu | LiteSpeed/QUIC sunucu, paylaşımlı hosting | Sunucu destekliyse ilk tercih. |
| WP Rocket | Kolay arayüz, preloading, delay JS, kritik CSS |
Çoğu ortam, Nginx/Apache | Premium; PWA/SPA ile test gerek. |
| W3 Total Cache | Granüler ayar, object/db cache entegrasyonları | Gelişmiş/özel yapı | Öğrenme eğrisi yüksek. |
# Nginx: statik varlıkları uzun süre cache'le
location ~* \.(?:css|js|jpg|jpeg|gif|png|svg|webp|avif|woff2?)$ {
expires 30d;
add_header Cache-Control "public, immutable";
}
# Apache (.htaccess): gzip/br + cache headers
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/javascript
</IfModule>
<IfModule mod_brotli.c>
BrotliCompressionQuality 5
</IfModule>
<FilesMatch "\.(css|js|jpg|jpeg|png|svg|webp|avif|woff2?)$">
Header set Cache-Control "public, max-age=2592000, immutable"
</FilesMatch>
3 Görsel Optimizasyonu (WebP/AVIF)
Görseller çoğu sitede toplam boyutun %50+’sini oluşturur. AVIF (en yüksek sıkıştırma) ve WebP formatlarına otomatik dönüşüm sağlayın; responsive ve lazy yüklemeyi etkinleştirin.
- Format seçimi: AVIF > WebP > JPEG/PNG (uyumluluk için picture kullanın).
- Boyutlandırma:
srcsetvesizesile cihaz genişliğine göre ölçekleme. - Lazy Load:
loading="lazy",fetchpriorityile kahraman görseli preload.
<picture>
<source type="image/avif" srcset="/img/hero-480.avif 480w, /img/hero-960.avif 960w">
<source type="image/webp" srcset="/img/hero-480.webp 480w, /img/hero-960.webp 960w">
<img src="/img/hero-960.jpg" width="960" height="540"
loading="eager" fetchpriority="high"
alt="Hızlı WordPress sayfası">
</picture>
<link rel="preload" as="image"> ile önden çağırın.aspect-ratio belirtin.4 CDN Kurulumu & Kuralları
DNS & HTTP/3
CDN sağlayıcısında (Cloudflare/Bunny) DNS’i yönetin, HTTP/3 ve brotli’yi aktif edin.
Edge Cache Politikası
Statik varlıklar için uzun TTL, HTML için cache bypass + eklenti cache kullanın.
Görüntü İşleme
CDN Image Resizing ile otomatik WebP/AVIF + width parametreleri.
- Origin pull/SSL ayarları doğru
- Hotlink koruması açık
- Query string normalizasyonu
- HTML cache varyantları (device/lang)
5 Core Web Vitals İyileştirme
- Kahraman görselini preload edin, fetchpriority=”high” kullanın.
- Kritik CSS çıkarımı (inline) + geri kalanını
media/defer ile alın. - TTFB düşürmek için server cache ve OPcache.
- Üçüncü taraf scriptleri delay/defer, kritik olanları önceliklendirin.
- Uzun görevleri (
>50ms) bölün,requestIdleCallbackkullanın. - Hydration/JS bundle küçültme, component-level lazy.
- Medya için genişlik/yükseklik veya
aspect-ratio. - Web fontlarda
font-display: swap+ FOIT/FLASH azaltma. - Banner/yerleşim değişikliklerini boyut rezervi ile çözün.
6 Tema & Eklenti Diyeti
Aşırı çok amaçlı temalar ve gereksiz eklentiler, kritik yol üzerinde ağır JS/CSS bırakır. İhtiyaç bazlı minimal yaklaşım en etkili hız kazanımıdır.
- Tek iş yapan hafif eklenti tercih edin; çakışmaları Query Monitor ile yakalayın.
- Global asset’leri yalnızca ihtiyaç duyulan şablonlarda yükleyin.
- Emoji/embeds gibi çekirdek özellikleri kapatın;
wp-emoji-release.min.jsiptali.
// functions.php: Emoji ve oEmbed devre dışı
remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action('wp_head', 'wp_oembed_add_discovery_links');
7 Sunucu Optimizasyonu
- PHP 8.2/8.3 + OPcache
- HTTP/2 + HTTP/3 (QUIC) etkin
- Object Cache (Redis/Memcached)
- Database indeksleri & cron optimize
TTFB İyileştirme
Edge lokasyonlara yakın barındırma, server cache ve persistent object cache ile TTFB’yi hissedilir ölçüde düşürür.
8 WooCommerce Özel Notlar
Sepet/Ödeme gibi sayfaları HTML cache dışı bırakın; Don’t cache pages kuralı ekleyin.
Filtre/Facet için AJAX + cache uyumlu çözüm; preload key requests.
Site içi aramayı serverless/instant servislerle hızlandırın veya sorguları indeksleyin.
9 İzleme & Raporlama
Laboratuvar skorları tek başına yeterli değildir. GA4 ve web-vitals kütüphanesi ile sahadan metrik gönderin.
- Özel boyutlarla LCP/INP/CLS değerlerini GA4’e event olarak aktarın.
- CDN ve cache değişikliklerinden sonra trend takibi yapın.
// GA4'e Web Vitals gönderimi (örnek)
import {onLCP, onINP, onCLS} from 'web-vitals';
const send = (name, value) => gtag('event', name, {value: Math.round(value), non_interaction: true});
onLCP((m) => send('LCP', m.value));
onINP((m) => send('INP', m.value));
onCLS((m) => send('CLS', m.value));
Sık Sorulan Sorular