Introduction
Une application Web rapide est une application Web réussie. Votre travail en tant que développeur n'est pas terminé tant que vous n'avez pas optimisé les performances réelles et perçues de votre application. Il ne s'agit pas seulement de la bonne chose à faire pour garantir une excellente expérience à vos utilisateurs, mais il existe des raisons commerciales très pratiques et importantes pour optimiser votre application. Amazon a enregistré une baisse de 1% des ventes pour chaque 100 ms de latence du site, et Google une baisse de 20% du trafic pour chaque demi-seconde de retard (citation). Ce sont des chiffres réels qui ont des conséquences réelles sur votre entreprise et votre application Web.
La vitesse du Web est si importante que Google consacre même un effort entier à accélérer le Web. Si vous avez besoin d'une autre raison d'optimiser les performances de votre application, sachez que Google a annoncé avoir ajouté la vitesse de la page à son algorithme de classement.
De nombreuses bonnes pratiques ont été publiées pour optimiser les performances de votre application Web, y compris deux excellents livres (High Performance Web Sites et Even Faster Web Sites). Les techniques sur le serveur (implémentation des en-têtes de contrôle de cache appropriés) et sur le client (fourniture des attributs de largeur et de hauteur de l'image) sont combinées dans une stratégie de bout en bout pour optimiser les performances. Avec autant de conseils et d'astuces, il est parfois difficile de déterminer comment ils se traduisent dans la réalité et dans votre application Web.
Heureusement, les Outils pour les développeurs Chrome (inclus dans chaque instance de Chrome) constituent un excellent outil qui inspecte votre application Web et propose des recommandations personnalisées pour améliorer les performances et réduire la latence. Cet article présente le panneau "Audits", dont le champ d'application est similaire à celui de l'outil très populaire YSlow. Il explique comment l'utiliser pour accélérer votre site Web, réduire la latence et améliorer la satisfaction des utilisateurs.
Notez que l'outil du panneau "Audits" n'est actuellement disponible que dans Chrome, mais nous nous attendons à ce que d'autres navigateurs WebKit l'intègrent à terme.
Premiers pas
Pour illustrer comment le panneau "Audits" peut recommander des améliorations des performances d'une application Web, nous allons utiliser l'outil sur notre propre site www.html5rocks.com. Nous allons utiliser le panneau "Audits" pour nous aider à accélérer encore notre site.
Pour démarrer les outils pour les développeurs, il vous suffit d'utiliser l'icône Chrome (en haut à droite de la fenêtre Chrome) et de sélectionner Outils > Outils pour les développeurs.
Pour en savoir plus sur les premiers pas avec DevTools, consultez la documentation officielle.
Le panneau "Audits" (Audits) se trouve dans le panneau des boutons d'outils principaux. Vous remarquerez que, une fois sélectionné, le panneau "Audits" n'a pas encore effectué l'analyse de votre application Web. L'exécution de toutes les heuristiques peut être lente, en particulier pour une grande application Web telle que Gmail. L'outil est donc désactivé par défaut.
Pour commencer, cliquez sur le bouton "Run" (Exécuter), qui recharge l'application Web avec les heuristiques de performances activées. Une fois la page actualisée, une liste de recommandations semblable à la capture d'écran ci-dessous s'affiche.
Vous remarquerez que le panneau "Audits" (Audits) classe les suggestions par gravité. Les plus graves sont marquées d'un point rouge, et les suggestions de gravité moyenne d'un point jaune. Ce codage couleur vous aide à hiérarchiser les suggestions, en commençant par les plus importantes (et les plus intéressantes).
Le nombre indiqué entre parenthèses, après la suggestion, correspond au nombre d'instances détectées par l'outil d'audit. Par exemple, il y avait 12 occurrences de "exploiter la mise en cache du navigateur". Cela vous permet de déterminer la fréquence à laquelle la suggestion peut être appliquée.
Stratégies de vitesse
Comme indiqué précédemment, il existe de nombreuses stratégies bien connues et largement testées pour optimiser les performances des applications Web. Nous ne les aborderons pas tous en détail dans cet article, mais vous trouverez facilement plus d'informations. Pour en savoir plus sur les spécificités de l'optimisation des applications Web, consultez les tutoriels Accélérons le Web et La latence de la haute évolutivité est partout et vous fait perdre des ventes.
Le panneau "Audits" regroupe ses suggestions en deux catégories : "Utilisation du réseau" et "Performances des pages Web".
Selon le panneau "Audits" (Audits), pour améliorer l'utilisation du réseau, nous devons:
- tirer parti de la mise en cache du navigateur ;
- exploiter la mise en cache du proxy ;
- réduire la taille des cookies ;
- diffuser du contenu statique à partir d'un domaine sans cookie ;
- spécifier les dimensions de l'image ;
Pour améliorer les performances de la page Web, nous devons:
- optimiser l'ordre des styles et des scripts ;
- supprimer les règles CSS inutilisées ;
Examinons l'une des stratégies que nous pouvons mettre en œuvre pour améliorer les performances de htmlrocks.com.
Exploiter la mise en cache dans le navigateur
Par exemple, commençons par examiner la recommandation d'exploiter la mise en cache du navigateur. Qu'est-ce que cela signifie plus précisément ? Lorsque nous ouvrons l'option dans l'UI, les informations suivantes s'affichent:
- L'expiration du cache est manquante pour les ressources suivantes. Les ressources qui ne spécifient pas d'expiration peuvent ne pas être mises en cache par les navigateurs.
- Les ressources mises en cache suivantes ont une durée de fraîcheur courte.
- Les ressources suivantes ne peuvent pas être mises en cache de manière explicite. Si possible, pensez à les mettre en cache.
La mise en cache des ressources est un excellent moyen d'améliorer l'utilisation du réseau, ce qui réduit les factures de bande passante pour le développeur et améliore les temps de réponse pour l'utilisateur. Malheureusement, l'outil ne vous indique pas exactement ce que vous devez faire. Nous devons donc examiner les recommandations et utiliser nos connaissances en matière d'optimisation des performances des applications Web pour appliquer ces suggestions.
Mise en cache
Sans entrer dans le détail du cache HTTP, nous pouvons certainement aborder certains principes de base. Le protocole HTTP inclut des instructions de mise en cache, ce qui permet au serveur et au client de réduire la quantité de données à transférer par ligne. Par exemple, le serveur peut demander au client d'enregistrer la ressource localement pendant une certaine durée, ce qui évite de la demander à nouveau. Le client peut également demander si la ressource du serveur est plus récente que celle stockée localement. Idéalement, si une ressource est statique, le serveur doit demander au client de la stocker localement et d'éviter de demander la ressource au serveur à l'avenir. Comme vous pouvez l'imaginer, le cache HTTP est un sujet très détaillé, mais le thème général est "réduire la quantité de données envoyées par le biais du réseau en stockant les ressources localement sur le client".
Corriger les ressources non en cache
Examinons une recommandation en détail et découvrons comment l'associer à d'autres outils dans DevTools. Plus précisément, voyons comment résoudre le problème "Les ressources suivantes ne sont pas explicitement en cache."
Étant donné que le cache est effectué via le protocole HTTP, nous devons examiner la requête et la réponse HTTP pour la ressource http://www.html5rocks.com/. Il vous suffit de cliquer sur la ressource pour afficher les en-têtes et les détails de la requête et de la réponse d'origine.
Vous êtes alors redirigé vers le panneau "Réseau", "Ressources" ou "Sources" (selon le type de ressource sur lequel vous avez cliqué) pour obtenir plus d'informations. Dans ce cas, nous serons redirigés vers le panneau "Network" (Réseau).
Nous essayons de confirmer que le serveur a indiqué au client de ne pas mettre en cache la page d'accueil de html5rocks.com. Pour ce faire, nous cliquons sur la ressource pour examiner les en-têtes de réponse, car ce sont les en-têtes et les instructions envoyés par le serveur.
Cache-Control.Effectivement, le serveur a envoyé l'en-tête "Cache-Control: no-cache" au client. Comme vous pouvez l'imaginer, cela indique au client de toujours demander la ressource et de ne pas la mettre en cache localement. Plus précisément, la spécification HTTP pour "no-cache" indique:
"Si la directive "no-cache" ne spécifie pas de nom de champ, un cache NE DOIT PAS utiliser la réponse pour répondre à une requête ultérieure sans avoir réussi à la valider auprès du serveur d'origine. Cela permet à un serveur d'origine d'empêcher le mise en cache, même par des caches configurés pour renvoyer des réponses obsolètes aux requêtes client."
C'est précisément pour cette raison que le panneau "Audits" recommande d'activer la mise en cache, car sinon le serveur et le client envoient des informations potentiellement redondantes.
Maintenant que nous avons identifié la cause du problème, comment le résoudre ? Dans ce cas, la solution implique une configuration ou un code côté serveur. Selon votre configuration, vous pouvez activer la mise en cache via la configuration de votre serveur Web ou via les configurations de votre framework d'application Web. Plus précisément, vous devez inclure un en-tête Expires et un Cache-Control: private avec un paramètre max-age pour toute ressource que vous souhaitez mettre en cache.
Les suggestions ne sont que des suggestions
N'oubliez pas que le panneau "Audits" recommande des améliorations en fonction d'heuristiques génériques. Il s'agit d'appliquer les bonnes pratiques apprises au fil des ans à votre application Web spécifique. La plupart du temps, ces recommandations sont parfaitement adaptées et doivent être prises en compte.
Toutefois, il peut arriver que la recommandation soit correcte, mais qu'elle n'entraîne aucune amélioration. Par exemple, si votre page ne comporte qu'une seule grande image, le panneau "Audits" (Audits) recommande d'ajouter des attributs de largeur et de hauteur à la balise <img> (afin que le moteur de rendu connaisse les dimensions de l'image sans avoir à la télécharger et à l'inspecter). Bien que ce soit généralement un excellent conseil, il ne sera pas d'une grande utilité si l'image est le seul élément de la page.
N'oubliez pas d'appliquer ces suggestions une fois que vous les avez comprises. N'oubliez pas de mesurer les performances avant et après les modifications pour vous assurer qu'elles ont bien un impact.
Résumé
Le panneau "Audits" est un excellent outil facile à utiliser qui vous montrera rapidement comment optimiser les performances de votre application Web. La vitesse est un attribut crucial des applications Web, car de nombreuses entreprises ont constaté une corrélation directe entre les performances et les revenus ou l'activité. Optimiser les performances de votre application n'est pas seulement une bonne chose pour vos utilisateurs, mais aussi pour votre entreprise.