Agrégation de l'API Resource Timing pour la Performance Frontend : Analyse des Performances de Chargement

Dans la quête d'une expérience utilisateur exceptionnelle, l'optimisation de la performance frontend est primordiale. Un aspect critique de cette optimisation réside dans la compréhension de la manière dont les ressources se chargent sur votre site web ou application. L'API Resource Timing, qui fait partie de la suite plus large des API de Performance, fournit des informations détaillées sur la synchronisation de chaque ressource récupérée par le navigateur. Cette information est inestimable pour identifier les goulots d'étranglement et améliorer la performance globale de chargement. Ce guide complet explore comment exploiter l'API Resource Timing, agréger ses données et les utiliser pour l'analyse des performances de chargement.

Comprendre l'API Resource Timing

L'API Resource Timing fournit des informations de synchronisation détaillées pour les ressources chargées par une page web, telles que les images, les scripts, les feuilles de style et d'autres actifs. Cela inclut des métriques comme :

• Type d'initiateur : Le type d'élément qui a initié la requête (ex: 'img', 'script', 'link').
• Nom : L'URL de la ressource.
• Heure de début : L'horodatage auquel le navigateur commence à récupérer la ressource.
• Début de la récupération (Fetch Start) : L'horodatage juste avant que le navigateur ne commence à récupérer la ressource depuis le cache disque ou le réseau.
• Début/Fin de la recherche de domaine : Les horodatages indiquant quand le processus de recherche DNS commence et se termine.
• Début/Fin de la connexion : Les horodatages indiquant quand la connexion TCP au serveur commence et se termine.
• Début/Fin de la requête : Les horodatages indiquant quand la requête HTTP commence и se termine.
• Début/Fin de la réponse : Les horodatages indiquant quand la réponse HTTP commence et se termine.
• Taille du transfert : La taille de la ressource transférée en octets.
• Taille du corps encodé : La taille du corps de la ressource encodée (ex. compressée en GZIP).
• Taille du corps décodé : La taille du corps de la ressource décodée.
• Durée : Temps total passé à récupérer la ressource (responseEnd - startTime).

Ces métriques permettent aux développeurs d'identifier les domaines spécifiques où des améliorations de performance peuvent être apportées. Par exemple, des temps de recherche DNS longs pourraient suggérer de passer à un fournisseur DNS plus rapide ou d'utiliser un CDN. Des temps de connexion lents pourraient indiquer une congestion du réseau ou des problèmes côté serveur. Des tailles de transfert importantes pourraient mettre en évidence des opportunités d'optimisation d'images ou de minification du code.

Accéder aux données de Resource Timing

L'API Resource Timing est accessible via l'objet performance en JavaScript :

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

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

            

              
                Copy
              
            
          

Cet extrait de code récupère toutes les entrées de resource timing et consigne le nom et la durée de chaque ressource dans la console. Notez que, pour des raisons de sécurité, les navigateurs peuvent limiter le niveau de détail fourni par l'API Resource Timing. Ceci est souvent contrôlé par l'en-tête timingAllowOrigin, qui permet aux ressources d'origine croisée d'exposer leurs informations de synchronisation.

Agréger les données de Resource Timing

Les données brutes de resource timing sont utiles, mais pour obtenir des informations exploitables, elles doivent être agrégées et analysées. L'agrégation consiste à regrouper et à résumer les données pour identifier les tendances et les modèles. Cela peut être fait de plusieurs manières :

Par type de ressource

Regrouper les ressources par type (ex: images, scripts, feuilles de style) vous permet de comparer les temps de chargement moyens pour chaque catégorie. Cela peut révéler si certains types de ressources sont constamment plus lents que d'autres.

            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
              
            
          

Ce code calcule le temps de chargement moyen pour chaque type de ressource et le consigne dans la console. Par exemple, vous pourriez constater que les images ont un temps de chargement moyen significativement plus élevé que les scripts, indiquant un besoin d'optimisation des images.

Par domaine

Regrouper les ressources par domaine vous permet d'évaluer la performance de différents réseaux de diffusion de contenu (CDN) ou services tiers. Cela peut vous aider à identifier les domaines peu performants et à envisager des fournisseurs alternatifs.

            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
              
            
          

Ce code calcule le temps de chargement moyen pour chaque domaine et le consigne dans la console. Si vous remarquez qu'un CDN particulier est constamment lent, vous pourriez vouloir enquêter sur ses performances ou passer à un autre fournisseur. Par exemple, imaginez un scénario où vous utilisez à la fois Cloudflare et Akamai. Cette agrégation vous permettrait de comparer directement leurs performances dans votre contexte spécifique.

Par page

Agréger les données par page (ou route) vous permet d'identifier les pages aux performances particulièrement médiocres. Cela peut vous aider à prioriser les efforts d'optimisation et à vous concentrer sur les pages qui ont le plus grand impact sur l'expérience utilisateur.

Cela nécessite souvent une intégration avec le système de routage de votre application. Vous auriez besoin d'associer chaque entrée de resource timing avec l'URL ou la route de la page actuelle. L'implémentation varierait en fonction du framework que vous utilisez (ex: React, Angular, Vue.js).

Créer des métriques personnalisées

Au-delà des métriques standard fournies par l'API Resource Timing, vous pouvez créer des métriques personnalisées pour suivre des aspects spécifiques de la performance de votre application. Par exemple, vous pourriez vouloir mesurer le temps nécessaire pour charger un composant particulier ou pour rendre un élément spécifique.

Cela peut être réalisé en utilisant les méthodes performance.mark() et performance.measure() :

            performance.mark('component-start');

// Charger le composant

performance.mark('component-end');

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

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

console.log('Temps de chargement du composant :', componentLoadTime);

            

              
                Copy
              
            
          

Cet extrait de code mesure le temps nécessaire pour charger un composant et le consigne dans la console. Vous pouvez ensuite agréger ces métriques personnalisées de la même manière que les métriques standard de l'API Resource Timing.

Analyser les données de Resource Timing pour des aperçus de performance

Une fois que vous avez agrégé les données de resource timing, vous pouvez les utiliser pour identifier des domaines spécifiques d'amélioration de la performance. Voici quelques scénarios courants et solutions potentielles :

Temps de recherche DNS longs

• Cause : Serveur DNS lent, serveur DNS distant, recherches DNS peu fréquentes.
• Solution : Passer à un fournisseur DNS plus rapide (ex: Cloudflare, Google Public DNS), utiliser un CDN pour mettre en cache les enregistrements DNS plus près des utilisateurs, implémenter le préchargement DNS (DNS prefetching).
• Exemple : Un site web ciblant des utilisateurs dans le monde entier a connu des temps de chargement lents dans certaines régions. L'analyse des données de resource timing a révélé de longs temps de recherche DNS dans ces régions. Le passage à un CDN avec des serveurs DNS mondiaux a considérablement réduit les temps de recherche DNS et amélioré la performance globale.

Temps de connexion lents

• Cause : Congestion du réseau, problèmes côté serveur, interférence du pare-feu.
• Solution : Optimiser l'infrastructure du serveur, utiliser un CDN pour distribuer le contenu plus près des utilisateurs, configurer les pare-feu pour permettre une communication efficace.
• Exemple : Un site de e-commerce a connu des temps de connexion lents pendant les heures de pointe. L'analyse des données de resource timing a identifié la surcharge du serveur comme cause principale. La mise à niveau du matériel serveur et l'optimisation des requêtes de base de données ont amélioré les temps de connexion et évité la dégradation des performances pendant les pics de trafic.

Tailles de transfert importantes

• Cause : Images non optimisées, code non minifié, actifs inutiles.
• Solution : Optimiser les images (ex: compresser, redimensionner, utiliser des formats modernes comme WebP), minifier le code JavaScript et CSS, supprimer le code et les actifs inutilisés, activer la compression GZIP ou Brotli.
• Exemple : Un site d'actualités utilisait de grandes images non optimisées qui augmentaient considérablement les temps de chargement des pages. L'optimisation des images avec des outils comme ImageOptim et l'implémentation du chargement différé (lazy loading) ont réduit les tailles de transfert des images et amélioré les performances de chargement des pages.
• Considération sur l'internationalisation : Assurez-vous que l'optimisation des images prend en compte les différentes tailles d'écran et résolutions courantes dans diverses régions.

Temps de réponse du serveur lents

• Cause : Code côté serveur inefficace, goulots d'étranglement de la base de données, latence du réseau.
• Solution : Optimiser le code côté serveur, améliorer les performances de la base de données, utiliser un CDN pour mettre en cache le contenu plus près des utilisateurs, implémenter la mise en cache HTTP.
• Exemple : Une plateforme de médias sociaux a connu des temps de réponse du serveur lents en raison de requêtes de base de données inefficaces. L'optimisation des requêtes de base de données et la mise en place de mécanismes de cache ont considérablement réduit les temps de réponse du serveur et amélioré la performance globale.

Ressources bloquant le rendu

• Cause : JavaScript et CSS synchrones qui bloquent le rendu de la page.
• Solution : Différer le chargement du JavaScript non critique, intégrer le CSS critique (inlining), utiliser le chargement asynchrone pour les scripts, éliminer le CSS inutilisé.
• Exemple : Un blog utilisait un grand fichier CSS bloquant le rendu qui retardait le rendu initial de la page. L'intégration du CSS critique et le report du chargement du CSS non critique ont amélioré la performance perçue du site web.

Intégrer les données de Resource Timing dans les outils de surveillance de la performance

La collecte et l'analyse manuelles des données de resource timing peuvent être chronophages. Heureusement, plusieurs outils de surveillance de la performance peuvent automatiser ce processus et fournir des informations en temps réel sur les performances de votre site web. Ces outils collectent généralement les données de resource timing en arrière-plan et les présentent dans un tableau de bord convivial.

Les outils de surveillance de la performance populaires qui prennent en charge les données de resource timing incluent :

• Google PageSpeed Insights : Fournit des recommandations pour améliorer la vitesse des pages en se basant sur diverses métriques de performance, y compris les données de resource timing.
• WebPageTest : Vous permet de tester les performances de votre site web depuis différents endroits et navigateurs, en fournissant des informations détaillées sur le resource timing.
• New Relic : Offre des capacités complètes de surveillance de la performance, y compris des données et des visualisations de resource timing en temps réel.
• Datadog : Fournit des métriques détaillées de resource timing ainsi qu'une surveillance plus large de l'infrastructure et des applications, offrant une vue holistique de la performance.
• Sentry : Principalement axé sur le suivi des erreurs, Sentry fournit également des fonctionnalités de surveillance de la performance, y compris des données de resource timing pour corréler les problèmes de performance avec des erreurs spécifiques.
• Lighthouse : Un outil open-source et automatisé pour améliorer la qualité des pages web. Il propose des audits pour la performance, l'accessibilité, les applications web progressives, le SEO et plus encore. Il peut être exécuté depuis les Chrome DevTools, en ligne de commande, ou comme un module Node.

En intégrant les données de resource timing dans ces outils, vous pouvez acquérir une compréhension plus profonde des performances de votre site web et identifier plus efficacement les domaines à améliorer.

Considérations éthiques et confidentialité des utilisateurs

Lors de la collecte et de l'analyse des données de resource timing, il est crucial de prendre en compte les implications éthiques et la confidentialité des utilisateurs. Soyez transparent avec les utilisateurs sur les données que vous collectez et comment elles sont utilisées. Assurez-vous de respecter les réglementations pertinentes en matière de confidentialité, telles que le RGPD et le CCPA.

Évitez de collecter des informations personnellement identifiables (IPI) et anonymisez ou pseudonymisez les données lorsque cela est possible. Mettez en œuvre des mesures de sécurité appropriées pour protéger les données contre tout accès ou divulgation non autorisés. Envisagez d'offrir aux utilisateurs la possibilité de se désinscrire de la surveillance de la performance.

Techniques avancées et tendances futures

L'API Resource Timing est en constante évolution, et de nouvelles fonctionnalités et techniques émergent pour améliorer encore l'analyse de la performance frontend. Voici quelques techniques avancées et tendances futures à surveiller :

API Server Timing

L'API Server Timing permet aux serveurs d'exposer des informations de synchronisation sur leur temps de traitement pour une requête. Ces informations могут être combinées avec les données de resource timing pour fournir une image plus complète de la performance de bout en bout.

API Long Tasks

L'API Long Tasks identifie les tâches qui bloquent le thread principal pendant des périodes prolongées, causant des saccades de l'interface utilisateur (UI jank) et des problèmes de réactivité. Ces informations могут être utilisées pour optimiser le code JavaScript et améliorer l'expérience utilisateur.

WebAssembly (Wasm)

WebAssembly est un format d'instruction binaire pour les machines virtuelles qui permet des performances quasi natives dans le navigateur. L'utilisation de Wasm pour les tâches critiques en termes de performance peut améliorer considérablement les temps de chargement et la performance globale.

HTTP/3

HTTP/3 est la dernière version du protocole HTTP, qui utilise le protocole de transport QUIC pour offrir une performance et une fiabilité améliorées. HTTP/3 offre plusieurs avantages par rapport à HTTP/2, notamment une latence réduite et une meilleure gestion des connexions.

Conclusion

L'API Resource Timing est un outil puissant pour comprendre et optimiser la performance frontend. En agrégeant et en analysant les données de resource timing, vous pouvez identifier les goulots d'étranglement, améliorer les temps de chargement et offrir une meilleure expérience utilisateur. Que vous soyez un développeur frontend chevronné ou débutant, la maîtrise de l'API Resource Timing est essentielle pour construire des applications web performantes. Adoptez la puissance de l'optimisation basée sur les données et libérez tout le potentiel de votre site web ou application. N'oubliez pas de prioriser la confidentialité des utilisateurs et les considérations éthiques lors de la collecte et de l'analyse des données de performance. En restant informé des dernières tendances et techniques, vous pouvez vous assurer que votre site web reste rapide, réactif et convivial pour les années à venir. L'exploitation de ces techniques et outils contribuera à un web plus performant et accessible à l'échelle mondiale.

Information exploitable : Commencez par implémenter une agrégation de base du resource timing par type de ressource et par domaine. Cela fournit des informations immédiates sur l'emplacement de vos goulots d'étranglement de performance. Ensuite, intégrez un outil de surveillance de la performance comme Google PageSpeed Insights ou WebPageTest pour automatiser la collecte et l'analyse des données.