1. Başlamadan önce
Bu codelab'de, web sayfalarının Önemli Web Verileri'ni PageSpeed Insights (PSI) API'si ve Chrome Kullanıcı Deneyimi Raporu (CrUX) API'si ile ölçmeyi öğreneceksiniz.
Her iki API de aynı Önemli Web Verileri verilerini döndürür, ancak her API farklı avantajlar sunar. PSI API, alandaki CrUX verilerine ek olarak, Google'ın web sayfalarını denetleyen ve nasıl iyileştirilebileceğini öneren otomatik ve açık kaynaklı aracı Lighthouse'tan da veri sağlar. CrUX API, Lighthouse verilerini sağlamadığından daha hızlı çalıştırılır.
Google, Önemli Web Verileri'ni 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 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
- Web Verileri makalesi.
- Önemli Web Verileri metrik eşiklerini tanımlama.
- Komut satırının nasıl kullanılacağı konusunda temel bilgi.
Ne yaparsınız?
- Bir web sayfasının Önemli Web Verileri'ni PSI API ile ölçün.
- CrUX API'siyle bir web sayfasının Önemli Web Verileri'ni ölçün.
Gerekenler
- Bir Google Hesabı
- Komut satırına erişim
- İstediğiniz bir metin düzenleyici
- İstediğiniz bir web tarayıcısı
- Seçtiğiniz bir URL (Bu codelab'de https://developers.google.com kullanılmaktadır).
2. PSI API ile Önemli Web Verileri'ni ölçün
- Bir URL'nin masaüstü sürümüne ait performans verilerine ihtiyacınız varsa PageSpeed Insights API'sinden veri istemek ve bir
response.txtdosyasına kaydetmek için şucurlkomutunu çalıştırın:
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.
- Bir URL'nin mobil sürümüne ait performans verilerine ihtiyacınız varsa önceki adımda sağlanan komutta API dizesinin sonundaki
strategysorgu parametresinimobiledeğerine ayarlayın:
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.
- Metin düzenleyicide
response.txtdosyasını açın ve ardındanloadingExperienceözelliğini bulun:
yanıt.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 bir metrik için 75. yüzdelik dilimi gösterir.distributionsözelliği, her bir metrik için iyi, iyileştirme gerektiriyor veya zayıf deneyime sahip sayfa görüntülemelerinin yüzdesini belirtir.categoryözelliği, her bir metriğin performansını yavaş, ortalama veya hızlı olarak sınıflandırır.
loadingExperience özelliğinin içeriği boşsa URL, yeterli performans verisine sahip değildir. Bu sorun genellikle trafiği az olan web sayfalarını test ettiğinizde ortaya çıkar.
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 özelliği, yalnızca URL'yi değil, kaynağın tamamı için toplu deneyimleri raporlar. Önceki Web Verileri'nin her biri için önceki adımda açıklanan bilgilerin aynısını sağlar.
3. CrUX API'si ile Önemli Web Verileri'ni ölçün
API anahtarı alma
- Google Cloud Console'da
Chrome UXaraması yapın ve ardından açılır menüden Chrome UX Report API'yi seçin. - Chrome UX Report API sayfasında Etkinleştir'i tıklayıp Etkinleştir düğmesinin Yönet düğmesiyle değiştirilmesini bekleyin ve Yönet'i seçin.
- Gezinme menüsünde, Kimlik Bilgileri'ni tıklayın ve ardından Kimlik Bilgileri > API anahtarı Oluştur'u seçip API anahtarını kopyalayın.
İstekte bulunma
- Komut satırınızdan CrUX API'den URL'nizin performans verilerini isteyin ve bunu bir
response.txtdosyası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 ve ardından YOUR_URL yer tutucusunu URL'nizle değiştirin.
- Metin düzenleyicinizde
response.txtdosyasını açın:
yanıt.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ı deneyim yaşayan kullanıcıların yüzdesini belirtir.percentilesözelliği, belirli bir metrik için 75. yüzdelik dilim gözlemini belirtir.
Verinin bulunamadığını belirten bir hata mesajı görürseniz belirtilen URL için yeterli performans verisi yok demektir. Bu sorun genellikle trafiği az olan web sayfalarını test ettiğinizde ortaya çıkar.
4. Tebrikler
Tebrikler! Bir web sayfasının Önemli Web Verileri'ni PSI API ve CrUX API ile ölçtünüz.