CrUX API ile gerçek kullanıcı Core Web Vitals verisini çekmek

01/06/25

PageSpeed Insights'taki "laboratuvar" puanı, tek bir test cihazında tek bir yükleme. Sıralamaya giren ise gerçek kullanıcı verisi, yani Chrome kullanıcılarından toplanan son 28 günlük değerler. Bu veriye CrUX API ile doğrudan ulaşabilirsin.

Anahtar

Google Cloud Console'da bir proje aç, Chrome UX Report API'yi etkinleştir ve bir API anahtarı oluştur. Ücretsiz.

curl ile

curl -s "https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=ANAHTAR" \
  -H "Content-Type: application/json" \
  -d '{"origin": "https://johnflaxman.com", "formFactor": "PHONE"}' \
  | jq '.record.metrics | {lcp: .largest_contentful_paint.percentiles.p75,
                            inp: .interaction_to_next_paint.percentiles.p75,
                            cls: .cumulative_layout_shift.percentiles.p75}'

JavaScript ile birden fazla sayfa

crux.mjs

const KEY = process.env.CRUX_KEY;
const urls = ['https://ornek.com/', 'https://ornek.com/kategori/ayakkabi'];

for (const url of urls) {
  const res = await fetch(`https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=${KEY}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ url, formFactor: 'PHONE' }),
  });
  if (!res.ok) { console.log(url, '→ yeterli veri yok'); continue; }
  const m = (await res.json()).record.metrics;
  console.log(url, {
    LCP: m.largest_contentful_paint?.percentiles.p75 + ' ms',
    INP: m.interaction_to_next_paint?.percentiles.p75 + ' ms',
    CLS: m.cumulative_layout_shift?.percentiles.p75,
  });
}

Sınırlar

Eşik (p75)	İyi	Geliştirilmeli
LCP	≤ 2.500 ms	≤ 4.000 ms
INP	≤ 200 ms	≤ 500 ms
CLS	≤ 0,1	≤ 0,25

Az trafik alan sayfalar için veri olmaz (404 döner). O durumda url yerine origin sorgulayıp sitenin genel durumuna bakabilirsin.

Comments / questions

There's no comment section here. If you have a question or want to add something, message me on Telegram or send an email to [email protected]. Thanks!