Web Performansı Neden Bu Kadar Önemli?
Araştırmalar, sayfa yükleme süresinin 1 saniye artmasının dönüşüm oranını %7 düşürdüğünü gösteriyor. Google da Core Web Vitals'ı sıralama faktörü olarak kullanıyor. Performans hem kullanıcı deneyimi hem SEO için kritiktir.
Core Web Vitals Nedir?
Google'ın web performansını ölçmek için kullandığı üç temel metrik:
- LCP (Largest Contentful Paint): Sayfadaki en büyük içerik öğesinin yüklenme süresi. Hedef: 2.5 saniyenin altı.
- INP (Interaction to Next Paint): Kullanıcı etkileşimlerinin yanıt süresi. Hedef: 200ms altı.
- CLS (Cumulative Layout Shift): Sayfa yüklenirken oluşan görsel kaymaların toplamı. Hedef: 0.1 altı.
Görsel Optimizasyonu
Web sayfalarının ağırlığının büyük bölümü görsellerden gelir:
- Next.js Image komponenti kullanın: Otomatik format dönüşümü (WebP/AVIF), responsive boyutlandırma ve lazy loading sağlar
- Doğru format seçimi: Fotoğraflar için WebP/AVIF, ikonlar ve logolar için SVG, şeffaflık gereken durumlar için PNG
- Boyut optimizasyonu: Görselleri ekranda gösterileceği boyutta sunun — 300px genişliğinde gösterilecek bir görseli 2000px olarak yüklemeyin
- Placeholder kullanın: Blur placeholder ile görseller yüklenirken düzen kaymasını önleyin
JavaScript Optimizasyonu
Fazla JavaScript, sayfanızın interaktif olmasını geciktirir:
- Code splitting: Her sayfa sadece kendi ihtiyacı olan JavaScript'i yüklesin. Next.js bunu otomatik yapar
- Dynamic import: Kullanıcı etkileşimine bağlı componentleri lazy load edin
- Tree shaking: Kullanılmayan kodları bundle'dan çıkarın
- Third-party script yönetimi: Analytics, chat widget gibi üçüncü parti scriptleri defer veya async olarak yükleyin
- Bundle analizi: Hangi paketlerin ne kadar yer kapladığını analiz edin ve gereksiz büyük paketleri alternatiflerle değiştirin
CSS Optimizasyonu
- Critical CSS: İlk ekranda görünen içerik için gereken CSS'i inline olarak ekleyin
- Kullanılmayan CSS'i temizleyin: PurgeCSS ile kullanılmayan stil kurallarını kaldırın
- CSS-in-JS dikkatli kullanın: Runtime CSS üretimi performansı olumsuz etkiler
- Font optimizasyonu: font-display: swap kullanın, sadece ihtiyacınız olan font ağırlıklarını yükleyin
Sunucu Tarafı Optimizasyon
- CDN kullanın: Statik dosyaları kullanıcıya en yakın sunucudan sunun
- Caching stratejisi: Statik dosyalar için uzun süreli cache, dinamik içerik için kısa süreli cache veya revalidation
- Compression: Gzip veya Brotli sıkıştırma ile transfer boyutunu küçültün
- HTTP/2 veya HTTP/3: Multiplexing ile paralel istek yönetimi
Next.js'te Performans İpuçları
Next.js, performans optimizasyonu için güçlü araçlar sunar:
- Server Components: Varsayılan olarak sunucuda render edilir — client'a gönderilen JavaScript miktarını azaltır
- Streaming SSR: Sayfayı parça parça render edip gönderir — ilk anlamlı içerik daha erken görünür
- Image Optimization: Built-in Image komponenti ile otomatik optimizasyon
- Font Optimization: next/font ile font dosyalarını build time'da optimize edin
- Static Generation: Mümkün olan sayfaları build time'da statik olarak üretin
Performans Ölçümü ve İzleme
Optimize ettiğinizi ölçmezseniz, gerçekten iyileşip iyileşmediğini bilemezsiniz:
- Lighthouse: Chrome DevTools'ta yerleşik performans denetleme aracı
- PageSpeed Insights: Gerçek kullanıcı verilerine dayalı performans analizi
- Web Vitals: Google'ın Core Web Vitals ölçüm kütüphanesi
- Bundle Analyzer: JavaScript bundle boyutlarını görselleştirme
Performans Bütçesi Oluşturun
Projeniz için performans sınırları belirleyin:
- Toplam sayfa boyutu: maksimum 500KB (sıkıştırılmış)
- JavaScript bundle: maksimum 200KB (sıkıştırılmış)
- LCP: maksimum 2.5 saniye
- INP: maksimum 200ms
- İlk yükleme: maksimum 3 saniye (3G bağlantıda)
Bu bütçeleri CI/CD pipeline'ınıza entegre edin — bütçeyi aşan değişiklikler otomatik olarak uyarı versin.
Sonuç
Web performansı tek seferlik bir iş değil, sürekli izlenmesi ve iyileştirilmesi gereken bir süreçtir. Küçük iyileştirmeler bile büyük farklar yaratabilir — 0.5 saniyelik bir hızlanma bile dönüşüm oranınızı gözle görülür şekilde artırabilir.
Web sitenizin performansını analiz etmek ve iyileştirmek ister misiniz? İletişime geçin — birlikte hızlandıralım.