Rehber
2025
WordPress Hızlandırma 2025: Core Web Vitals (LCP, INP, CLS) ve PageSpeed Puanını Yükseltme Rehberi
Bu kapsamlı rehberde, Core Web Vitals eşikleri (LCP, INP, CLS), PageSpeed Insights
skorlarını iyileştirme, görsel optimizasyonu (WebP/AVIF), cache & CDN,
kritik CSS ve JS optimizasyonu gibi pratik adımları net örneklerle anlatıyoruz.
Hedef: daha hızlı yükleme, daha iyi dönüşüm, daha yüksek Google sıralaması.
- LCP & INP Düşürme: görsel/JS ağırlığını azalt, kritik kaynakları önceliklendir.
- CDN + Cache: TTFB’yi düşür, tekrar ziyaretlerde anında açılış sağla.
- Temiz Mimari: Az eklenti, az sorgu, az render-bloklayıcı.
* Benzer projelerde gözlenen ortalama etkiler; sektör ve başlangıç durumuna göre değişebilir.
1) Core Web Vitals Nedir? Eşikler
INP ≤ 200ms
CLS ≤ 0.1
LCP, en büyük içerik öğesinin görünür olma süresidir. INP, kullanıcı etkileşimlerine toplam yanıt verme kalitesini temsil eder. CLS, sayfa düzen kaymalarını ölçer. Hedef, yeşil eşikleri tutturmaktır.
2) Ölçümleme: PSI, Lighthouse, Field vs Lab
PageSpeed Insights
Gerçek kullanıcı verisi (CrUX) + Laboratuvar testleri. Field veriye öncelik verin.
Lighthouse
Yerel/lab test; değişken. Trendleri kıyaslamak için iyi.
RUM Araçları
Gerçek kullanıcı izleme (RUM) ile cihaz/ülke bazlı dağılımı görün.
3) Sunucu & PHP & CDN Temelleri
- TTFB & Lokasyon: Hedef kitlenize yakın lokasyon seçin, HTTP/2 veya HTTP/3 destekleyin.
- PHP 8.x: Yeni sürümler daha hızlı. OPcache açık olsun.
- CDN: Statik dosyaları kenara taşıyarak ilklendirmeyi hızlandırın.
4) Görsel Optimizasyonu: WebP/AVIF, Srcset
Dönüştürme
- JPEG/PNG → WebP (genel), AVIF (en yüksek sıkıştırma)
- Lazy-load + width/height ekleyin (CLS koruması)
Responsive
<img
src="/img/hero-1200.webp"
srcset="/img/hero-600.webp 600w, /img/hero-900.webp 900w, /img/hero-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 720px"
width="1200" height="630" loading="lazy" decoding="async" alt="Kapak">
5) Kritik CSS, Render-Bloklayıcı Kaynaklar
Kritik CSS
Above-the-fold stilleri inline verin, geri kalanı media veya defer ile yükleyin.
<style>/* kritik stiller */ body{min-height:100vh} .hero{min-height:320px}</style>CSS/JS Yükleme
<link rel="preload" as="style" href="/css/main.css" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>
<script src="/js/app.js" defer></script>
6) JS Optimizasyonu & INP İyileştirme
- Bundle küçültme: Kullanılmayan JS’leri kaldırın; modüler yükleme yapın.
- Etkinlik dinleyicileri: Ağır callback’leri requestIdleCallback ile erteleyin.
- 3. taraf kütüphaneler: Kullanım başına yükleyin (conditional).
// Etkileşimi engellemeyen erteleme
requestIdleCallback(() => import('/js/analytics-lite.js'));
7) Cache Stratejileri: Page, Browser, Object
Tarayıcı Cache
# Nginx örneği
location ~* \.(css|js|jpg|jpeg|png|webp|svg|gif)$ {
expires 30d; add_header Cache-Control "public, max-age=2592000, immutable";
}Object Cache
Redis/Memcached ile DB sorgularını hafızaya alın; dinamik sayfalarda fark yaratır.
8) DB Optimizasyonu, Sorgu Azaltma
- Eklenti sayısını minimize edin; ağır sorgu çalıştıranları değiştirin.
- Transients/CRON temizlikleri yapın; revizyon, spam, geçici tabloları optimize edin.
9) Font Yönetimi: Preload, Swap
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/fonts/Inter-Variable.woff2" crossorigin>
<style>@font-face{font-family:Inter;src:url(/fonts/Inter-Variable.woff2) format('woff2');font-display:swap}</style>
10) Üçüncü Taraf Scriptleri: Etiket & Yük
- Tag Manager’da tetikleyicileri gözden geçirin; ilk boyamada gerekli olmayan etiketleri geciktirin.
- Chat/ıslak harita/ıframe gibi ağır scriptleri butona tıklayınca yükleyin (lazy hydrate).
11) HTTP/2-3, Brotli, Preconnect, Early Hints
Sıkıştırma
# Brotli (Nginx)
brotli on;
brotli_comp_level 5;
brotli_types text/plain text/css application/javascript application/json image/svg+xml;Bağlantı İpuçları
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="//cdn.example.com">
12) Kontrol Listesi + Mini Şablonlar
- CDN aktif, cache politikaları tanımlı
- WebP/AVIF + width/height set edildi
- Kritik CSS inline, geri kalan gecikmeli
- JS defer, üçüncü taraf scriptler koşullu
- Redis/Memcached aktif, sorgular minimal
- Font preload + font-display: swap
Sık Sorulan Sorular