PageSpeed Insights API ve Chrome Kullanıcı Deneyimi (CrUX) Raporu API'si ile Core Web Vitals metriklerini ölçme

1. Başlamadan önce

Bu codelab'de, bir web sayfasının Core Web Vitals metriklerini PageSpeed Insights API ve CrUX API ile nasıl ölçeceğinizi öğreneceksiniz.

Her iki API de aynı Önemli Web Verileri'ni döndürür ancak her API'nin kendine özgü avantajları vardır. PageSpeed Insights API, alandaki CrUX verilerinin yanı sıra Google'ın web sayfalarını denetleyen ve nasıl iyileştirileceğini öneren otomatik ve açık kaynaklı aracı Lighthouse'tan da veri sağlar. CrUX API, Lighthouse verileri sağlamadığından daha hızlı çalışır.

Google, Core Web Vitals'ı mobil ve masaüstü cihazlarda ölçmenizi önerir. Önemli Web Verileri, tüm web sayfaları için geçerli olan ve kullanıcı deneyimi hakkında önemli bilgiler sağlayan şu üç metriği içerir:

  • Largest Contentful Paint (LCP) Yükleme performansını ölçer ve sayfa yüklenmeye başladıktan sonraki 2,5 saniye içinde gerçekleşmelidir.
  • First Input Delay (FID) Etkileşimi ölçer ve 100 milisaniye içinde gerçekleşmelidir.
  • Cumulative Layout Shift (CLS) Görsel kararlılığı ölçer ve 0,1'in altında olmalıdır.

Ön koşullar

Neler öğreneceksiniz?

  • PageSpeed Insights API ile bir web sayfasının Core Web Vitals değerlerini ölçün.
  • CrUX API ile bir web sayfasının Core Web Vitals metriklerini ölçün.

İhtiyacınız olanlar

  • Bir Google Hesabı
  • Komut satırına erişim
  • Seçtiğiniz bir metin düzenleyici
  • Seçtiğiniz bir web tarayıcısı
  • Seçtiğiniz bir URL (Bu codelab'de https://developers.google.com kullanılır.)

2. PageSpeed Insights API ile Core Web Vitals'ı ölçme

  1. Bir URL'nin masaüstü sürümüne ait performans verilerine ihtiyacınız varsa verileri PageSpeed Insights API'den isteyin ve response.txt dosyasına kaydedin:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

YOUR_URL yer tutucusunu URL'nizle değiştirin.

API dizesinin sonunda, strategy sorgu parametresinin desktop değerine ayarlandığını görürsünüz. Bu değer, masaüstü verileri için isteği belirtir.

  1. Bir URL'nin mobil sürümüyle ilgili performans verilerine ihtiyacınız varsa PageSpeed Insights API'den verileri isteyin ve response.txt dosyasına kaydedin:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

YOUR_URL yer tutucusunu URL'nizle değiştirin.

API dizesinin sonunda, strategy sorgu parametresinin mobile değerine ayarlandığını görürsünüz. Bu değer, mobil veriler için isteği belirtir.

  1. Metin düzenleyicinizde response.txt dosyasını açın ve loadingExperience özelliğini bulun:

response.txt

   "loadingExperience": {
    "id": "https://developers.google.com/",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1714,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.49701860391159164
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.40071951025600261
          },
          {
            "min": 3000,
            "proportion": 0.10226188583240581
          }
        ],
        "category": "AVERAGE"
      },
  },

loadingExperience özelliği, API isteğinde belirtilen URL ve cihaz türüne göre Önemli Web Verileri'nin her biri için bu bilgileri raporlar:

  • percentile özelliği, her metrik için 75. yüzdelik dilimi gösterir.
  • distributions özelliği, her metrik için iyi, iyileştirme gerektiriyor veya yetersiz deneyime sahip sayfa görüntülemelerinin yüzdesini gösterir.
  • category özelliği, her metriğin performansını yavaş, ortalama veya hızlı olarak sınıflandırır.

loadingExperience özelliğinin içeriği boşsa URL'de yeterli performans verisi yoktur. Bu sorun genellikle düşük trafikli web sayfalarını test ederken ortaya çıkar.

  1. originLoadingExperience özelliğini bulun:

response.txt

  "originLoadingExperience": {
    "id": "https://developers.google.com",
    "metrics": {
      "LARGEST_CONTENTFUL_PAINT_MS": {
        "percentile": 1649,
        "distributions": [
          {
            "min": 0,
            "max": 1000,
            "proportion": 0.488838781075378
          },
          {
            "min": 1000,
            "max": 3000,
            "proportion": 0.42709617576692827
          },
          {
            "min": 3000,
            "proportion": 0.084065043157693739
          }
        ],
        "category": "AVERAGE"
      },
  },

originLoadingExperience mülkü, yalnızca URL'yi değil, kaynağın tamamına ait toplu deneyimleri bildirir. Önceki adımda açıklandığı gibi, Önemli Web Verileri'nin her biri için aynı bilgileri sağlar.

3. CrUX API ile Core Web Vitals'ı ölçme

API anahtarı alma

  1. Google Cloud Console'da Chrome UX ifadesini arayın ve açılır menüden Chrome UX Report API'yi seçin.
  2. Chrome UX Report API sayfasında Etkinleştir'i tıklayın ve Etkinleştir düğmesinin Yönet düğmesine dönüşmesini bekleyip Yönet'i seçin.
  3. Gezinme menüsünde Kimlik bilgileri'ni tıklayın, ardından Kimlik bilgileri oluştur > API anahtarı'nı seçip API anahtarını kopyalayın.

Talepte bulunma

  1. Komut satırınızdan CrUX API'den URL'niz için performans verileri isteyin ve bunları response.txt dosyasına kaydedin:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'

YOUR_API_KEY yer tutucusunu API anahtarınızla, YOUR_URL yer tutucusunu ise URL'nizle değiştirin.

  1. Metin düzenleyicinizde response.txt dosyasını açın:

response.txt

{
  "record": {
    "key": {
      "url": "https://developers.google.com/"
    },
    "metrics": {
      "cumulative_layout_shift": {
        "histogram": [
          {
            "start": "0.00",
            "end": "0.10",
            "density": 0.47784335300590036
          },
          {
            "start": "0.10",
            "end": "0.25",
            "density": 0.32379713914174157
          },
          {
            "start": "0.25",
            "density": 0.19835950785235579
          }
        ],
        "percentiles": {
          "p75": "0.23"
        }
      },
    }
  },
}

CrUX API yanıtı, Önemli Web Verileri'nin her biri için şu bilgileri sağlar:

  • histogram özelliği, belirli bir metrik için yavaş, ortalama veya hızlı bir deneyim yaşayan kullanıcıların yüzdesini gösterir.
  • percentiles özelliği, belirli bir metrik için 75. yüzdelik dilim gözlemini gösterir.

Verilerin bulunamadığını belirten bir hata mesajı görürseniz söz konusu URL için yeterli performans verisi yoktur. Bu sorun genellikle düşük trafikli web sayfalarını test ederken ortaya çıkar.

4. Tebrikler

Tebrikler! Bir web sayfasının Core Web Vitals metriklerini PageSpeed Insights API ve CrUX API ile ölçtünüz.

Daha fazla bilgi