Performans panellerinde onlarca grafik varken üç sayı her şeyi anlatır: en büyük öğenin ne kadar hızlı boyandığı, kullanıcı girdisine ne kadar hızlı tepki verildiği ve sayfa yüklenirken düzenin ne kadar oynadığı. Core Web Vitals bu üçünü LCP, INP ve CLS adlarıyla standartlaştırdı. Üçünün ortak yanı şu: hiçbiri teknik bir ölçüm değil, bir kullanıcı cümlesinin kısaltmasıdır.

Üç Metrik, Üç Söz

LCP, "içeriği gördüm" der; hedef iki buçuk saniyenin altı. INP, "tıkladım ve duydum" der; hedef 200 milisaniyenin altı. CLS ise "yer tutaydım" der; hedef 0,1'in altı. Üçü birden iyiyse sayfa hızlı hisseder, biri kötüyse sayfa yavaş hisseder:

import { onLCP, onINP, onCLS } from "web-vitals";

onLCP((olcum) => gonder("lcp", olcum));
onINP((olcum) => gonder("inp", olcum));
onCLS((olcum) => gonder("cls", olcum));

Google'ın web-vitals kütüphanesi bu üçünü saha verisine dönüştürür; analitiğe gönderip gerçek kullanıcı izlemesi kurabilirsiniz. Laboratuvar ölçümü bir teşhis aracıdır, saha verisi ise hâkimdir: puanınız laboratuvarda yüksek, sahada düşükse doğru olan sahada görülen sayıdır. İyi bir pano bu ikisini ayıran iki ayrı sekme açar; laboratuvar puanını saha verisiyle aynı grafikte birleştirmek, yanlış iyileştirmenin başlangıç noktasıdır.

En Sık Görülen Üç Suçlu

LCP'yi çoğu zaman ana görsel öldürür: fetchpriority="high" ve önceden yükleme çoğu zaman tek başına yeter. INP'nin perde arkası uzun görevlerdir; 50 milisaniyeyi aşan işleri parçalara bölmek ya da scheduler.yield kullanmak ana iş parçacığını tıkadan nefes aldırır. Altıncı his de geliştiriciyi kurtarır: ölü ağırlığı bırakın, ilk ziyaretçiye yol verin. Sunucu bileşenleri, gereksiz JavaScript'i sayfadan çıkarma konusunda şimdiye denediğimiz en etkili yoldur.

async function listeyiIsle(ogeler) {
  for (const oge of ogeler) {
    agirIslem(oge);
    if (yeniGirdiBekliyor()) await scheduler.yield();
  }
}

CLS'nin baş suçlusuysa boyutsuz görseller ve sonradan içeriği iten banner'lardır: width ve height öznitelikleri ya da aspect-ratio ile yer tutmak, düzlem kaymasını en ucuz çözen adımdır. Üç suçlunun ortak yönü şudur: hepsi üçüncü parti kaynaklardan gelir. Kendi kodunuz nadiren panelleri bozar; reklam ağı, analiz betiği ve gömülü oynatıcı bozar. Bu yüzden iyileştirme oturumlarının ilk yarısı kendi kodunuzu değil, sayfaya davet ettiğiniz misafirleri denetlemekle geçer.

Ölçmeden İyileştirme Yok

Her yüksek trafikli projede önce saha verisini okuyun, ardından en yavaş bölüme odaklanın. Reklam kütüphaneleri ve gömülü oynatıcılar çoğu zaman iyileştirmenin değil, bozulmanın kaynağıdır; onları geciktirmek tek başına CLS ve INP'yi düzeltebilir. Gerçek kullanıcı izlemesini yayın gününden itibaren kurun, eşik aşımlarında uyarı alın; sürüm yayınladıktan sonraki ilk yarım saat, puanları en çok oynatan yarım saattir. Performans bir projenin son sprintindeki faaliyet değil, yayın gününden itibaren sürdürülen bir disiplindir; üç sayı, bu disiplinin pusulasıdır. Sayıları panosu olmayan ekip için de bir özet tablosu bırakın: hangi metrik, hangi hedefin neresinde, bu hafta ne değişti. Üç satırlık bu tablo, yönetimle konuşurken en çok işe yarayan performans çıktısıdır.