Mide las Métricas web esenciales con la biblioteca web de vitaminas

1. Antes de comenzar

En este codelab, aprenderás a medir las Métricas web esenciales de una página web con la biblioteca de JavaScript web-vitals.

Google recomienda que mida las Métricas web esenciales y que se encuentren dentro del percentil 75 de las cargas de página segmentadas en dispositivos móviles y computadoras de escritorio.

Las Métricas web esenciales incluyen estas tres métricas, que se aplican a todas las páginas web y le proporcionan información importante sobre la experiencia del usuario:

  • Procesamiento de imagen con contenido más grande (LCP). Mide el rendimiento de carga y debería ocurrir dentro de los 2.5 segundos posteriores a la carga de la página.
  • Retraso de primera entrada (FID) Mide la interactividad y debería ocurrir dentro de los 100 milisegundos.
  • Cambio de diseño acumulado (CLS). Mide la estabilidad visual y debe estar dentro de 0.1.

Prerequisites

Actividades

  • Agrega la biblioteca web-vitals a una página web.
  • Mide las Métricas web esenciales de las Herramientas para desarrolladores de Google Chrome.
  • Opcional: Informa las Métricas web esenciales de la página web a Google Analytics.

Requisitos

  • Un editor de texto que elijas, como texto Sublime o código de Visual Studio
  • Un navegador web basado en Chromium, como Google Chrome o Microsoft Edge (para obtener más información sobre por qué necesitas un navegador web basado en Chromium, consulta Compatibilidad con navegadores)

2. Cómo agregar la biblioteca de Métricas web a una página web

  1. En el editor de texto, crea un archivo web-vitals-test.html y, luego, ingresa este código HTML en el archivo:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>

Este código crea la página web que usas en este codelab.

  1. En el elemento <body> del código HTML, después del segundo elemento <p>, ingresa la secuencia de comandos del módulo y, luego, guarda el archivo:

web-vitals-test.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

Esta secuencia de comandos del módulo carga la biblioteca web-vitals desde una red de distribución de contenidos. Ahora, su archivo tiene el siguiente aspecto:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>

Todos los navegadores modernos son compatibles con secuencias de comandos de módulos, que son una buena opción para código que solo usa API nuevas, como las necesarias para medir las Métricas web esenciales. Los navegadores que no admiten módulos o las API de Core Web Vitals no intentarán cargar esta secuencia de comandos.

3. Mide las Métricas web esenciales de las Herramientas para desarrolladores de Google Chrome

  1. En tu navegador web, abre el archivo guardado.
  2. Haz clic con el botón derecho en la página web y, luego, en Inspeccionar en el cuadro de diálogo.
  3. En el panel Herramientas para desarrolladores de Google Chrome, haz clic en la pestaña Console y selecciona Configuración de la consola 6a9a7d8992edcd2c.png > Preserve log. Esta configuración garantiza que los registros se conserven cuando actualices la página web.

74044d63a2f32916.png

  1. Haz clic en la pestaña Red y, luego, en la flecha de expansión c5262a3662ee288c.png del menú desplegable de limitación, y selecciona Lenta 3G. Esta configuración simula una conexión de red lenta.

La pestaña Network con la opción Slow 3G seleccionada en el menú desplegable Throttling.

  1. Regrese a la pestaña Console y haga clic en cualquier parte de la página web. Las métricas de LCP y FID se imprimen en la pestaña Console.

La pestaña Console después de imprimir las métricas de LCP y FID

  1. Actualiza la página web. La métrica del CLS se imprime en la pestaña Console.

La pestaña Consola después de que se imprime la métrica de CLS.

  1. Regresa a la pestaña Red y haz clic en la flecha de expansión c5262a3662ee288c.png del menú desplegable, y selecciona Velocidad 3G. Esta configuración simula una conexión de red rápida.
  2. Regrese a la pestaña Console y, luego, haga clic en cualquier parte de la página web.Las métricas de LCP y FID se imprimen en la pestaña Console nuevamente, pero mejoraron antes.

Se volverán a imprimir las métricas de LCP y FID en Console.

  1. Actualiza la página web. La métrica de CLS se vuelve a imprimir en la pestaña Console, pero mejoró desde antes.

Se vuelve a imprimir la pestaña Console después de la métrica de CLS.

4. Opcional: Denuncia las Métricas web esenciales de Google Analytics con la página web

  • En el archivo web-vitals-test.html, después de la sentencia de importación de la secuencia de comandos del módulo, ingresa esta función sendToGoogleAnalytics() y, luego, guarda el archivo:

web-vitals-test.html

function sendToGoogleAnalytics({name, delta, id}) {
  // Assumes the global `gtag()` function exists, see:
  // https://developers.google.com/analytics/devguides/collection/gtagjs
  gtag('event', name, {
    event_category: 'Web Vitals',
    // Google Analytics metrics must be integers, so the value is rounded.
    // For CLS the value is first multiplied by 1000 for greater precision
    // (note: increase the multiplier for greater precision if needed).
    value: Math.round(name === 'CLS' ? delta * 1000 : delta),
    // The `id` value will be unique to the current page load. When sending
    // multiple values from the same page (e.g. for CLS), Google Analytics can
    // compute a total by grouping on this ID (note: requires `eventLabel` to
    // be a dimension in your report).
    event_label: id,
    // Use a non-interaction event to avoid affecting bounce rate.
    non_interaction: true,
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);

Este código envía las Métricas web esenciales a Google Analytics, donde puede verlas en el informe Eventos principales:

El informe Eventos principales de Google Analytics

Ahora, su archivo tiene el siguiente aspecto:

web-vitals-test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  function sendToGoogleAnalytics({name, delta, id}) {
    // Assumes the global `gtag()` function exists, see:
    // https://developers.google.com/analytics/devguides/collection/gtagjs
    gtag('event', name, {
      event_category: 'Web Vitals',
      // Google Analytics metrics must be integers, so the value is rounded.
      // For CLS the value is first multiplied by 1000 for greater precision
      // (note: increase the multiplier for greater precision if needed).
      value: Math.round(name === 'CLS' ? delta * 1000 : delta),
      // The `id` value will be unique to the current page load. When sending
      // multiple values from the same page (e.g. for CLS), Google Analytics can
      // compute a total by grouping on this ID (note: requires `eventLabel` to
      // be a dimension in your report).
      event_label: id,
      // Use a non-interaction event to avoid affecting bounce rate.
      non_interaction: true,
    });
  }

  getCLS(sendToGoogleAnalytics);
  getFID(sendToGoogleAnalytics);
  getLCP(sendToGoogleAnalytics);
</script>
</body>
</html>

5. Felicitaciones

¡Felicitaciones! Aprendiste a medir e informar Métricas web esenciales de una página web con la biblioteca web-vitals.

Más información