Sayfa Hızı: Gerçekten Fark Yaratan 80/20 Kazanımları

Sayfa hızı, Google'ın size ne optimize edeceğinizi açıkça söylediği nadir SEO kollarından biridir: Core Web Vitals. Ancak CWV semptomdur, neden değil. Aşağıdaki 80/20 kazanımlar, yığınınızı yeniden inşa etmeden LCP, INP ve CLS'yi gerçekten hareket ettiren işlerdir.

1. Önce TTFB'yi düzeltin

Time To First Byte, diğer her şey için tabandır. TTFB 800 ms ise, LCP'niz asla 800 ms altında olamaz. Yavaş TTFB'nin %90'ı üç nedenden kaynaklanır:

• Soğuk serverless fonksiyonlar. Min-instance / warm pool kullanın veya sıcak yolu uzun süreli çalışan bir sunucuya taşıyın.
• Origin kullanıcılardan çok uzak. Önüne bir CDN koyun (Cloudflare, Bunny, Fastly), ücretsiz katmanlar bile HTML'i önbelleğe alır.
• Her render'da veritabanı sorguları. Anonim trafik için render edilmiş HTML'i önbelleğe alın; genellikle pageview'ların %95'ini 60 saniyelik bir önbellekten sunabilirsiniz.

Hedef: 75. yüzdebirlikte TTFB < 200 ms. PageSpeed Insights veya Cloudflare Web Analytics ile ölçün.

2. Görselleri modern formatlarda sunun

WebP, JPEG'e göre %25-35 tasarruf sağlar; AVIF, WebP üzerine bir %20 daha. Çoğu CDN, açtığınızda bunu şeffaf şekilde yapar:

• Cloudflare Polish / Image Resizing
• Vercel / Netlify image bileşenleri
• Bunny Optimizer

Elle yapıyorsanız, kaynaklarla <picture> kullanın:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." width="1200" height="630">
</picture>

Her zaman width ve height ekleyin, görsel yüklenmeden önce yerleşim alanı ayırarak CLS'yi engellerler.

3. Render-blocking kaynakları durdurun

defer veya async olmadan head'deki her <script> ayrıştırmayı bloklar. Bloklayan her <link rel="stylesheet"> boyamayı bloklar. İki kural:

1. Sayfa katlamasının üzerinde kullanılan kritik CSS'i inline edin (≤ 14 KB).
2. DOMContentLoaded öncesinde çalışması gerekmeyen her script'e defer ekleyin. Pazarlama pikselleri, analitik, chat widget'ları, hepsi defer.

4. Edge'de agresif önbellek

Statik varlıkların 1 yıllık Cache-Control ve content-hashed dosya adları olmalı:

Cache-Control: public, max-age=31536000, immutable

HTML kısa pencereler için önbelleklenebilir (anonim kullanıcılar için 10-60s) ek olarak stale-while-revalidate ile anlık sonraki yüklemeler:

Cache-Control: public, max-age=10, s-maxage=60, stale-while-revalidate=86400

5. Sayfa katlamasının altındakini lazy-load edin

İlk görüntü alanının dışındaki her <img> ve <iframe>'a loading="lazy" ekleyin. Tarayıcı, kullanıcı yakınına kaydırana kadar indirmeyi erteler. Native, JS yok.

6. Font yüklemeyi düzeltin

Özel web fontları görünmez metin ve düzen kaymasına neden olur. İki satırda düzeltin:

• Her @font-face'e font-display: swap; ekleyin - web fontu yüklenirken metin yedek fontla render olur.
• Fontları self-host edin (Google Fonts CDN kullanmayın, DNS + bağlantı yükü ekler). Yalnızca gerçekten kullandığınız karakterlere subset edin.

7. Denetleyin ve yeniden ölçün

AuditAI veya PageSpeed Insights'ı en iyi beş açılış sayfanızda çalıştırın, her birinde en yüksek etkili üç sorunu düzeltin, sonra yeniden ölçün. Kör optimize etmeyin, çoğu "performans denetimi" gerçek darboğazı kaçırır. Hız çalışmasının tarama bütçesi veya indeksleme bozmadığından emin olmak için teknik SEO kontrol listemize çapraz başvurun.

80/20: CDN + WebP/AVIF + defer scriptler + loading="lazy" + font-display swap. Beş müdahale, vahşi doğada gördüğümüz neredeyse her sayfa hızı kazanımının nedenidir.