
2026’da bir web sitesinin başarısı, içeriği kadar hızı ile ölçülüyor. Google’ın Core Web Vitals metrikleri (LCP, INP, CLS) doğrudan SEO sıralamasını etkiliyor; kullanıcı davranışları ise sayfa açılışında 2 saniyenin üzerinde gecikmelere tahammülsüz hale geldi. Mobilde bu eşik daha da daralmış durumda.
Hız Neden Bu Kadar Önemli?
- SEO: Google sıralama faktörü olarak kullanıyor.
- Dönüşüm: 1 saniye gecikme dönüşüm oranını %7’ye kadar düşürebiliyor.
- Bounce rate: 3 saniyenin üzerinde açılan sayfalardan %53 ziyaretçi anında ayrılıyor.
- Reklam ROI: Yavaş açılan landing page reklam bütçenizi yakar.
Core Web Vitals (CWV) Nedir?
- LCP (Largest Contentful Paint): En büyük içerik öğesinin yüklenme süresi. Hedef < 2.5s.
- INP (Interaction to Next Paint): Etkileşim sonrası tepki süresi. Hedef < 200ms.
- CLS (Cumulative Layout Shift): Sayfa kayma puanı. Hedef < 0.1.
Mobil Performans için 12 İpucu
1. Görsel Optimizasyonu
Görseller toplam sayfa ağırlığının %50’sini oluşturur. WebP veya AVIF formatı ile JPEG’e göre %25-50 daha küçük boyut elde edilir. Responsive srcset ile cihaza uygun boyutta görsel sunulur.
2. Lazy Loading
Görünür alanın altındaki görsellere loading="lazy" ekleyerek ilk yüklemeyi hızlandırın. Hero görseline ise fetchpriority="high" verin — LCP iyileşir.
3. Brotli / GZIP Sıkıştırma
HTML, CSS, JS dosyaları sunucuda sıkıştırılarak gönderilmelidir. Brotli, GZIP’e göre %15-20 daha iyi sıkıştırma sağlar.
4. Tarayıcı Cache
Statik kaynaklara 1 yıl immutable cache verin. CSS/JS dosya isimlerine versiyon hash ekleyerek güncellemelerde sorun yaşamadan agresif cache kullanın.
5. CDN Kullanımı
Statik kaynaklarınızı dünya üzerine dağıtılmış CDN’den sunarak coğrafi gecikmeleri minimize edin.
6. Critical CSS
Sayfanın ilk görüntü için gerekli CSS’i inline edin; kalan CSS’i async yükleyin. Render bloklamayı önler.
7. JavaScript Defer / Async
JS dosyalarına defer veya async ekleyin. Render’ı bloklamayan JS, INP metriğine pozitif katkı verir.
8. Üçüncü Parti Script Disiplini
Analitik, reklam, chat widget’ları ölçün. Gerçekten gerekli olmayanları kaldırın; gerekli olanları defer ve idle callback ile yükleyin.
9. Web Font Optimizasyonu
font-display: swapile FOIT engelleyin.- Sadece kullandığınız font ağırlıklarını yükleyin.
- WOFF2 formatı kullanın.
- Self-host edin (Google Fonts’tan harici çağrı yerine).
10. Mobil Animasyon Disiplini
Mobilde backdrop-filter: blur ve sürekli dönen animasyonlar GPU yorar. @media (max-width: 768px) ile mobilde sadeleştirin. prefers-reduced-motion kullanıcı tercihine saygı gösterin.
11. Database / Backend Optimizasyonu
Sorguları indeksleyin, gereksiz N+1 sorgulardan kaçının, full-page cache ekleyin (örn: WordPress için W3 Total Cache, LiteSpeed Cache).
12. HTTP/2 ve HTTP/3
Modern protokoller paralel istek yönetimini iyileştirir. Sunucunuzun en az HTTP/2 sunduğundan emin olun.
Ölçüm Araçları
- PageSpeed Insights: Genel skor + öneriler.
- WebPageTest: Detaylı waterfall analizi.
- Chrome DevTools Lighthouse: Yerel test.
- Search Console > Core Web Vitals raporu: Gerçek kullanıcı verisi.
Web sitenizin hız audit’i için profesyonel destek alın.
// Henüz yorum yok — ilk commit'i siz yapınconst yorumlar = []; // ilk yorum bekleniyor...