Core Web Vitals Optimizasyon Atölyesi

RUM verisi, kod bölme ve render stratejileri

Google’ın Core Web Vitals seti tek seferlik kampanya değil; sürekli iyileştirme sürecidir. Ekipler RUM verisini build pipeline’ına taşıyarak etkili kararlar alabilir. Bu yol haritası Frontend performance lead profiline yönelik hazırlanmış olup Next.js, Partytown, Nuxt RUM, SpeedCurve araçlarıyla uygulanabilir.

Veri Tabanlı Önceliklendirme

LCP, FID ve CLS değerleri segment bazlı analiz edilmezse optimizasyon kör atış olur.

• RUM olaylarını kullanıcı segmentiyle etiketlemek
• LCP kaynaklarını otomatik raporlamak
• CLS tetikleyen bileşenleri heatmap ile göstermek

Kod Bölme ve Kritik Yol

Hero bileşeni dışındaki JS yükünü ertelerken kullanıcı deneyimini bozmamak gerekir. SSR + streaming kombinasyonu kritik yolu hızlandırır.

• React Server Components ile ağır modülleri ayırmak
• Partytown ile üçüncü parti scriptleri izole etmek
• Preload/prefetch stratejilerini Lighthouse verisiyle ayarlamak

Sürekli İyileştirme Döngüsü

Pipeline’a web vitals testleri eklenerek regresyon erken yakalanır.

• SpeedCurve API’dan rapor çekmek
• Threshold aşılırsa deploy’u durdurmak
• Optimizasyon backlog’unu RUM verisiyle sıralamak

Başarı Metrikleri

• Global LCP: 1.8s → 1.1s — Hero görseli streaming ile erken ulaştı.
• CLS: 0.21 → 0.07 — Layout shift analizi sonrası düzeldi.
• FID: -%35 — Üçüncü parti script izolasyonu sayesinde hızlandı.

Kod Örneği — Next.js streaming ile hero render

export default async function Hero() {
  const data = await getHeroData();
  return (
    <Suspense fallback={<Skeleton />}>
      <HeroContent data={data} />
    </Suspense>
  );
}

Uygulama Kontrol Listesi

• RUM verisini segment bazlı incele.
• Hero bileşenini SSR + streaming ile hazırla.
• Üçüncü parti scriptleri web worker içine taşı.
• Lighthouse bütçelerini pipeline’a ekle.
• Optimizasyon backlog’unu veriyle önceliklendir.

Anahtar odaklar: core web vitals, performance, rum.