Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web Vitals kitaplığıyla web sayfasının Önemli Web Verilerini ölçün

1. Başlamadan önce

Bu codelab'de, web sayfalarının Önemli Web Verileri'ni web-vitals JavaScript kitaplığıyla nasıl ölçeceğinizi öğreneceksiniz.

Google, Önemli Web Verileri'ni ölçmenizi ve mobil ve masaüstü cihazlar arasında segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimi içinde yer almanızı önerir.

Önemli Web Verileri, tüm web sayfaları için geçerli olan ve kullanıcı deneyimi hakkında kritik bilgiler sağlayan şu üç metriği içerir:

Largest Contentful Paint (LCP). Yükleme performansını ölçer ve sayfanın yüklenmeye başlamasından sonraki 2,5 saniye içinde gerçekleşmesi gerekir.
İlk Giriş Gecikmesi (FID). Etkileşimi ölçer ve 100 milisaniye içinde gerçekleşmesi gerekir.
Cumulative Layout Shift (CLS). Görsel kararlılığı ölçer ve 0,1 içinde olmalıdır.

Ön koşullar

Ne yaparsınız?

web-vitals kitaplığını web sayfasına ekleyin.
Google Chrome Geliştirici Araçları'nda web sayfasının Önemli Web Verilerini ölçün.
İsteğe bağlı: Web sayfasının Önemli Web Verileri'ni Google Analytics'e bildirin.

Gerekenler

Sublime Text veya Visual Studio Code gibi istediğiniz bir metin düzenleyici
Google Chrome veya Microsoft Edge gibi Chromium tabanlı bir web tarayıcısı (Chromium tabanlı bir web tarayıcısına neden ihtiyacınız olduğu hakkında daha fazla bilgi edinmek için Tarayıcı Desteği konusuna bakın.)

2. Web-vitals kitaplığını web sayfasına ekleme

Metin düzenleyicinizde, bir web-vitals-test.html dosyası oluşturun ve dosyaya şu HTML kodunu girin:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Bu kod, bu codelab için kullandığınız web sayfasını oluşturur.

İkinci <p> öğesinden sonra, HTML kodu <body> öğesine şu modül komut dosyasını girin ve ardından dosyayı kaydedin:

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

Bu modül komut dosyası, içerik yayınlama ağından web-vitals kitaplığı yükler. Dosyanız şu kod snippet'i gibi görünür:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

Tüm modern tarayıcılar, Önemli Web Verileri'ni ölçmek için gerekli olanlar gibi yalnızca yeni API'leri kullanan kodlar için uygun olan modül komut dosyalarını destekler. Modülleri veya Önemli Web Verileri API'lerini desteklemeyen tarayıcılar bu komut dosyasını yüklemeye çalışmaz.

3. Google Chrome Geliştirici Araçları'nda web sayfasının Önemli Web Verilerini ölçün

Web tarayıcınızda kayıtlı dosyayı açın.
Web sayfasını sağ tıklayın, ardından iletişim kutusunda Denetle'yi tıklayın.
Google Chrome Geliştirici Araçları bölmesinde, Konsol sekmesini tıklayın ve ardından Konsol ayarları > Günlüğü koru'yu seçin. Bu ayar, web sayfasını yenilediğinizde günlüklerin korunmasını sağlar.

Ağ sekmesini, ardından kısıtlama açılır menüsünün genişletme okunu tıklayın ve Yavaş 3G'yi seçin. Bu ayar, yavaş ağ bağlantısını simüle eder.

Kısıtlama açılır menüsünde Yavaş 3G ayarının seçili Ağ sekmesi.

Konsol sekmesine geri dönün ve web sayfasında herhangi bir yeri tıklayın. LCP ve İGG metrikleri Konsol sekmesinde yazdırılır.

LCP ve İGG metrikleri yazdırıldıktan sonra Konsol sekmesi.

Web sayfasını yenileyin. CLS metriği, Konsol sekmesinde yazdırılır.

CLS metriği yazdırıldıktan sonraki Konsol sekmesi.

Ağ sekmesine geri dönün ve ardından kısıtlama açılır menüsünün genişletici okunu tıklayıp Hızlı 3G'yi seçin. Bu ayar hızlı bir ağ bağlantısını simüle eder.
Konsol sekmesine geri dönün ve web sayfasında herhangi bir yeri tıklayın.LCP ve İGG metrikleri Konsol sekmesinde tekrar yazdırılır ancak daha önce iyileştirme yapıldı.

LCP ve FID metriklerinden sonra Konsol sekmesi tekrar yazdırılır.

Web sayfasını yenileyin. CLS metriği, Konsol sekmesinde tekrar yazdırılır ancak öncekinden iyileştirilir.

CLS metriği tekrar basıldığında Console sekmesi tekrar yazdırılır.

4. İsteğe bağlı: Web sayfasının Önemli Web Verileri'ni Google Analytics'e bildirme

Modül komut dosyasının içe aktarma beyanından sonraki web-vitals-test.html dosyasına şu sendToGoogleAnalytics() işlevini girin ve ardından dosyayı kaydedin:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

Bu kod, Önemli Web Verileri'ni Google Analytics'e gönderir. Bunları, En İyi Etkinlikler raporunda görebilirsiniz:

Google Analytics'teki En Başarılı Etkinlikler raporu

Dosyanız şu kod snippet'i gibi görünür:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Tebrikler

Tebrikler! web-vitals kitaplığıyla bir web sayfasının Önemli Web Verilerini nasıl ölçeceğinizi ve bildireceğinizi öğrendiniz.

Daha fazla bilgi

Web Verileri