Next.js ile Core Web Vitals Optimizasyonu: 98 Puan Nasıl Alınır?

Google'ın Core Web Vitals metriklerini sıralama faktörü olarak kullanması, performans optimizasyonunu SEO'nun ayrılmaz bir parçası haline getirdi. Peki 98 Lighthouse puanı gerçekten ulaşılabilir mi?

LCP (Largest Contentful Paint)

En büyük içerik öğesinin yükleme süresi 2.5 saniyenin altında olmalıdır. Bunu sağlamanın en etkili yolu: hero görseli için `priority` prop'u kullanmak, font subsetting yapmak ve sunucu taraflı render'ı tercih etmek.

CLS (Cumulative Layout Shift)

Beklenmedik layout kaymaları için en yaygın suçlu: boyutu belirtilmemiş görseller ve dinamik yüklenen içerikler. Her `img` elementine `width` ve `height` atamak, CLS skorunu dramatik biçimde iyileştirir.

INP (Interaction to Next Paint)

Ana thread'i bloklayan JavaScript parçalarını tespit etmek için Chrome DevTools Performance panelini kullanın. Büyük bundle'ları dynamic import ile bölmek ve React Suspense ile kademeli yükleme yapmak INP'yi düşürür.