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

Ilya Grigorik

Fecha de publicación: 31 de marzo de 2014

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. Esta guía se explican los diferentes enfoques para medir el rendimiento de CRP.

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

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

Auditoría de una página con Lighthouse

Lighthouse es una herramienta de auditoría de apps web que realiza una serie de pruebas en una página determinada y, a continuación, muestra los resultados de la página en un informe consolidado. Tú puede 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.

Lee Auditoría de aplicaciones web con Lighthouse para comenzar.

Cuando ejecutas Lighthouse como una extensión de Chrome, la CRP de tu página luce similar a 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, puede capturar y registrar la ruta de acceso de representación crítica del mundo real. el rendimiento 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 las volveremos a hablar en una de las próximas lecciones.

¿Qué significan estas marcas de tiempo?

• domLoading: Esta es la marca de tiempo de inicio de todo el proceso, el El navegador está a punto de empezar a analizar los primeros bytes recibidos del HTML. .
• domInteractive: Marca el punto en el que el navegador termina de analizar todo. de la construcción del HTML y del DOM esté completa.
• 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ó la totalidad del procesamiento y se terminaron de descargar todos los recursos de la página (imágenes, etc.); en otras palabras, el indicador 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 de aplicación adicional.

La especificación HTML dicta condiciones específicas para cada evento: cuándo se debe activar, qué condiciones debe cumplir y otras consideraciones importantes. Para nuestros fines, nos centraremos en algunos eventos importantes relacionados con la ruta de acceso de representación crítica:

• domInteractive marca el momento en que el DOM está listo.
• domContentLoaded generalmente marca cuándo tanto el DOM como el CSSOM están listos.
  • Si no hay analizadores que bloqueen 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 intimidante a primera vista, pero en realidad es bastante sencillo. La Navigation Timing API captura todas las marcas de tiempo relevantes y nuestro código 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 diversas marcas de tiempo.

Dicho esto, ahora tenemos algunos hitos específicos de los que hacer un seguimiento y una función básica 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 que es una excelente manera de hacer un seguimiento del rendimiento de tus páginas y de identificar las páginas candidatas que pueden beneficiarse de un trabajo de optimización.

¿Qué pasa con las Herramientas para desarrolladores?

Aunque estos documentos a veces usan el panel de red de Herramientas para desarrolladores de Chrome para para ilustrar conceptos de CRP, Herramientas para desarrolladores no es adecuado para CRP medidas porque no tiene un mecanismo integrado para aislar en los recursos críticos. Ejecuta una auditoría de Lighthouse para ayudarte. identificar esos recursos.

Comentarios