Hız, web’de “ilk izlenimin” ta kendisi. Yavaş site; okuru, sıralamayı, AdSense gelirini aynı anda götürür. İyi haber şu: WordPress’i doğru kurgularsan, “temiz bir usta işi” ile 2–5 kat hızlanma mümkün. Bu rehberde, cache → CDN → görsel optimizasyonu → kritik CSS/JS → veritabanı/nesne önbelleği → tema/eklenti diyeti → sunucu ayarları sırasıyla, adım adım ve tersine çevrilebilir şekilde ilerleyeceğiz. Mantık; önce en çok kazandıranı düzelt, sonra ince işçilik.
Kısa espri molası: “Sitem hızlı olsun ama hiçbir şeyi değiştirmeden.” — O da olur: boş bir sayfa açarsın. 🙂 Şaka bir yana, biz “düzeni bozmadan” hızlandıracağız.
0) Yol Haritası (Okunur Plan)
- Fotoğraf ve tema/eklenti envanteri çıkar.
- Ölçüm yap: Laboratuvar (Lighthouse) + saha (Chrome UX/GA4 ortalama sayfa yükleri).
- Statik cache’i devreye al, HTML cache + TTL kur.
- Görselleri WebP/AVIF + lazy-load + boyut sabitleme.
- Kritik CSS üret, geri kalan CSS’yi geciktir; JS’yi ertele/defer.
- CDN + HTTP/2/3 ve edge cache.
- Veritabanı/Transients/Autoload temizliği, Object Cache (Redis).
- WP-Cron → gerçek cron, Heartbeat ince ayar.
- Font optimizasyonu (swap, ön yükleme, alt set).
- Sürüm kontrolü ve yedek ile kalıcılaştır.
Bu adımların hepsini yapmaya mecbur değilsin; ama sırayı bozma—en çok fayda ilk 5 adımda.
1) Ölçüm: Neyi Hızlandırdığımızı Bilmek
Laboratuvar (Lab):
- Lighthouse/Pagespeed (masaüstü + mobil). Tek URL’ye değil, temsilci sayfalara bak: anasayfa, tekil yazı, kategori, en ağır içerik.
- Önemli metrikler: LCP (en büyük içerik boyaması), CLS (düzen kayması), INP (etkileşim yanıtı).
Saha (Field):
- GA4’te ortalama sayfa yüklenme süresi, cihaz kırılımı, ülke/bağlantı.
- Chrome UX varsa (popüler sayfalar), gerçek kullanıcı değerlerini görürsün.
Gerçek hedefler (mobil):
- LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1.
- İlk turda hepsini aynı anda tutturmak şart değil; LCP + CLS öncelikli.
Hız Bütçesi kur:
- Sayfa HTML ≤ 80–120 KB
- Toplam CSS (kritik hariç) ≤ 150–300 KB
- İlk ekran görseli ≤ 120–250 KB (WebP/AVIF)
- Toplam istek sayısı ≤ 60 (ilk yüklemede)
2) Cache’in Temeli: Statik Dosyalar ve HTML
Tarayıcı cache’i:
- Cache-Control:
public, max-age=31536000, immutable(CSS/JS/fonts için sürümlenmiş dosyalarda) - Gzip/Brotli açık.
- ETag yerine Last-Modified + Cache-Control kombinasyonu daha stabil.
WordPress seviyesinde HTML cache:
- Maksimum kazanç: anonim kullanıcı için tam sayfa cache.
- TTL (yaşam süresi): 10–120 dk arası çoğu içerik sitesi için idealdir. Çok dinamik kısımlar (sayaç, rastgele yazı) varyasyonla çözülür.
- Cache ön ısıtma (preload): Menü/kategori/son yazılar rotoruna göre popüler sayfaları otomatik ısıt.
Kenar notu:
- Üye girişi, sepet, kişiselleştirme gibi sayfalarda cache bypass.
- Query string’ler (ör.
?utm=) cache’i böler; CDN-tarafı kurallarla normalize et.
3) Görsel Optimizasyonu: LCP’yi Kurtaran Üçlü
- Format:
- WebP ve mümkünse AVIF (daha küçük ama her tarayıcı tam desteklemiyor; ikisini picture etiketiyle şartlı sun).
- PNG sadece şeffaf/illüstrasyon. Fotoğraflarda JPEG/WebP/AVIF.
- Boyut & DPR (srcset):
- WordPress’in çoklu boyutlarını akıllı kullan:
srcsetvesizesile cihaz genişliğine uygun kaynak seçilsin. - Kahraman görseli (LCP adayı) 1200–1600 px genişlikte, kalite %60–75; 100–200 KB hedef.
- Boyut sabitleme: CSS/HTML’de genişlik–yükseklik ver; CLS sıfıra yaklaşır.
- Lazy-load ve ön yükleme:
- İlk ekran LCP adayı lazy-load edilmez; geri kalanlar
loading="lazy". - LCP adayını preload:
<link rel="preload" as="image" imagesrcset="..." imagesizes="..." href="...">. - Responsive arka plan görselleri: Kritikte arka plan kullanma; kullanıyorsan
mediaile küçük varyant hazırla.
- CDN görüntü işleme (varsa):
- “On-the-fly” optimize eden CDN’ler (en-boy/kırpma/format) bant genişliğini ciddi keser.
- Orijinal görseli büyük yükle, ama çıktıyı sayfa için tam ölçüde ver.
SVG:
- İkon/logolarda SVG kullan; CSS ile renklendirilebilir, piksel değil vektör.
4) CSS: Kritik Stil ve Geri Kalanın Ertelenmesi
Kritik CSS (Critical CSS):
- İlk ekranı oluşturan minimum stil. Bunu tema başına ve “layout tipi” başına üret.
- Geri kalan CSS’yi
media="print"hilesiyle veyarel="preload" onload="this.rel='stylesheet'"ile sonradan uygula (tema/eklenti uyumluluğuna göre). - Birleştir (combine) her zaman iyi değil: HTTP/2/3 çoklu istekleri iyi taşır; ama kırıntılı dosyalar da kötü. Strateji: Kritik + birkaç temel bundle, gerisi ertelenmiş.
CSS içinden render-engelleyici @import kullanma.
Unused CSS’yi (özellikle sayfa oluşturucularda) şablon bazında temizle.
Web font CSS – kritik değilse ertelenebilir (bkz. font bölümü).
5) JavaScript: Engellemeyi Kaldır, Etkileşimi Kor
defer: Çoğu JS dosyası için uygundur; HTML parse’dan sonra çalışır, sıralı yürür.async: Sıra gözetmez; bağımlılık yoksa kullan.- Inline küçük kritik JS (ör. açılır menü tetikleyici) render’ı hızlandırabilir. Büyük inline JS cache edilemez, abartma.
- Geç yükleme (delay): Kullanıcı etkileşimi (scroll/click) sonrası üçüncü parti scriptleri (reklam, sayaç, sosyal buton) yükle.
- Third-party diyet: Bir sayaç + bir chat yeter. Üç sayaç, iki piksel, üç harita — hepsi LCP/INP’yi gömer.
- jQuery bağımlılığı: Tema/eklenti mecbur değilse kaldır; modern JS ile yaz. Mecbursa footer’a it.
6) CDN: Coğrafyayı Kısalt
CDN ne kazandırır?
- Statik dosyaları kullanıcıya yakın sunar.
- HTTP/2/3, TLS hızlandırma, resim optimizasyonu, Edge cache ile HTML’yi bile hızlandırabilir.
Temel kurulum:
- CNAME/Proxy ile tüm statikler CDN’den akar.
- HTML cache (Cache Everything) kuruyorsan: Giriş/yorum/sepet/önbellek bypass kuralları; cookie bypass.
- Origin pull: CDN orijinden çeker; origin cache ve CDN cache TTL’lerini uyumlu yap.
- Argo/Smart Routing/HTTP/3 gibi seçenekler erişimi daha pürüzsüz kılar.
Güncelleme sırasında:
- CDN cache purge → sayfa başlıkları/güncellemeler hemen yansısın.
- “Stale-while-revalidate” vari ayarlar: Kullanıcı eski içerik görür ama arka planda yenisi ısınır.
7) Nesne Önbelleği (Object Cache) ve Veritabanı
Neden gerekli?
WordPress her istekle aynı sorguları yapar (ayarlar, seçenekler, sorgular). Redis/Memcached ile bu objeleri RAM’de tutmak, HTML cache devre dışı kaldığında bile siteyi akıcı tutar.
Redis kurulumu ipuçları:
wp-config.php’e salt kimlik bilgileri.- Persistent connections ve prefix kullan.
- Object cache drop-in (
object-cache.php) ile entegre et. - Transients ve autoload şişkinliklerini kontrol et (aşağıda).
Veritabanı temizliği:
- Revisions sınırla (
WP_POST_REVISIONS), çöp kutusu süresi kısalt (EMPTY_TRASH_DAYS). - Transients: Süresi geçmişleri temizle.
- Autoloaded options: 1–3 MB üstü riskli; siteyi her istekte şişirir. Kullanılmayan eklenti kalıntılarını sil.
- Index’ler: Büyük sitelerde
wp_postmetavs. indeks ayarı fark yaratır (gelişmiş konu; gerekirse uzman eli).
8) WP-Cron, Heartbeat, Sürümleme
- WP-Cron → gerçek cron:
DISABLE_WP_CRONtrue, sistem cron ilewp-cron.php5–10 dakikada bir. Yüksek trafikte rahatlama sağlar. - Heartbeat aralığını admin’de düşür; ön yüzde kapat. Boş yere AJAX istekleri atmasın.
- Sürümleme: CSS/JS dosyalarını sürüm parametresi ile değiştir ki tarayıcı cache’i doğru çalışsın.
9) Fontlar: Göz Var, Nizam Var
font-display: swap→ yazı hemen görünür; FOUT, FOIT’ten iyidir.- Preconnect (font CDN’ine) + preload en sık kullanılan 1–2 font/ağırlık.
- Alt set (subset): Latin-ext yerine ihtiyacın kadar.
- Ağırlık diyet: 400/700 çoğu tasarım için yeter; 300/500/900 her sayfada gereksiz yük.
10) Tema ve Eklenti Diyeti
Tema seçimi:
- Blok tabanlı, hafif, görsel editöre muhtaç kalmayan. “Her şey var” temalar genelde şişkindir.
- “Kendi ufak bileşenlerim + hafif tema” yaklaşımı çoğu zaman daha hızlı.
Sayfa oluşturucular:
- Gerekliyse tek tük; mümkünse çekirdek blok editörü + hafif ek blok kütüphaneleri.
- Oluşturucu kullanıyorsan template reuse ile her sayfaya yeni CSS/JS yığma.
Eklenti disiplini:
- Zorunlu mudur? “Sırf dursun” eklenti olmaz.
- Çakışma testleri: query monitor ile ağır sorguları ve yavaş kancaları yakala.
- Her yeni eklenti Lighthouse + TTFB testinden geçsin.
11) Core Web Vitals’i Bileşen Bileşen Çözmek
LCP (En büyük içerik boyaması):
- Çoğunlukla kahraman görsel veya büyük başlık blokudur.
- Çözüm: Görseli küçült/WebP-AVIF, preload, kritik CSS, TTFB’yi düşür (HTML cache).
CLS (Düzen kayması):
- Sabit boyutlar: Görsel, reklam, embed, font, slider.
- Reklam yer tutucularına yükseklik ver.
- Dinamik üst bar/Popup—yükseklik alanını en baştan rezerve et.
INP (Etkileşim):
- JS yükünü hafiflet; üçüncü parti scriptleri geciktir.
- Stil/JS çakışmasıyla oluşan Main Thread bloklarını azalt (profiling yap).
- Etkileşimli elemanlarda (menü, akordeon) işlemci-ucuz yaklaş.
12) Reklam ve Üçüncü Parti Script Yönetimi
- Lazy-load reklam: İlk ekrandan sonra yüklet.
- Boyut sabitleme: Reklam alanına min-height ver, CLS olmasın.
- Tag yönetimi: Tek konteynerden yönetin; yinelenen piksel/sayaç olmasın.
- Harita/Video: “Click-to-load” (tıklanmadıkça gömme yüklenmesin).
13) Güvenlik–Hız Dengesi
- WAF/CDN güvenliği kapatma; firewall performansa da yarar.
- Giriş denemeleri sınırlı; XML-RPC kapalı (gerekmedikçe).
- Hotlink koruması: Band genişliği çalınmasın.
- Spam önleme: Arka planda CPU yemesin.
14) Hata Payı ve Geri Alma (Rollback) Planı
- Değişiklikten önce tam yedek (dosya+DB).
- Değişiklikleri tek tek uygula, her adımı ölç.
- Bozulma/uyumsuzlukta 1 tıkla geri dön.
- Staging: Trafiği riske atmadan dene.
15) 14 Günlük Hız Kampı (Uygulama Takvimi)
Gün 1–2: Ölçüm, envanter, yedek.
Gün 3: HTML cache + tarayıcı cache + Gzip/Brotli.
Gün 4–5: Görsel dönüşümü (WebP/AVIF), LCP görsel preload, lazy-load.
Gün 6: Kritik CSS üretimi, CSS ertelenmesi.
Gün 7: JS defer/async, 3rd-party geciktirme.
Gün 8: CDN kurulumu ve edge cache (kurallar).
Gün 9: Redis Object Cache ve DB temizlik.
Gün 10: Font optimizasyonu (preconnect, preload, subset).
Gün 11: WP-Cron/Heartbeat, sürümleme.
Gün 12: Tema/eklenti diyeti, ağır eklenti alternatifleri.
Gün 13: Reklam alanı sabitleme, INP iyileştirme.
Gün 14: Nihai testler, rapor ve otomatik ön yükleme ayarları.
16) Sık Sorulan Sorular
S: “Minify + combine” her zaman mı iyi?
Hayır. HTTP/2/3 üzerinde “kombin” bazen faydasızdır; ama kırıntılı dosyaları azaltmak yine de iyidir. Kritik olan: kritik CSS ayrı, geri kalan gecikmeli ve makul sayıda paket.
S: CDN olmadan da hızlı olur mu?
Olur; ama coğrafi dağınık ziyaretçilerde fark artar. CDN’siz hedef Türkiye içiyse, iyi bir hosting + önbellekleme yetebilir.
S: Page builder kullanıyorum, vazgeçmeden hızlanır mı?
Evet, ama şablon tekrar kullan, global CSS iste; sayfa bazında 100 KB altında tut. Gereksiz widget/animasyonları kaldır.
S: WebP/AVIF’e geçince kalite bozulur mu?
Doğru kalite yüzdesiyle bozulma minimaldir. Kritikte kaliteyi %75 civarında tut; retina görsellerde srcset kullan.
S: Otomatik kritk CSS mi, manuel mi?
Küçük–orta sitelerde otomatik araçlar iş görür. Çok değişken layout’larda manuel düzeltme gerekir.
17) Kontrol Listesi (Kısa Kısa)
- HTML cache aktif, TTL belirli, ısıtma çalışıyor.
- Tarayıcı cache başlıkları doğru (CSS/JS/fonts 1 yıl).
- LCP görseli preload, boyut sabit.
- Lazy-load tüm görsellerde, iframe’lerde.
- Kritik CSS var, geri kalan ertelenmiş.
- JS
defer/async, 3rd-party gecikmeli. - CDN aktif, kurallar ve purge düzgün.
- Redis object cache; DB/transients/autoload temiz.
- WP-Cron gerçek cron, Heartbeat kısıtlı.
- Fontlar
swapve subset’li, gerekenden fazla ağırlık yok. - Reklam alanları sabit yükseklikli.
- Ölçüm raporları (LCP/CLS/INP) yeşile yakın.
18) Son Söz
Hız, tek bir ayar değil alışkanlık. Bugün LCP’yi 1 saniye düşürürsün, yarın gereksiz bir widget ile 800 ms geri alırsın. O yüzden “küçük-ama-sürekli” düzen, bu işin kitabıdır. Geleneksel düsturla bitireyim: İşini temiz yap, bereketi gelir. Statik cache, temiz resim, ölçülü JS; gerisi kendiliğinden hızlanır.
