Misura i Segnali web essenziali con le API PSI e CrUX

Misura i Segnali web essenziali con le API PSI e CrUX

Informazioni su questo codelab

subjectUltimo aggiornamento: mag 9, 2022
account_circleScritto da: Rick Viscomi

1. Prima di iniziare

In questo codelab, imparerai a misurare i Segnali web essenziali con l'API PageSpeed Insights (PSI) e l'API UX Report di Chrome (CrUX).

Entrambe le API restituiscono i dati di Segnali web essenziali identici, ma ogni API offre vantaggi specifici. Oltre ai dati di CrUX sul campo, l'API PSI fornisce anche i dati di Lighthouse, uno strumento automatico e open source di Google che controlla le pagine web e suggerisce come migliorarli. L'API CrUX non fornisce dati di Lighthouse, pertanto è più veloce.

Google consiglia di misurare i Segnali web essenziali su dispositivi mobili e desktop. Le metriche di Segnali web essenziali includono queste tre metriche, che si applicano a tutte le pagine web e forniscono informazioni importanti sull'esperienza utente:

  • LCP (Largest Contentful Paint). Misura le prestazioni del caricamento e dovrebbe avvenire entro 2,5 secondi dall'inizio del caricamento della pagina.
  • FID (First Input Delay) Misura l'interattività e dovrebbe avvenire entro 100 millisecondi.
  • CLS (Cumulative Layout Shift). Misura la stabilità visiva e dovrebbe essere pari a 0,1.

Prerequisiti

Attività previste

  • Misura le metriche di Segnali web essenziali con un'API PSI.
  • 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. Misura i Segnali web essenziali con l'API PSI

  1. Se hai bisogno dei dati sulle prestazioni della versione desktop di un URL, esegui questo comando curl per richiedere i dati dall'API PageSpeed Insights e salvarli 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.

  1. Se ti servono i dati sul rendimento della versione per dispositivi mobili di un URL, imposta il parametro di ricerca strategy su un valore mobile alla fine della stringa API nel comando fornito nel passaggio precedente:
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.

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

file di risposta.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 ciascuno dei 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 buono, richiede miglioramenti o scarso per ogni metrica.
  • La proprietà category classifica il rendimento di ogni metrica come lenta, media o veloce.

Se i contenuti della proprietà loadingExperience sono vuoti, l'URL non dispone di dati sufficienti sul rendimento. In genere, questo problema si verifica quando verifichi pagine web con traffico ridotto.

  1. Trova la proprietà originLoadingExperience:

risposta.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 registra le esperienze aggregate per l'intera origine anziché solo l'URL. Fornisce le stesse informazioni per ognuno dei Segnali web essenziali come descritto nel passaggio precedente.

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

ottieni una chiave API

  1. In Google Cloud Console, cerca Chrome UX, quindi seleziona l'API Chrome UX Report nel menu a discesa.
  2. Nella pagina API Chrome UX Report, fai clic su Abilita, quindi attendi che il pulsante Abilita passi a un pulsante Gestisci e seleziona Gestisci.
  3. Nel menu di navigazione, fai clic su Credenziali, quindi seleziona Crea credenziale > chiave API e copia la chiave API.

Invia una richiesta

  1. Dalla riga di comando, richiedi i dati sulle prestazioni dell'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 il segnaposto YOUR_URL con il tuo URL.

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

file di risposta.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 ognuno dei Segnali web essenziali:

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

Se viene visualizzato un messaggio di errore indicante che i dati non sono stati trovati, significa che i dati sul rendimento non sono sufficienti per l'URL in questione. In genere, questo problema si verifica quando verifichi pagine web con traffico ridotto.

4. Complimenti

Complimenti! Hai misurato le metriche di Segnali web essenziali con un'API PSI e un'API CrUX.

Ulteriori informazioni

bug_report Segnala un errore