Agregación de Resource Timing API de Rendimiento Frontend: Análisis de Rendimiento de Carga

En la búsqueda de ofrecer experiencias de usuario excepcionales, optimizar el rendimiento del frontend es primordial. Un aspecto crítico de esta optimización radica en comprender cómo se cargan los recursos en su sitio web o aplicación. La API de Resource Timing, parte del conjunto más amplio de la API de Performance, proporciona información detallada sobre la temporización de cada recurso recuperado por el navegador. Esta información es invaluable para identificar cuellos de botella y mejorar el rendimiento general de la carga. Esta guía completa explora cómo aprovechar la API de Resource Timing, agregar sus datos y utilizarlos para el análisis del rendimiento de la carga.

Entendiendo la API de Resource Timing

La API de Resource Timing proporciona información detallada sobre la temporización de los recursos cargados por una página web, como imágenes, scripts, hojas de estilo y otros activos. Esto incluye métricas como:

• Tipo de Iniciador (Initiator Type): El tipo de elemento que inició la solicitud (p. ej., 'img', 'script', 'link').
• Nombre (Name): La URL del recurso.
• Tiempo de Inicio (Start Time): La marca de tiempo cuando el navegador comienza a buscar el recurso.
• Inicio de la Búsqueda (Fetch Start): La marca de tiempo inmediatamente antes de que el navegador comience a buscar el recurso desde la caché del disco o la red.
• Inicio/Fin de Búsqueda de Dominio (Domain Lookup Start/End): Las marcas de tiempo que indican cuándo comienza y termina el proceso de búsqueda de DNS.
• Inicio/Fin de Conexión (Connect Start/End): Las marcas de tiempo que indican cuándo comienza y termina la conexión TCP con el servidor.
• Inicio/Fin de Solicitud (Request Start/End): Las marcas de tiempo que indican cuándo comienza y termina la solicitud HTTP.
• Inicio/Fin de Respuesta (Response Start/End): Las marcas de tiempo que indican cuándo comienza y termina la respuesta HTTP.
• Tamaño de Transferencia (Transfer Size): El tamaño del recurso transferido en bytes.
• Tamaño del Cuerpo Codificado (Encoded Body Size): El tamaño del cuerpo del recurso codificado (p. ej., comprimido con GZIP).
• Tamaño del Cuerpo Decodificado (Decoded Body Size): El tamaño del cuerpo del recurso decodificado.
• Duración (Duration): Tiempo total dedicado a buscar el recurso (responseEnd - startTime).

Estas métricas permiten a los desarrolladores identificar áreas específicas donde se pueden realizar mejoras de rendimiento. Por ejemplo, tiempos de búsqueda DNS largos podrían sugerir cambiar a un proveedor de DNS más rápido o aprovechar una CDN. Tiempos de conexión lentos podrían indicar congestión de red o problemas del lado del servidor. Tamaños de transferencia grandes podrían resaltar oportunidades para la optimización de imágenes o la minificación de código.

Accediendo a los Datos de Resource Timing

Se accede a la API de Resource Timing a través del objeto performance en JavaScript:

            const resourceTimingEntries = performance.getEntriesByType("resource");

resourceTimingEntries.forEach(entry => {
  console.log(entry.name, entry.duration);
});

            

              
                Copy
              
            
          

Este fragmento de código recupera todas las entradas de temporización de recursos y registra el nombre y la duración de cada recurso en la consola. Tenga en cuenta que, por razones de seguridad, los navegadores pueden limitar el nivel de detalle proporcionado por la API de Resource Timing. Esto a menudo se controla mediante el encabezado timingAllowOrigin, que permite que los recursos de origen cruzado expongan su información de temporización.

Agregando Datos de Resource Timing

Los datos brutos de temporización de recursos son útiles, pero para obtener información procesable, deben ser agregados y analizados. La agregación implica agrupar y resumir los datos para identificar tendencias y patrones. Esto se puede hacer de varias maneras:

Por Tipo de Recurso

Agrupar los recursos por tipo (p. ej., imágenes, scripts, hojas de estilo) le permite comparar los tiempos de carga promedio para cada categoría. Esto puede revelar si ciertos tipos de recursos son consistentemente más lentos que otros.

            const resourceTypes = {};

resourceTimingEntries.forEach(entry => {
  const initiatorType = entry.initiatorType;
  if (!resourceTypes[initiatorType]) {
    resourceTypes[initiatorType] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceTypes[initiatorType].count++;
  resourceTypes[initiatorType].totalDuration += entry.duration;
});

for (const type in resourceTypes) {
  resourceTypes[type].averageDuration = resourceTypes[type].totalDuration / resourceTypes[type].count;
  console.log(type, resourceTypes[type].averageDuration);
}

            

              
                Copy
              
            
          

Este código calcula el tiempo de carga promedio para cada tipo de recurso y lo registra en la consola. Por ejemplo, podría descubrir que las imágenes tienen un tiempo de carga promedio significativamente mayor que los scripts, lo que indica la necesidad de optimizar las imágenes.

Por Dominio

Agrupar los recursos por dominio le permite evaluar el rendimiento de diferentes redes de entrega de contenido (CDNs) o servicios de terceros. Esto puede ayudarle a identificar dominios de bajo rendimiento y considerar proveedores alternativos.

            const resourceDomains = {};

resourceTimingEntries.forEach(entry => {
  const domain = new URL(entry.name).hostname;
  if (!resourceDomains[domain]) {
    resourceDomains[domain] = {
      count: 0,
      totalDuration: 0,
      averageDuration: 0
    };
  }
  resourceDomains[domain].count++;
  resourceDomains[domain].totalDuration += entry.duration;
});

for (const domain in resourceDomains) {
  resourceDomains[domain].averageDuration = resourceDomains[domain].totalDuration / resourceDomains[domain].count;
  console.log(domain, resourceDomains[domain].averageDuration);
}

            

              
                Copy
              
            
          

Este código calcula el tiempo de carga promedio para cada dominio y lo registra en la consola. Si nota que una CDN en particular es consistentemente lenta, es posible que desee investigar su rendimiento o cambiar a un proveedor diferente. Por ejemplo, considere un escenario en el que utiliza tanto Cloudflare como Akamai. Esta agregación le permitiría comparar directamente su rendimiento en su contexto específico.

Por Página

Agregar datos por página (o ruta) le permite identificar páginas con un rendimiento particularmente bajo. Esto puede ayudarle a priorizar los esfuerzos de optimización y centrarse en las páginas que tienen el mayor impacto en la experiencia del usuario.

Esto a menudo requiere la integración con el sistema de enrutamiento de su aplicación. Necesitaría asociar cada entrada de temporización de recursos con la URL o ruta de la página actual. La implementación variaría según el framework que esté utilizando (p. ej., React, Angular, Vue.js).

Creando Métricas Personalizadas

Más allá de las métricas estándar proporcionadas por la API de Resource Timing, puede crear métricas personalizadas para rastrear aspectos específicos del rendimiento de su aplicación. Por ejemplo, es posible que desee medir el tiempo que se tarda en cargar un componente en particular o renderizar un elemento específico.

Esto se puede lograr utilizando los métodos performance.mark() y performance.measure():

            performance.mark('component-start');

// Load the component

performance.mark('component-end');

performance.measure('component-load', 'component-start', 'component-end');

const componentLoadTime = performance.getEntriesByName('component-load')[0].duration;

console.log('Component load time:', componentLoadTime);

            

              
                Copy
              
            
          

Este fragmento de código mide el tiempo que se tarda en cargar un componente y lo registra en la consola. Luego, puede agregar estas métricas personalizadas de la misma manera que las métricas estándar de la API de Resource Timing.

Analizando Datos de Resource Timing para Obtener Perspectivas de Rendimiento

Una vez que haya agregado los datos de temporización de recursos, puede utilizarlos para identificar áreas específicas de mejora del rendimiento. Aquí hay algunos escenarios comunes y posibles soluciones:

Tiempos de Búsqueda DNS Largos

• Causa: Servidor DNS lento, servidor DNS distante, búsquedas de DNS poco frecuentes.
• Solución: Cambiar a un proveedor de DNS más rápido (p. ej., Cloudflare, Google Public DNS), aprovechar una CDN para almacenar en caché los registros DNS más cerca de los usuarios, implementar la precarga de DNS.
• Ejemplo: Un sitio web dirigido a usuarios de todo el mundo experimentó tiempos de carga lentos en ciertas regiones. El análisis de los datos de temporización de recursos reveló largos tiempos de búsqueda de DNS en esas regiones. Cambiar a una CDN con servidores DNS globales redujo significativamente los tiempos de búsqueda de DNS y mejoró el rendimiento general.

Tiempos de Conexión Lentos

• Causa: Congestión de la red, problemas del lado del servidor, interferencia del firewall.
• Solución: Optimizar la infraestructura del servidor, usar una CDN para distribuir contenido más cerca de los usuarios, configurar firewalls para permitir una comunicación eficiente.
• Ejemplo: Un sitio web de comercio electrónico experimentó tiempos de conexión lentos durante las horas pico de compras. El análisis de los datos de temporización de recursos señaló la sobrecarga del servidor como la causa principal. La actualización del hardware del servidor y la optimización de las consultas a la base de datos mejoraron los tiempos de conexión y evitaron la degradación del rendimiento durante el tráfico pico.

Tamaños de Transferencia Grandes

• Causa: Imágenes no optimizadas, código no minificado, activos innecesarios.
• Solución: Optimizar imágenes (p. ej., comprimir, cambiar el tamaño, usar formatos modernos como WebP), minificar el código JavaScript y CSS, eliminar código y activos no utilizados, habilitar la compresión GZIP o Brotli.
• Ejemplo: Un sitio web de noticias utilizaba imágenes grandes y no optimizadas que aumentaban significativamente los tiempos de carga de la página. La optimización de imágenes con herramientas como ImageOptim y la implementación de la carga diferida (lazy loading) redujeron los tamaños de transferencia de imágenes y mejoraron el rendimiento de carga de la página.
• Consideración de Internacionalización: Asegúrese de que la optimización de imágenes considere diferentes tamaños de pantalla y resoluciones comunes en diversas regiones.

Tiempos de Respuesta del Servidor Lentos

• Causa: Código ineficiente del lado del servidor, cuellos de botella en la base de datos, latencia de la red.
• Solución: Optimizar el código del lado del servidor, mejorar el rendimiento de la base de datos, usar una CDN para almacenar en caché el contenido más cerca de los usuarios, implementar el almacenamiento en caché HTTP.
• Ejemplo: Una plataforma de redes sociales experimentó tiempos de respuesta lentos del servidor debido a consultas ineficientes a la base de datos. La optimización de las consultas a la base de datos y la implementación de mecanismos de almacenamiento en caché redujeron significativamente los tiempos de respuesta del servidor y mejoraron el rendimiento general.

Recursos que Bloquean el Renderizado

• Causa: JavaScript y CSS síncronos que bloquean el renderizado de la página.
• Solución: Aplazar la carga de JavaScript no crítico, insertar el CSS crítico en línea (inline), usar la carga asíncrona para los scripts, eliminar el CSS no utilizado.
• Ejemplo: Un sitio de blogs utilizaba un archivo CSS grande que bloqueaba el renderizado, lo que retrasaba la representación inicial de la página. Insertar el CSS crítico en línea y aplazar la carga del CSS no crítico mejoró el rendimiento percibido del sitio web.

Integrando Datos de Resource Timing en Herramientas de Monitoreo de Rendimiento

La recopilación y el análisis manual de los datos de temporización de recursos pueden consumir mucho tiempo. Afortunadamente, varias herramientas de monitoreo de rendimiento pueden automatizar este proceso y proporcionar información en tiempo real sobre el rendimiento de su sitio web. Estas herramientas suelen recopilar datos de temporización de recursos en segundo plano y los presentan en un panel de control fácil de usar.

Las herramientas populares de monitoreo de rendimiento que admiten datos de temporización de recursos incluyen:

• Google PageSpeed Insights: Proporciona recomendaciones para mejorar la velocidad de la página basadas en diversas métricas de rendimiento, incluidos los datos de temporización de recursos.
• WebPageTest: Le permite probar el rendimiento de su sitio web desde diferentes ubicaciones y navegadores, proporcionando información detallada sobre la temporización de recursos.
• New Relic: Ofrece capacidades integrales de monitoreo de rendimiento, incluidos datos y visualizaciones de temporización de recursos en tiempo real.
• Datadog: Proporciona métricas detalladas de temporización de recursos junto con un monitoreo más amplio de la infraestructura y la aplicación, ofreciendo una visión holística del rendimiento.
• Sentry: Enfocado principalmente en el seguimiento de errores, Sentry también proporciona funciones de monitoreo de rendimiento, incluidos datos de temporización de recursos para correlacionar problemas de rendimiento con errores específicos.
• Lighthouse: Una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. Realiza auditorías de rendimiento, accesibilidad, aplicaciones web progresivas, SEO y más. Se puede ejecutar desde las herramientas para desarrolladores de Chrome, desde la línea de comandos o como un módulo de Node.

Al integrar los datos de temporización de recursos en estas herramientas, puede obtener una comprensión más profunda del rendimiento de su sitio web e identificar áreas de mejora de manera más efectiva.

Consideraciones Éticas y Privacidad del Usuario

Al recopilar y analizar datos de temporización de recursos, es crucial considerar las implicaciones éticas y la privacidad del usuario. Sea transparente con los usuarios sobre los datos que recopila y cómo se utilizan. Asegúrese de cumplir con las regulaciones de privacidad pertinentes, como el GDPR y la CCPA.

Evite recopilar información de identificación personal (PII) y anonimice o seudonimice los datos siempre que sea posible. Implemente medidas de seguridad adecuadas para proteger los datos contra el acceso o la divulgación no autorizados. Considere ofrecer a los usuarios la opción de no participar en el monitoreo de rendimiento.

Técnicas Avanzadas y Tendencias Futuras

La API de Resource Timing está en constante evolución, y están surgiendo nuevas características y técnicas para mejorar aún más el análisis del rendimiento del frontend. Aquí hay algunas técnicas avanzadas y tendencias futuras a las que prestar atención:

API de Server Timing

La API de Server Timing permite a los servidores exponer información de temporización sobre su tiempo de procesamiento para una solicitud. Esta información se puede combinar con los datos de temporización de recursos para proporcionar una imagen más completa del rendimiento de extremo a extremo.

API de Long Tasks

La API de Long Tasks identifica tareas que bloquean el hilo principal durante períodos prolongados, causando problemas de fluidez en la interfaz de usuario (UI jank) y de capacidad de respuesta. Esta información se puede utilizar para optimizar el código JavaScript y mejorar la experiencia del usuario.

WebAssembly (Wasm)

WebAssembly es un formato de instrucción binaria para máquinas virtuales que permite un rendimiento casi nativo en el navegador. El uso de Wasm para tareas críticas de rendimiento puede mejorar significativamente los tiempos de carga y el rendimiento general.

HTTP/3

HTTP/3 es la última versión del protocolo HTTP, que utiliza el protocolo de transporte QUIC para proporcionar un rendimiento y una fiabilidad mejorados. HTTP/3 ofrece varias ventajas sobre HTTP/2, incluida una latencia reducida y una mejor gestión de la conexión.

Conclusión

La API de Resource Timing es una herramienta poderosa para comprender y optimizar el rendimiento del frontend. Al agregar y analizar los datos de temporización de recursos, puede identificar cuellos de botella, mejorar los tiempos de carga y ofrecer una mejor experiencia de usuario. Ya sea que sea un desarrollador de frontend experimentado o esté comenzando, dominar la API de Resource Timing es esencial para crear aplicaciones web de alto rendimiento. Adopte el poder de la optimización basada en datos y desbloquee todo el potencial de su sitio web o aplicación. Recuerde priorizar la privacidad del usuario y las consideraciones éticas al recopilar y analizar datos de rendimiento. Manteniéndose informado sobre las últimas tendencias y técnicas, puede asegurarse de que su sitio web siga siendo rápido, receptivo y fácil de usar en los años venideros. Aprovechar estas técnicas y herramientas contribuirá a una web más eficiente y accesible a nivel mundial.

Consejo Práctico: Comience implementando la agregación básica de temporización de recursos por tipo de recurso y dominio. Esto proporciona información inmediata sobre dónde se encuentran sus cuellos de botella de rendimiento. Luego, integre con una herramienta de monitoreo de rendimiento como Google PageSpeed Insights o WebPageTest para automatizar la recopilación y el análisis de datos.