Misurare i Core Web Vitals con l'API PageSpeed Insights e l'API Chrome UX (CrUX) Report

1. Prima di iniziare

In questo codelab, imparerai a misurare i Segnali web essenziali di una pagina web con l'API PageSpeed Insights e l'API CrUX.

Entrambe le API restituiscono dati identici sui Segnali web essenziali, ma ognuna offre vantaggi distinti. Oltre ai dati CrUX sul campo, l'API PageSpeed Insights fornisce anche dati di Lighthouse, lo strumento automatizzato e open source di Google che controlla le pagine web e consiglia come migliorarle. L'API CrUX non fornisce dati di Lighthouse, quindi viene eseguita più rapidamente.

Google consiglia di misurare i Core Web Vitals su dispositivi mobili e computer. I Segnali web essenziali includono queste tre metriche, che si applicano a tutte le pagine web e forniscono informazioni fondamentali sull'esperienza utente:

• Largest Contentful Paint (LCP). Misura il rendimento di caricamento e deve verificarsi entro 2,5 secondi dall'inizio del caricamento della pagina.
• First Input Delay (FID). Misura l'interattività e deve verificarsi entro 100 millisecondi.
• Cumulative Layout Shift (CLS). Misura la stabilità visiva e deve essere compreso tra 0 e 1.

Prerequisiti

• Articolo sui Web Vitals
• Conoscenza di base della riga di comando
• Articolo sulla definizione delle soglie delle metriche di Core Web Vitals

Cosa imparerai a fare

• Misura i Segnali web essenziali di una pagina web con l'API PageSpeed Insights.
• Misura i Segnali web essenziali di una pagina web con l'API CrUX.

Che cosa ti serve

• Un Account Google
• Accesso a una riga di comando
• Un editor di testo a tua scelta
• Un browser web a tua scelta
• Un URL a tua scelta (questo codelab utilizza https://developers.google.com).

2. Misurare i Core Web Vitals con l'API PageSpeed Insights

1. Se hai bisogno dei dati sul rendimento per la versione desktop di un URL, richiedili all'API PageSpeed Insights e salvali in un file response.txt:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Sostituisci il segnaposto YOUR_URL con il tuo URL.

Alla fine della stringa API, nota che il parametro di query strategy è impostato sul valore desktop, che specifica la richiesta di dati desktop.

2. Se hai bisogno dei dati sul rendimento per la versione mobile di un URL, richiedili all'API PageSpeed Insights e salvali in un file response.txt:

curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Sostituisci il segnaposto YOUR_URL con il tuo URL.

Alla fine della stringa API, nota che il parametro di query strategy è impostato su un valore mobile, che specifica la richiesta di dati mobile.

3. Nell'editor di testo, apri il file response.txt e individua la proprietà loadingExperience:

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"
      },
  },

La proprietà loadingExperience riporta queste informazioni per ciascuna metrica di Segnali web essenziali in base all'URL e al tipo di dispositivo indicati nella richiesta API:

• La proprietà percentile indica il 75° percentile per ogni metrica.
• La proprietà distributions indica la percentuale di visualizzazioni di pagina che hanno avuto un'esperienza buona, migliorabile o scadente per ogni metrica.
• La proprietà category classifica il rendimento di ogni metrica come lento, medio o veloce.

Se i contenuti della proprietà loadingExperience sono vuoti, l'URL non dispone di dati sul rendimento sufficienti. Questo problema si verifica in genere quando testi pagine web con poco traffico.

4. Trova la proprietà originLoadingExperience:

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"
      },
  },

La proprietà originLoadingExperience riporta le esperienze aggregate per l'intera origine, anziché solo per l'URL. Fornisce le stesse informazioni per ciascuna delle Core Web Vitals, come spiegato nel passaggio precedente.

3. Misurare i Segnali web essenziali con l'API CrUX

Ottieni una chiave API

1. Nella console Google Cloud, cerca Chrome UX e poi seleziona API Chrome UX Report nel menu a discesa.
2. Nella pagina API Chrome UX Report, fai clic su Attiva e poi attendi che il pulsante Attiva si trasformi in un pulsante Gestisci e seleziona Gestisci.
3. Nel menu di navigazione, fai clic su Credenziali, quindi seleziona Crea credenziali > Chiave API e copia la chiave API.

Fare una richiesta

1. Dalla riga di comando, richiedi i dati sul rendimento per il tuo URL dall'API CrUX e salvali in un file response.txt:

curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'

Sostituisci il segnaposto YOUR_API_KEY con la tua chiave API e poi sostituisci il segnaposto YOUR_URL con il tuo URL.

Attenzione:questo comando si applica a macOS, Linux e Git BASH per Windows. Se la tua macchina esegue un sistema operativo o una riga di comando diversi, potresti dover modificare leggermente il comando. Ad esempio, se utilizzi la shell dei comandi su Windows, devi utilizzare le virgolette doppie anziché quelle singole per i parametri. Dopodiché, devi inserire una barra prima delle virgolette doppie esistenti per eseguire l'escape delle virgolette interne.

2. Nell'editor di testo, apri il file response.txt:

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"
        }
      },
    }
  },
}

La risposta dell'API CrUX fornisce queste informazioni per ciascuna delle metriche di Segnali web essenziali:

• La proprietà histogram indica la percentuale di utenti che hanno avuto un'esperienza lenta, media o veloce per una determinata metrica.
• La proprietà percentiles indica l'osservazione del 75° percentile per una determinata metrica.

Se visualizzi un messaggio di errore che indica che i dati non sono stati trovati, significa che non sono disponibili dati sul rendimento sufficienti per l'URL specificato. Questo problema si verifica in genere quando testi pagine web con poco traffico.

4. Complimenti

Complimenti! Hai misurato le Core Web Vitals di una pagina web con l'API PageSpeed Insights e l'API CrUX.

Scopri di più

• Inizia a utilizzare l'API PageSpeed Insights
• Utilizzare l'API CrUX
• Web Vitals