2025'te Core Web Vitals Neden Önemli?
Google'ın Core Web Vitals'ı basit sıralama sinyallerinin ötesine geçti — artık kritik bir iş metriği. Araştırmalar, LCP'de 100ms'lik bir iyileşmenin dönüşümleri %8'e kadar artırabileceğini gösteriyor. E-ticaret siteleri için her milisaniye önemlidir.
Tem Craft Tech'te düzinelerce Next.js uygulamasını optimize ettik ve sürekli 90+ Lighthouse puanları elde ediyoruz. İşte kanıtlanmış yaklaşımımız.
1. LCP — Largest Contentful Paint
LCP, en büyük görünür öğenin ne zaman yükleneceğini ölçer. Hedef 2,5 saniyenin altı. Next.js App Router ile güçlü araçlarınız var:
Görsel Optimizasyonu
Ekranın üst kısmındaki görseller için next/image'ı priority özelliğiyle kullanın. Bu, önyüklemeyi tetikler.
Font Yükleme Stratejisi
next/font ile fontları font-display: swap ile self-host edin. Bu, render-engelleyici font isteklerini ortadan kaldırır.
Önce Server Components
İstemci tarafı etkileşim gerektirmeyen içerikler için varsayılan olarak React Server Components kullanın.
2. INP — Interaction to Next Paint
INP, Mart 2024'te FID'nin yerini aldı ve tüm kullanıcı etkileşimlerine yanıt vermeyi ölçer. Hedef 200ms altı.
Anahtar Stratejiler
İstemci bileşenlerini yalın tutun. Ekranın alt kısmındaki ağır bileşenler için dynamic() import kullanın.
3. CLS — Cumulative Layout Shift
CLS görsel kararlılığı ölçer. Hedef 0,1'in altı. Yaygın sorunlar:
- Her zaman görsel boyutlarını belirtin
- Dinamik içerik için yer ayırın
- Mevcut içeriğin üstüne içerik eklemeyin
- Responsive medya öğeleri için CSS
aspect-ratio
Gerçek Sonuçlarımız
Bu teknikleri yakın zamandaki bir e-ticaret göç projesinde kullanarak:
- LCP: 4,1s → 1,2s
- INP: 380ms → 95ms
- CLS: 0,24 → 0,02
- Lighthouse Performans Puanı: 96/100
Sonuç? İlk ayda mobil dönüşümlerde %58 artış.
Önemli Çıkarımlar
Performans optimizasyonu tek seferlik bir görev değil — sürekli bir disiplindir:
- Varsayılan olarak Server Components, sadece gerektiğinde Client Components
- İlk günden itibaren görselleri ve fontları optimize edin
- Vercel Analytics gibi araçlarla metrikleri sürekli izleyin
- Gerçek cihazlarda test edin
Next.js uygulamanızı optimize etmede yardıma mı ihtiyacınız var? Dijital varlıklarını ciddiye alan işletmeler için ölçülebilir performans iyileştirmeleri sunuyoruz.