Mida Core Web Vitals con la API de PSI y la API de CrUX

Mida Core Web Vitals con la API de PSI y la API de CrUX

Acerca de este codelab

subjectÚltima actualización: may 9, 2022
account_circleEscrito por Rick Viscomi

1. Antes de que empieces

En este laboratorio de código, aprenderá a medir los Core Web Vitals de una página web con la API PageSpeed ​​Insights (PSI) y la API Chrome UX Report (CrUX).

Ambas API devuelven datos idénticos de Core Web Vitals, pero cada API ofrece beneficios distintos. Además de los datos de campo de CrUX, la API de PSI también proporciona datos de Lighthouse, que es la herramienta automatizada y de código abierto de Google que audita las páginas web y recomienda cómo mejorarlas. La API de CrUX no proporciona datos de Lighthouse, por lo que se ejecuta más rápido.

Google recomienda que mida Core Web Vitals en dispositivos móviles y de escritorio. Core Web Vitals incluye estas tres métricas, que se aplican a todas las páginas web y le brindan información crítica sobre la experiencia del usuario:

  • Pintura con contenido más grande (LCP). Mide el rendimiento de la carga y debe ocurrir dentro de los 2,5 segundos desde que la página comienza a cargarse.
  • Retardo de primera entrada (FID). Mide la interactividad y debe ocurrir en 100 milisegundos.
  • Cambio de diseño acumulativo (CLS). Mide la estabilidad visual y debe estar dentro de 0.1.

requisitos previos

que vas a hacer

  • Mida los Core Web Vitals de una página web con la API de PSI.
  • Mida los Core Web Vitals de una página web con la API CrUX.

Lo que necesitarás

  • Una cuenta de Google
  • Acceso a una línea de comando
  • Un editor de texto de su elección
  • Un navegador web de su elección
  • Una URL de su elección (este codelab usa https://developers.google.com ).

2. Medir Core Web Vitals con la API de PSI

  1. Si necesita los datos de rendimiento para la versión de escritorio de una URL, ejecute este comando curl para solicitar los datos de la API de PageSpeed ​​Insights y guárdelos en un archivo de response.txt :
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Reemplace el marcador de posición YOUR_URL con su URL.

  1. Si necesita los datos de rendimiento para la versión móvil de una URL, establezca el parámetro de consulta de strategy en un valor mobile al final de la cadena API en el comando proporcionado en el paso anterior:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Reemplace el marcador de posición YOUR_URL con su URL.

  1. En su editor de texto, abra el archivo response.txt y luego busque la propiedad loadingExperience :

respuesta.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 propiedad loadingExperience informa esta información para cada Core Web Vitals en función de la URL y el tipo de dispositivo indicado en la solicitud de API:

  • La propiedad percentile indica el percentil 75 para cada métrica.
  • La propiedad de distributions indica el porcentaje de páginas vistas que tuvieron una experiencia buena , necesita mejorar o mala para cada métrica.
  • La propiedad de category clasifica el rendimiento de cada métrica como lento, promedio o rápido.

Si el contenido de la propiedad loadingExperience está vacío, la URL no tiene suficientes datos de rendimiento disponibles. Este problema suele surgir cuando prueba páginas web con poco tráfico.

  1. Encuentre la propiedad originLoadingExperience :

respuesta.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 propiedad originLoadingExperience informa las experiencias agregadas para todo el origen, en lugar de solo la URL. Proporciona la misma información para cada uno de los Core Web Vitals como se explicó en el paso anterior.

3. Mida Core Web Vitals con la API CrUX

Obtener una clave de API

  1. En Google Cloud Console , busque Chrome UX y luego seleccione Chrome UX Report API en el menú desplegable.
  2. En la página de la API de informes de Chrome UX , haga clic en Habilitar y luego espere a que el botón Habilitar cambie a un botón Administrar y seleccione Administrar .
  3. En el menú de navegación, haga clic en Credenciales y luego seleccione Crear credenciales > Clave de API y copie la clave de API.

Haz una solicitud

  1. Desde su línea de comandos, solicite datos de rendimiento para su URL desde la API de CrUX y guárdelos en un archivo de 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"}'

Reemplace el marcador de posición YOUR_API_KEY con su clave API y luego reemplace el marcador de posición YOUR_URL con su URL.

  1. En su editor de texto, abra el archivo response.txt :

respuesta.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 respuesta de la API CrUX proporciona esta información para cada uno de los Core Web Vitals:

  • La propiedad del histogram indica el porcentaje de usuarios que tuvieron una experiencia lenta, promedio o rápida para una métrica determinada.
  • La propiedad percentiles indica la observación del percentil 75 para una métrica determinada.

Si ve un mensaje de error que dice que no se encuentran los datos, no hay suficientes datos de rendimiento disponibles para la URL dada. Este problema suele surgir cuando prueba páginas web con poco tráfico.

4. Felicidades

¡Felicidades! Mediste los Core Web Vitals de una página web con la API de PSI y la API de CrUX.

Más información

bug_report Informar de un error