Core Web Vitals — Sayfa Ne Zaman Gerçekten Hazır?

Bir restorana gittin ve ana yemeğin masaya ne zaman geleceğini merak ediyorsun. Biri yanına sandalye sıkıştırınca tabakların kayıyor mu? Garsonu çağırdığında ne kadar çabuk geliyor?

Üç ayrı his

LCP?Terimin tanımını açLCPLargest Contentful Paint: ekrandaki en büyük içeriğin ne zaman çizildiği. 2,5 saniye ya da altı iyi sayılır.Sözlükte gör → (Largest Contentful Paint), ekrandaki en büyük içeriğin, çoğu zaman ana görselin, ne zaman çizildiğini ölçer. Kullanıcı için “sayfa açıldı” hissi budur.

CLS?Terimin tanımını açCLSCumulative Layout Shift: görünen içeriğin sayfa boyunca ne kadar kaydığı. 0,1 ya da altı iyi sayılır.Sözlükte gör → (Cumulative Layout Shift), görünen içeriğin ne kadar kaydığını ölçer. Geç gelen bir bant her şeyi aşağı iterse, kullanıcı yanlış düğmeye basabilir.

Dokunuşa cevap

INP?Terimin tanımını açINPInteraction to Next Paint: bir dokunuştan ekranın bir sonraki çizimine kadar geçen süre. 200 milisaniye ya da altı iyi sayılır.Sözlükte gör → (Interaction to Next Paint), bir dokunuştan ekranın bir sonraki çizimine kadar geçen süreyi ölçer. Uzun bir iş ana thread’i tuttuğu sürece ekran güncellenemez.

Çare işi bölmektir: önce kullanıcının gördüğü değişikliği yap, ağır hesaplamayı ondan sonra yap. Tarayıcı aradaki boşlukta ekranı çizer.

Kendin gör

1. Varsayılanla oynat. Telefonda hiçbir iyileştirme yok: LCP 5,6 sn ve CLS 0,28 kötü, INP 450 ms sınırda.
2. “Masaüstü” seç. Aynı sayfa daha iyi görünüyor, ama zıplama hâlâ kötü.
3. Telefona dön, görseli öne al ve tıklama işini böl. Sayfa hızlı açıldı ve hızlı cevap verdi, ama bant geldiğinde yine zıpladı.
4. “Geç gelenlere yer ayır”ı da aç. Üç ölçüm de iyi.

Tuzaklar

Yalnızca kendi makinende ölçmek. Güçlü bir bilgisayarda her şey hızlıdır. Ölçümleri gerçek kullanıcıların cihazlarından topla ya da yavaş bir telefonu taklit ederek test et.

Ana görseli tembel yüklemek. loading="lazy" ekranın altındaki görseller içindir. İlk ekrandaki ana görsele uygulanırsa tarayıcı onu geç ister ve LCP kötüleşir.

Yalnızca ilk yüklemeye bakmak. CLS ve INP sayfanın bütün ömrü boyunca ölçülür. Kaydırırken gelen bir reklam ya da yavaş bir menü de puanı düşürür.

Aşağıdaki örnek bir bankanın ana sayfasından: öne alınan ana görsel, geç gelen banda ayrılmış yer, bölünmüş bir tıklama işi ve gerçek kullanıcılardan ölçüm.

1
export function HeroCard({ card }: { card: CardSummary }) {
2
  return (
3
    <img
4
      src={card.imageUrl}
5
      alt={`${card.productName} kartı`}
6
      width={640}
7
      height={400}
8
      fetchPriority="high"   // the LCP element: ask for it first
9
      decoding="async"
10
      // no loading="lazy" here: lazy is for images below the fold
11
    />
12
  );
13
}

1
export function CampaignSlot({ campaign }: { campaign?: Campaign }) {
2
  // The slot keeps its height before the campaign arrives, so nothing below it moves.
3
  return (
4
    <div className="min-h-[96px]" aria-live="polite">
5
      {campaign ? <CampaignBanner campaign={campaign} /> : null}
6
    </div>
7
  );
8
}

1
function yieldToBrowser(): Promise<void> {
2
  return new Promise((resolve) => setTimeout(resolve, 0));
3
}
4

5
export function SummaryButton({ accountId }: { accountId: string }) {
6
  const [summary, setSummary] = useState<Summary | 'loading' | null>(null);
7

8
  async function open() {
9
    setSummary('loading');                 // 1. visible feedback first
10
    await yieldToBrowser();                // 2. let the browser paint it
11
    setSummary(buildSummary(accountId));   // 3. the heavy work afterwards
12
  }
13

14
  return (
15
    <button type="button" onClick={open}>
16
      {summary === 'loading' ? 'Hazırlanıyor…' : 'Hesap özeti'}
17
    </button>
18
  );
19
}

1
import { onCLS, onINP, onLCP, type Metric } from 'web-vitals';
2

3
function send(metric: Metric) {
4
  // Field data from real devices, not the developer's laptop.
5
  navigator.sendBeacon('/telemetry/vitals', JSON.stringify({ name: metric.name, value: metric.value, rating: metric.rating }));
6
}
7

8
onLCP(send);
9
onCLS(send);
10
onINP(send);

Kendini sına