Mide las métricas web esenciales con las APIs de PageSpeed Insights y Chrome UX Report (CrUX)

1. Antes de comenzar

En este codelab, aprenderás a medir las métricas web esenciales de una página web con las APIs de PageSpeed Insights y CrUX.

Ambas APIs devuelven datos idénticos de las Métricas web esenciales, pero cada una ofrece beneficios distintos. Además de los datos de CrUX obtenidos en el campo, la API de PageSpeed Insights también proporciona datos de Lighthouse, 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 midas las Core Web Vitals en dispositivos móviles y computadoras. Las Métricas web esenciales incluyen estas tres métricas, que se aplican a todas las páginas web y te brindan información fundamental sobre la experiencia del usuario:

  • Largest Contentful Paint (LCP): Mide el rendimiento de carga y debe ocurrir dentro de los 2.5 segundos posteriores al inicio de la carga de la página.
  • Retraso de primera entrada (FID). Mide la interactividad y debe ocurrir en un plazo de 100 milisegundos.
  • Cambio de diseño acumulado (CLS): Mide la estabilidad visual y debe estar dentro de 0.1.

Requisitos previos

Qué aprenderás

  • Mide las Métricas web esenciales de una página web con la API de PageSpeed Insights.
  • Mide las métricas web esenciales de una página web con la API de CrUX.

Requisitos

  • Una Cuenta de Google
  • Acceso a una línea de comandos
  • El editor de texto que prefieras
  • El navegador web de tu elección
  • Una URL de tu elección (este codelab usa https://developers.google.com).

2. Mide las Métricas web esenciales con la API de PageSpeed Insights

  1. Si necesitas los datos de rendimiento de la versión para computadoras de una URL, solicita los datos a la API de PageSpeed Insights y guárdalos en un archivo response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"

Reemplaza el marcador de posición YOUR_URL por tu URL.

Al final de la cadena de la API, observa que el parámetro de consulta strategy está establecido en un valor desktop, que especifica la solicitud de datos para computadoras.

  1. Si necesitas los datos de rendimiento de la versión para dispositivos móviles de una URL, solicita los datos a la API de PageSpeed Insights y guárdalos en un archivo response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"

Reemplaza el marcador de posición YOUR_URL por tu URL.

Al final de la cadena de la API, observa que el parámetro de consulta strategy está establecido en un valor mobile, que especifica la solicitud de datos móviles.

  1. En tu editor de texto, abre el archivo response.txt y, luego, busca la propiedad 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 propiedad loadingExperience informa esta información para cada una de las Métricas web esenciales según la URL y el tipo de dispositivo indicados en la solicitud de la API:

  • La propiedad percentile indica el percentil 75 para cada métrica.
  • La propiedad distributions indica el porcentaje de vistas de página que tuvieron una experiencia buena, necesita mejoras o mala para cada métrica.
  • La propiedad 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. Por lo general, este problema surge cuando pruebas páginas web con poco tráfico.

  1. Busca la propiedad 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 propiedad originLoadingExperience informa las experiencias agregadas para todo el origen, en lugar de solo la URL. Proporciona la misma información para cada una de las métricas web esenciales, como se explicó en el paso anterior.

3. Mide las Métricas web esenciales con la API de CrUX

Obtén una clave de API

  1. En la consola de Google Cloud, busca Chrome UX y, luego, selecciona API de Chrome UX Report en el menú desplegable.
  2. En la página de la API de Chrome UX Report, haz clic en Habilitar y, luego, espera a que el botón Habilitar cambie a un botón Administrar y selecciona Administrar.
  3. En el menú de navegación, haz clic en Credenciales y, luego, selecciona Crear credenciales > Clave de API y copia la clave de API.

Cómo hacer una solicitud

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

Reemplaza el marcador de posición YOUR_API_KEY por tu clave de API y, luego, reemplaza el marcador de posición YOUR_URL por tu URL.

  1. En tu editor de texto, abre el archivo 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 respuesta de la API de CrUX proporciona esta información para cada una de las Métricas web esenciales:

  • La propiedad 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 ves un mensaje de error que indica que no se encontraron los datos, significa que no hay suficientes datos de rendimiento disponibles para la URL determinada. Por lo general, este problema surge cuando pruebas páginas web con poco tráfico.

4. Felicitaciones

¡Felicitaciones! Mediste las métricas web esenciales de una página web con las APIs de PageSpeed Insights y CrUX.

Más información