Web Performans Optimizasyonu: Hizli Web Siteleri Nasil Yapilir?

Web sitenizin yuklenmesi 3 saniyeden uzun suruyorsa, ziyaretcilerin yarisini kaybediyorsunuz. Google de yavas siteleri cezalandiriyor. Web performans optimizasyonu hem kullanici deneyimi hem SEO icin kritik.

Performans Neden Onemli?

Her 1 saniye gecikme donusum oranini dusuruyor
Google siralamada hizi faktor olarak kullaniyor
Mobil kullanicilar sabırsız — 3 saniyede cikarlar
Amazon: 100ms gecikme = yuzde 1 satis kaybi
Yavas site = dusuk NPS ve artan musteri kaybi

Core Web Vitals

Google'in 3 temel performans metrigi:

LCP (Largest Contentful Paint)

Sayfadaki en buyuk icerigin goruntulenmesi.

Iyi: 2.5 saniyenin altinda
Orta: 2.5-4 saniye
Kotu: 4 saniyenin uzerinde

INP (Interaction to Next Paint)

Kullanici etkilesiminden gorsellestirmeye kadar gecen sure.

Iyi: 200ms altinda
Orta: 200-500ms
Kotu: 500ms uzerinde

CLS (Cumulative Layout Shift)

Sayfanin ne kadar beklenmedik sekilde hareket ettigi.

Iyi: 0.1 altinda
Orta: 0.1-0.25
Kotu: 0.25 uzerinde

Optimizasyon Teknikleri

1. Gorsel Optimizasyonu

Gorseller genellikle sayfa boyutunun yuzde 50-70'ini olusturur.

WebP/AVIF formati kullanin (JPEG'den yuzde 30-50 daha kucuk)
Lazy loading — Gorunmeyen gorselleri yuklemeeyin
Responsive images — Cihaza uygun boyut
Image CDN — Cloudinary, Imgix
next/image — Next.js otomatik optimizasyon

2. JavaScript Optimizasyonu

Code splitting — Sayfa bazli paket bolme
Tree shaking — Kullanilmayan kodu cikarma
Dynamic import — Gerektikce yukleme
Minification — Boyut kucultme
Async/defer — Render engellememe

3. CSS Optimizasyonu

Critical CSS — Ilk goruntuleme icin gerekli CSS
Minification
Kullanilmayan CSS'i cikarma (PurgeCSS)
CSS-in-JS dikkatli kullanin

4. Sunucu Optimizasyonu

CDN — Icerik dagitim agi (Cloudflare, AWS CloudFront)
Gzip/Brotli siclistirma
HTTP/2 veya HTTP/3
Edge computing — Kullaniciya yakin sunucu

5. Caching Stratejisi

Tarayici cache — Cache-Control header'lari
Service Worker cache — Offline destek
CDN cache — Statik dosyalar
API cache — Redis, in-memory

6. Font Optimizasyonu

font-display: swap — Metin hemen gorunsun
WOFF2 formati kullanin
Sadece kullanilan karakter setlerini yukleyin
Self-host (Google Fonts yerine)

Performans Olcum Araclari

| Arac | Tur | Fiyat | |------|-----|-------| | Lighthouse | Lab test | Ucretsiz | | PageSpeed Insights | Lab + alan verisi | Ucretsiz | | WebPageTest | Detayli analiz | Ucretsiz | | GTmetrix | Performans raporu | Freemium | | Chrome DevTools | Gelistirici araci | Ucretsiz | | Vercel Analytics | Gercek kullanici verisi | Freemium |

Performans Butcesi

Performans icin limit belirleyin:

| Kaynak | Hedef | |--------|-------| | Toplam sayfa boyutu | 1 MB altinda | | JavaScript | 300 KB altinda | | CSS | 100 KB altinda | | Gorseller | Bireysel 200 KB altinda | | Font | 100 KB altinda | | LCP | 2.5 saniyenin altinda |

Sonuc

Web performansi, kullanici deneyimi ve SEO'nun kesisim noktasidir. Kucuk iyilestirmeler buyuk farklar yaratabilir. Duzgun olcun, surekli optimize edin ve performans butcenizi asmay.

Web sitenizin performans optimizasyonu icin benimle iletisime gecin: info@cagribilgehan.com. Projelerime goz atin: cagribilgehan.com