Medición de la ruta de representación crítica

Ilya Grigorik

La base de toda estrategia de rendimiento sólida es una buena medición e instrumentación. No se puede optimizar lo que no se puede medir. En este documento, se explican los diferentes enfoques para medir el rendimiento de CRP.

• El enfoque Lighthouse ejecuta una serie de pruebas automatizadas en una página y, luego, genera un informe sobre el rendimiento de CRP de la página. Este enfoque proporciona una descripción general rápida y fácil de alto nivel del rendimiento de CRP de una página en particular cargada en el navegador, lo que te permite probar, iterar y mejorar su rendimiento con rapidez.
• El enfoque de la API de Navigation Timing captura las métricas de supervisión de usuario real (RUM). Como su nombre lo indica, estas métricas se capturan de las interacciones reales de los usuarios con tu sitio y proporcionan una visión precisa del rendimiento de CRP en el mundo real, tal como lo experimentan los usuarios en una variedad de dispositivos y condiciones de red.

En general, un buen enfoque es usar Lighthouse para identificar oportunidades obvias de optimización de CRP y, luego, instrumentar tu código con la API de Navigation Timing para supervisar el rendimiento de tu app en el mundo real.

Cómo auditar una página con Lighthouse

Lighthouse es una herramienta de auditoría de apps web que ejecuta una serie de pruebas en una página determinada y, luego, muestra los resultados de la página en un informe consolidado. Puedes ejecutar Lighthouse como una extensión de Chrome o un módulo de NPM, que es útil para integrar Lighthouse con sistemas de integración continua.

Consulta Auditoría de apps web con Lighthouse para comenzar.

Cuando ejecutas Lighthouse como una extensión de Chrome, los resultados de CRP de tu página se ven como en la siguiente captura de pantalla.

Consulta Cadenas de solicitudes críticas para obtener más información sobre los resultados de esta auditoría.

Instrumenta tu código con la API de Navigation Timing

La combinación de la API de Navigation Timing y otros eventos del navegador emitidos mientras se carga la página te permite capturar y registrar el rendimiento real de CRP de cualquier página.

Cada una de las etiquetas del diagrama anterior corresponde a una marca de tiempo de alta resolución que el navegador rastrea para cada una de las páginas que carga. De hecho, en este caso específico solo mostramos una fracción de todas las marcas de tiempo diferentes. Por ahora, omitiremos todas las marcas de tiempo relacionadas con la red, pero regresaremos a ellas en una lección futura.

¿Qué significan estas marcas de tiempo?

• domLoading: Esta es la marca de tiempo inicial de todo el proceso. El navegador está a punto de comenzar a analizar los primeros bytes recibidos del documento HTML.
• domInteractive: Marca el punto en el que el navegador termina de analizar todo el HTML y se completa la construcción del DOM.
• domContentLoaded: Marca el punto en el que el DOM está listo y no hay hojas de estilo que bloqueen la ejecución de JavaScript, lo que significa que ahora (posiblemente) podemos construir el árbol de renderización.
  • Muchos frameworks de JavaScript esperan este evento antes de comenzar a ejecutar su propia lógica. Por este motivo, el navegador captura las marcas de tiempo EventStart y EventEnd para permitirnos hacer un seguimiento del tiempo que tardó esta ejecución.
• domComplete: Como su nombre lo indica, se completó todo el procesamiento y se terminaron de descargar todos los recursos de la página (imágenes, etc.). Es decir, el ícono giratorio de carga dejó de girar.
• loadEvent: Como paso final en cada carga de página, el navegador activa un evento onload que puede activar lógica adicional de la aplicación.

La especificación HTML dicta condiciones específicas para cada uno de los eventos: cuándo se debe activar, qué condiciones deben cumplirse, etc. Para nuestros fines, nos centraremos en algunos eventos importantes relacionados con la ruta de acceso de renderización crítica:

• domInteractive marca cuando el DOM está listo.
• domContentLoaded suele marcar cuando están listos el DOM y el CSSOM.
  • Si no hay ningún analizador que bloquee JavaScript, DOMContentLoaded se activará inmediatamente después de domInteractive.
• domComplete marca el momento en que la página y todos sus subrecursos están listos.

<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
    <script>
      function measureCRP() {
        var t = window.performance.timing,
          interactive = t.domInteractive - t.domLoading,
          dcl = t.domContentLoadedEventStart - t.domLoading,
          complete = t.domComplete - t.domLoading;
        var stats = document.createElement('p');
        stats.textContent =
          'interactive: ' +
          interactive +
          'ms, ' +
          'dcl: ' +
          dcl +
          'ms, complete: ' +
          complete +
          'ms';
        document.body.appendChild(stats);
      }
    </script>
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

Probar

El ejemplo anterior puede parecer un poco abrumador a primera vista, pero en realidad es bastante simple. La API de Navigation Timing captura todas las marcas de tiempo relevantes, y nuestro código simplemente espera a que se active el evento onload (recuerda que el evento onload se activa después de domInteractive, domContentLoaded y domComplete) y calcula la diferencia entre las distintas marcas de tiempo.

Dicho todo esto, ahora tenemos algunos hitos específicos para realizar un seguimiento y una función simple para obtener estas mediciones. Ten en cuenta que, en lugar de imprimir estas métricas en la página, también puedes modificar el código para enviarlas a un servidor de estadísticas (Google Analytics lo hace automáticamente), lo cual es una excelente manera de supervisar el rendimiento de tus páginas y de identificar las páginas candidatas que pueden beneficiarse de algunos trabajos de optimización.

¿Qué sucede con las Herramientas para desarrolladores?

Aunque estos documentos a veces usan el panel de red de Herramientas para desarrolladores de Chrome para ilustrar conceptos de CRP, por el momento, no es adecuado para las mediciones de CRP, ya que no tiene un mecanismo integrado que aísle recursos críticos. Ejecutar una auditoría de Lighthouse para ayudar a identificar esos recursos

Comentarios