Ölçüm (Lighthouse, DevTools)

Ölçüm Nedir

Core Web Vitals dersinde LCP, INP ve CLS'nin ne anlama geldiğini gördünüz. Bu derste bu sayıları nereden okuyacağınıza bakıyoruz. İki tür veri vardır: lab verisi tek bir cihaz, tek bir ağ ve genellikle boş bir önbellekle kontrollü ortamda üretilir; field verisi ise gerçek kullanıcıların farklı cihaz ve ağlardaki deneyimlerinin dağılımıdır ve 75. persentilden raporlanır.¹

İkisi aynı sayıyı vermez ve vermesi de beklenmez. Neyi düzelteceğinize field verisiyle karar verin, nedenini lab verisiyle bulun.¹ Pek çok kişi işe Lighthouse ile başlayıp düşük değerli düzeltmelerle zaman kaybeder; önce gerçek kullanıcı verisinde hangi metriğin hangi sayfada kötü olduğuna bakmak daha verimlidir.²

Lighthouse

Lighthouse, sayfayı denetleyip Performance, Accessibility, Best Practices ve SEO kategorilerinde skor veren bir araçtır ve Chrome DevTools içinde kendi paneliyle gelir.³ 2026 itibarıyla güncel ana sürüm Lighthouse 13'tür; Ekim 2025'te çıkan bu sürüm eski performans denetimlerinin birçoğunu DevTools Performance panelindeki Insights ile ortak denetimlerle değiştirdi.⁴ Bu dersteki bilgiler Haziran 2026'da çıkan v13.4.0 sürümüne göre yazıldı.⁵

DevTools'ta çalıştırmak için:³

1. Sayfayı gizli pencerede (incognito) açın, DevTools'ta Lighthouse paneline geçin.

2. Modu seçin: Navigation sayfayı baştan yükler, Timespan siz sayfayla etkileşirken kayıt alır, Snapshot sayfanın o anki halini denetler.

3. Cihazı (mobil ya da masaüstü) ve kategorileri seçip denetimi başlatın.

Skor nasıl hesaplanır

Performans skoru denetimlerden değil beş metrikten hesaplanır. Lighthouse 13 skorlamayı değiştirmedi; ağırlıklar Lighthouse 10'dan beri aynıdır:⁶⁴

Her metrik HTTP Archive'daki gerçek site verisinden türetilen log-normal bir eğriyle 0-100 arası puana çevrilir. Renkler: 0-49 kırmızı (kötü), 50-89 turuncu (iyileştirilmeli), 90-100 yeşil (iyi).⁶ Listede INP yok: lab testi kullanıcının sayfayla ne zaman etkileşeceğini bilemez, bu yüzden yanıt verme hızı için TBT'ye bakılır. TBT iyi olup INP kötü olabilir.¹

Skor neden her seferinde değişiyor

Aynı sayfayı iki kez denetlediğinizde farklı skor görmeniz normaldir. Değişkenliğin çoğu Lighthouse'tan değil ortamdan gelir: sayfadaki A/B testleri ve reklamlar, yerel ağ, bilgisayarın donanımı ve aynı anda çalışan uygulamalar ya da eklentiler.⁸ Lighthouse ekibinin önerisi tek sonuca değil birden fazla çalıştırmanın medyanına bakmaktır; 5 çalıştırmanın medyanı tek çalıştırmadan yaklaşık iki kat daha kararlıdır. Aynı makinede aynı anda birden fazla Lighthouse çalıştırmayın.⁸

Lighthouse her testte bir CPU ölçümü de yapar, bu yüzden hızlı bir bilgisayarda skor daha yüksek çıkar. PageSpeed Insights ise sayfayı hızlı bağlantıda yükleyip yavaş ağı simüle eder ve sizin bilgisayarınızda değil Google sunucularında çalışır; DevTools'taki skorla farklı çıkmasının ana nedenleri bunlardır.⁹

Mobil ve masaüstü

Mobil test, orta seviye bir mobil cihazı mobil ağda simüle eder; masaüstü testi kablolu bağlantıda bir masaüstü emüle eder.¹⁰ Masaüstünün Lighthouse v6'dan beri kendi skor eğrisi vardır, bu yüzden iki skoru birbiriyle kıyaslamayın.⁶

PageSpeed Insights ve CrUX

Chrome User Experience Report (CrUX), Chrome kullanıcılarının popüler sitelerdeki gerçek deneyimini toplayan, Google'ın herkese açık veri setidir. Bir sayfanın ya da origin'in listede yer alması için herkese açık olması ve istatistiksel olarak anlamlı sayıda ziyaretçisi olması gerekir. Veriye PageSpeed Insights, CrUX API, BigQuery ve CrUX Vis ile ulaşılır.⁷

PageSpeed Insights (PSI) (pagespeed.web.dev) bir URL için iki şeyi birlikte gösterir: üstte CrUX'tan gelen son 28 günlük field verisi, altta uzaktan çalıştırılan Lighthouse raporu.¹⁰

• Değerler 75. persentildir; yani kullanıcıların çoğunun deneyimini temsil eder.¹⁰

• Sayfa için yeterli veri yoksa PSI tüm site (origin) verisine düşer; origin için de yoksa field verisi hiç görünmez.¹⁰

Ölçek için bir fikir: 2025'te sitelerin mobilde %48'i, masaüstünde %56'sı iyi Core Web Vitals değerlerine sahipti.¹¹

DevTools Performance Paneli

Performance paneli açıldığı anda, kayıt bile almadan sayfanın yerel LCP ve CLS değerlerini canlı gösterir; sayfayla etkileştikçe INP de eklenir. Değerin üstüne gelince metriğin parçalara ayrılmış hali görünür.¹² Ayrıntılı performans incelemesi için Lighthouse yerine bu panel önerilir.³

• LCP öğesi: Canlı metrikler ekranı LCP öğesine bağlantı verir; üstüne gelince sayfada vurgulanır, tıklayınca Elements panelinde açılır.¹³

• Etkileşim kaydı: DevTools açıkken yaptığınız tıklama ve tuş basışları türü, hedefi ve gecikmesiyle listelenir.¹³

• Field verisi: Field data > Set up ile CrUX verisini çekip yerel sonucunuzla karşılaştırabilirsiniz; localhost'u canlı alan adınızla eşleyebilirsiniz.¹²

• Throttling: Bilgisayarınız kullanıcılarınızınkinden çok daha hızlıdır. CPU yavaşlatma (ör. 20x) ve ağ ön ayarları (ör. Slow 4G) ile ölçün; field verisi bağlıysa panel kullanıcılarınızın en yaygın cihaz ve ağ koşulunu öneriyor.¹²¹³

Bir sorunun nedenini bulmak için Record load performance ile sayfa yüklemesini kaydedin.¹² Kaydın yanındaki Insights kenar çubuğu Lighthouse tarzı öneriler verir. Örneğin LCP by phase LCP süresini dört alt parçaya böler, LCP request discovery ise LCP görselinin ne kadar erken yüklenebileceğini gösterir.¹⁴ Bu bulguların nasıl düzeltileceği Görsel ve Font ile Bundle Boyutu derslerinin konusudur.

Gerçek Kullanıcıdan Ölçüm

CrUX yalnızca Chrome kullanıcılarını ve yeterli trafiği olan siteleri kapsar, ayrıntılı kırılım da vermez. Kendi kullanıcılarınızdan veri toplamaya Real User Monitoring (RUM) denir.²

web-vitals kütüphanesi

GoogleChrome'un web-vitals kütüphanesi LCP, INP ve CLS gibi metrikleri gerçek kullanıcının tarayıcısında ölçüp bir callback'e verir.¹⁵

$ pnpm add web-vitals

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

function sendToAnalytics(metric: Metric) {
  const body = JSON.stringify({ name: metric.name, value: metric.value, rating: metric.rating, id: metric.id });
  navigator.sendBeacon('/analytics', body);
}

onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);

sendBeacon sayfa kapanırken bile veri gönderebildiği için tercih edilir. Kullanıcı sayfayla hiç etkileşmezse INP raporlanmaz. Hangi öğenin soruna yol açtığını görmek için web-vitals/attribution girişini kullanın; metriğe bir attribution alanı eklenir ama paket biraz büyür.¹⁵

Next.js: useReportWebVitals

Next.js aynı metrikleri (TTFB, FCP, LCP, CLS, INP) next/web-vitals içindeki useReportWebVitals hook'uyla verir. Hook bir Client Component'te çalışmalıdır; bu yüzden ayrı bir dosyada tutup root layout'a eklemek client sınırını o modülle sınırlar.¹⁶

// app/_components/web-vitals.tsx
'use client';

import { useReportWebVitals } from 'next/web-vitals';

type ReportWebVitalsCallback = Parameters<typeof useReportWebVitals>[0];

const report: ReportWebVitalsCallback = (metric) => {
  navigator.sendBeacon('/analytics', JSON.stringify(metric));
};

export function WebVitals() {
  useReportWebVitals(report);
  return null;
}

// app/layout.tsx
import { WebVitals } from './_components/web-vitals';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="tr">
      <body>
        <WebVitals />
        {children}
      </body>
    </html>
  );
}

Metrik nesnesinde name, value, rating (good, needs-improvement, poor), id ve navigationType gibi alanlar gelir. Google Analytics gibi bir araca gönderirken id alanı, dağılımı ve persentilleri kendiniz hesaplamanızı sağlar.¹⁶

Detaylı Öğrenmek İçin

• Konuşma: Barry Pollard ve Ewa Gasperowicz'in JSNation 2025'te yeni Performance panelini, canlı metrikleri, throttling ayarını ve Insights'ı anlattığı konuşma (29 dk).¹⁷

• Lab ve field farkı: Philip Walton'ın LCP, CLS ve INP için iki verinin neden ayrıştığını tek tek anlattığı yazı.¹

• Skor oynaklığı: Lighthouse ekibinin değişkenlik kaynaklarını ve önerilen test ortamını listelediği doküman.⁸

• PSI ve Lighthouse farkı: Matt Zeunert'in simüle ve gerçek throttling farkını açıkladığı yazı.⁹