WordPress siteler yanlış kurulduğunda yavaş olmak için tasarlanmış gibi davranır. Doğru araçlarla ve doğru sırayla yaklaşıldığında aynı site çok farklı sonuçlar üretir. Bu rehberdeki adımlar EminTechLab'ın teslim ettiği her projede uyguladığı yöntemlere dayanıyor.
Core Web Vitals Nedir ve Neden SEO'yu Etkiler?
Google, 2021'de Core Web Vitals'ı resmi sıralama faktörü olarak duyurdu. Üç metrikten oluşuyor ve hepsi kullanıcının siteyle olan deneyimini farklı bir açıdan ölçüyor. Kötü bir skor doğrudan sıralamayı olumsuz etkiliyor; iyi bir skor ise tek başına sizi üst sıralara taşımaz ama rekabette avantaj sağlıyor.
Sayfadaki en büyük içerik öğesinin (genellikle hero görseli) yüklenme süresi. Kullanıcının "sayfa yüklendi" hissettiği an.
Sayfa yüklenirken elemanların kayma miktarı. Bir butona tıklarken içerik kayıyorsa CLS skoru kötüdür.
Kullanıcının tıklama veya dokunmasına sayfanın verdiği yanıt süresi. Yavaş JavaScript burada belirleyici.
Bu üç metriği Google Search Console'un "Core Web Vitals" raporu ve PageSpeed Insights üzerinden takip edebilirsiniz. Başlamadan önce mevcut skorlarınızı not edin — iyileştirmenin boyutunu görmek motivasyonu yüksek tutar.
LCP Skoru Nasıl İyileştirilir?
LCP sorunlarının büyük çoğunluğu hero görselinden kaynaklanır. Sayfada en büyük içerik öğesi genellikle bu olduğu için optimizasyonun odak noktası da burası.
- 🖼️Hero görselini WebP formatına dönüştürün
JPEG veya PNG yerine WebP formatı ortalama %30–50 daha küçük dosya boyutu üretir, aynı kaliteyi korur. Squoosh veya Cloudflare Images ile dönüştürebilirsiniz.
Yüksek Etki - ⚡Hero görseline
loading="eager"ekleyinDiğer tüm görsellerde lazy load kullanılmalı, ama hero görseli tarayıcının öncelikli yüklemesi için eager olmalı. Bu tek değişiklik LCP'yi ciddi ölçüde düşürür.
Kolay Uygulama - 🔗Hero görseli için preload tag ekleyin
HTML'in head bölümüne
Teknik Adım<link rel="preload" as="image">eklemek tarayıcının görseli erken indirmeye başlamasını sağlar. - 🔤Google Fonts'u
display=swapile yükleyinFont yüklenene kadar sistem fontu gösterilir, LCP engellenmez. URL'nin sonuna
Kolay Uygulama&display=swapeklemek yeterli.
<!-- Hero görseli preload -->
<link rel="preload" as="image" href="/images/hero.webp"><!-- Google Fonts doğru yükleme -->
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap"
rel="stylesheet">CLS Sorunları Nasıl Giderilir?
Cumulative Layout Shift, sayfanın yüklenirken içeriğin kaymasıyla oluşur. En yaygın üç nedeni şunlar:
- 📐Her görsele width ve height attribute'u ekleyin
Tarayıcı boyutu bilmeden görseli yüklemek için önce placeholder açar, görsel gelince sayfa kayar.
CLS'in 1. Nedeniwidth="800" height="600"eklemek bu sorunu tamamen ortadan kaldırır. - 🔤font-display: swap kullanın
Font yüklenene kadar metin kayar ve tüm paragraflar yeniden konumlanır.
CLS'in 2. Nedeniswapdeğeri sistemin önce kendi fontunu gösterip sonra sitemin fontuna geçmesini sağlar — kayma minimumdur. - 📏Dinamik içerik alanlarına min-height tanımlayın
Yorumlar, reklamlar veya geç yüklenen widgetlar boş alandan belirip sayfayı iterse CLS artar. Bu alanlara CSS'te sabit bir
CLS'in 3. Nedenimin-heightdeğeri tanımlamak kaymayı önler.
Görsel Optimizasyonu: WebP ve Lazy Load
Görsel dosyaları WordPress sitelerinde toplam sayfa ağırlığının genellikle yüzde altmış ile seksen arasını oluşturuyor. Bu tek kalem optimize edildiğinde hız değişimi dramatik olabiliyor.
WebP dönüştürme
Squoosh (web tabanlı, ücretsiz), ShortPixel eklentisi veya Cloudflare Images — üçü de kaliteyi koruyarak JPEG/PNG dosyalarını WebP'ye dönüştürüyor. Pratikte şunu öneririm: Görselleri WordPress'e yüklemeden önce Squoosh'ta WebP'ye çevirin, dosya adına -optimized ekleyerek kaydedin.
Lazy load
Tarayıcılar artık HTML'de loading="lazy" attribute'unu destekliyor. Bu sayede kullanıcının görmediği görseller baştan yüklenmez; ekrana yaklaştıkça yüklenir. Yalnızca hero görselinde loading="eager" kullanın, geri kalanın tamamında lazy kalır.
Hero görselinde lazy load bırakmak LCP'yi doğrudan kötüleştirir. Google PageSpeed'de "Render-blocking resources" uyarısının büyük kısmı buradan geliyor. Hero için mutlaka loading="eager" ve fetchpriority="high" kullanın.
WP Rocket ile Önbellekleme Kurulumu
WordPress'te önbellekleme olmadan her sayfa ziyaretinde PHP ve veritabanı sorgularının tamamı tekrar çalışır. Bir önbellek eklentisi bu hesaplamayı bir kez yapıp sonucu statik HTML olarak saklar; sonraki ziyaretçiye hazır dosya sunulur.
- Sayfa önbelleği (Page Cache) etkin — en kritik ayar
- CSS ve JS dosyaları minify edilmiş
- CSS ve JS dosyaları birleştirilmiş (Combine) — dikkatli kullanın, bazı temalarda çakışır
- Görsel lazy load WP Rocket üzerinden aktif (HTML attribute ile çakışmayacak şekilde)
- Veritabanı optimizasyonu — eski revizyon ve geçici veriler temizlenmiş
- Cloudflare entegrasyonu aktif — statik dosyalar CDN'den sunuluyor
WP Rocket ücretli. Ücretsiz alternatif olarak LiteSpeed Cache (LiteSpeed hosting kullananlar için mükemmel) veya W3 Total Cache kullanılabilir. Güzelnet hosting Cloudflare entegrasyon desteği sunuyor — bu ikili birlikte çalıştırıldığında WP Rocket'a yakın sonuçlar alınabiliyor.
Cloudflare CDN Entegrasyonu
Cloudflare, sitenizin statik dosyalarını (CSS, JS, görseller) dünya genelindeki sunuculardan kullanıcıya en yakın noktadan sunuyor. Türkiye'deki bir ziyaretçi için bu fark genellikle 300–600 ms arasında oluyor — bazen daha fazla.
WordPress tarafında yapılması gereken: Cloudflare'in IP adreslerini güvenilir kaynak olarak tanımlamak ve WP Rocket veya LiteSpeed Cache'in Cloudflare entegrasyon modülünü aktif etmek. Bu sayede önbellek temizleme Cloudflare düzeyinde de otomatik tetikleniyor.
SSL: Full (Strict) modu, Cache Level: Standard, Browser Cache TTL: 4 saat veya daha uzun, Rocket Loader: sitenizi test edin — bazı WordPress temalarında sorun çıkarır, Minify: HTML + CSS + JS aktif edin.
Ücretsiz Araçlarla Hız Testi Nasıl Yapılır?
Optimizasyon yapmadan önce ve sonra aynı araçla test yapmak ilerlemeyi somut olarak gösterir. Sonuçlar aynı anda farklılık gösterebilir — en az 3 test yapıp ortalamasını alın.
Hem mobil hem masaüstü skorunu gösterir. CWV verilerini ayrıştırır, düzeltme önerileri listeler. Başlangıç noktası burası olmalı.
Waterfall grafiği hangi dosyanın ne kadar süre beklediğini gösterir. Render-blocking kaynakları tespit etmek için idealdir.
Farklı lokasyondan ve farklı bağlantı hızından test yapar. TTFB, CLS ve INP'yi ayrı ayrı gösterir. İleri düzey analiz için.
Gerçek kullanıcı verilerinden beslenir. Lab verileri değil, sahadan gelen sayılardır. Uzun vadeli takip için zorunludur.
Optimizasyon sonrası hedef: PageSpeed Insights'ta mobil 70+, masaüstü 85+. Bu eşiğin üzerinde olmak Türkiye genelindeki WordPress sitelerinin çok büyük çoğunluğunun önünde olmak anlamına geliyor. Daha iyi de mümkün — ama bu eşik gerçekçi ve sürdürülebilir bir başlangıç noktası.
Sitenizin hız durumu hakkında profesyonel analiz almak istiyorsanız EminTechLab ile iletişime geçin. PageSpeed skoru, CWV durumu ve önerileri içeren ücretsiz rapor hazırlıyoruz.
WordPress, Elementor ve SEO konusunda 3 yılı aşkın deneyime sahip. Bursa merkezli EminTechLab'ın kurucusu. Her projede Core Web Vitals optimizasyonunu standart sürecin parçası olarak uyguluyor.
Siteniz Ne Kadar Hızlı?
PageSpeed Insights skoru, CWV raporu ve iyileştirme önerileriyle ücretsiz hız analizi yapıyoruz.