Introduction
Une application Web rapide est une application Web performante. Votre travail de développeur n'est pas terminé tant que vous n'avez pas optimisé à la fois les performances réelles et perçues de votre application. Non seulement il s'agit d'une bonne chose à faire pour garantir une expérience optimale à vos utilisateurs, mais cette optimisation repose sur des raisons pratiques et importantes. Amazon a enregistré une baisse de 1% des ventes pour 100 ms de latence du site, et Google a mesuré une baisse de 20% du trafic pour chaque délai de 0,5 seconde (citation). Il s'agit de chiffres réels qui ont des implications réelles pour votre entreprise et votre application Web.
La vitesse sur le Web est si importante que nous y avons même travaillé sans relâche pour rendre le Web plus rapide. Si vous avez besoin d'une autre raison pour optimiser les performances de votre application, Google a annoncé l'ajout de la vitesse des pages à 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 (Sites Web hautes performances et Sites Web encore plus rapides). Les techniques mises en œuvre sur le serveur (mettre en œuvre les en-têtes de contrôle de cache corrects) et sur le client (fournir les attributs de largeur et de hauteur de l'image) sont combinées dans une stratégie de bout en bout afin d'optimiser les performances. Avec autant de conseils et d'astuces, il est parfois difficile d'évaluer leur correspondance avec la vie réelle et votre véritable 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 fournit des recommandations personnalisées pour améliorer les performances et réduire la latence. Cet article porte sur le panel Audits, dont la portée est semblable à celle de l'outil très populaire YSlow, et explique comment l'utiliser pour accélérer votre site Web, réduire la latence et accroître la satisfaction des utilisateurs.
Notez que l'outil du panneau d'audit n'est actuellement disponible que dans Chrome, mais nous pensons qu'à terme, d'autres navigateurs WebKit l'intégreront.
Getting Started
Pour illustrer la manière dont le panel Audits peut recommander d'améliorer les performances des applications Web, nous allons utiliser notre propre site www.html5rocks.com dans cet outil afin d'accélérer le chargement de notre site.
Pour lancer les outils de développement, il vous suffit d'utiliser l'icône Chrome (en haut à droite de la fenêtre Chrome) et de sélectionner "Outils > Outils de développement".
Pour découvrir comment vous lancer avec les outils de développement, consultez la documentation officielle.
Le panneau "Audits" est situé dans le panneau principal des boutons "Outils". Vous remarquerez qu'une fois sélectionné, le panneau "Audits" n'a pas encore analysé votre application Web. L'exécution de toutes les méthodes heuristiques peut être lente, en particulier pour une application Web volumineuse telle que Gmail. L'outil est donc désactivé par défaut.
C'est parti ! Cliquez sur le bouton "Exécuter" pour actualiser l'application Web en activant l'heuristique des performances. 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" classe les suggestions par niveau de gravité, avec un point rouge pour les plus graves et un point jaune pour les suggestions de gravité moyenne. Ce code couleur vous aide à hiérarchiser les suggestions, en vous concentrant d'abord sur les gains les plus importants (et les plus importants).
Le nombre entre parenthèses, suivant la suggestion, correspond au nombre d'instances détectées par l'outil d'audit. Par exemple, 12 occurrences de "Exploiter la mise en cache du navigateur" ont été comptabilisées. Cela vous donne une idée de la fréquence à laquelle la suggestion peut être appliquée.
Stratégies pour améliorer la vitesse
Comme indiqué précédemment, il existe de nombreuses stratégies bien connues et fortement testées pour optimiser les performances des applications Web. Nous n'allons pas les aborder en détail dans cet article, mais il est facile d'y trouver plus d'informations. Pour en savoir plus sur les spécificités de l'optimisation des applications Web, vous pouvez consulter les tutoriels "Accélérons le Web" et l'article La latence de haute évolutivité est partout et vous coûte des ventes.
Le panneau "Audits" regroupe ses suggestions en deux catégories : "Utilisation du réseau" et "Performances des pages Web".
Selon le panel d'audit, nous devons:
- exploiter la mise en cache du navigateur
- exploiter la mise en cache du proxy
- réduire la taille des cookies
- Diffusez du contenu statique à partir d'un domaine sans cookie
- spécifier les dimensions de l'image
Pour améliorer les performances des pages Web, nous devons:
- optimiser l'ordre des styles et des scripts
- supprimer les règles CSS inutilisées
Examinons l'une des stratégies sur lesquelles nous pouvons nous concentrer pour améliorer les performances de htmlrocks.com.
Exploiter la mise en cache dans le navigateur
Par exemple, examinons d'abord la recommandation consistant à tirer parti de la mise en cache du navigateur. Qu'est-ce que cela signifie plus précisément ? Si vous ouvrez l'option dans l'interface utilisateur, les détails suivants s'affichent:
- Il manque un délai d'expiration de cache pour les ressources suivantes. Les ressources qui ne spécifient pas de délai d'expiration ne peuvent pas être mises en cache par les navigateurs.
- Les ressources suivantes pouvant être mises en cache ont une durée d'actualisation courte.
- Les ressources suivantes ne peuvent pas être mises en cache. Si possible, envisagez de 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 frais de bande passante pour le développeur et réduit les temps de réponse pour l'utilisateur. Malheureusement, l'outil ne vous dit pas exactement ce que vous devez faire. Nous devons donc approfondir nos recommandations et utiliser nos connaissances en matière d'optimisation des performances des applications Web pour appliquer ces suggestions.
Mise en cache
Sans aborder la mise en cache HTTP, nous pouvons certainement aborder certains principes de base. Le protocole HTTP inclut des instructions de mise en cache, qui permettent au serveur et au client de réduire la quantité de données à transférer sur le réseau. Par exemple, le serveur peut demander au client d'enregistrer la ressource localement pendant un certain temps, éliminant ainsi le besoin de demander à nouveau la ressource. 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 la demander au serveur à l'avenir. Comme vous pouvez l'imaginer, la mise en cache HTTP contient une quantité incroyable de détails, mais le thème général est de "réduire la quantité de données envoyées sur le réseau en stockant des ressources localement sur le client".
Corriger les ressources ne pouvant pas être mises en cache
Examinons en détail une recommandation et apprenons à la connecter à d'autres outils dans les outils de développement. Voyons plus précisément comment résoudre ce problème : "les ressources suivantes ne peuvent pas être mises en cache".
La mise en cache s'effectuant 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 dirigé vers le panneau "Réseau", "Ressources" ou "Sources" (en fonction du type de ressource sur lequel vous avez cliqué) contenant des informations supplémentaires. Dans ce cas, nous accédons au panneau "Network" (Réseau).
Nous essayons de confirmer que le serveur a indiqué au client « 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 il s'agit des en-têtes et des instructions envoyés par le serveur.
Cache-Control.Bien sûr, 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 satisfaire une requête ultérieure sans revalidation réussie auprès du serveur d'origine. Cela permet à un serveur d'origine d'empêcher la mise en cache, même par le biais de caches configurés pour renvoyer des réponses obsolètes aux requêtes client."
C'est exactement pour cette raison que le panneau "Audits" recommande d'activer la mise en cache, faute de quoi le serveur et le client envoient des informations potentiellement redondantes.
Maintenant que nous avons confirmé la cause première de la suggestion d'audit, comment pouvons-nous y remédier ? Dans ce cas, la solution implique une configuration ou du 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 Expire et un en-tête Cache-Control: private avec un paramètre max-age pour toute ressource que vous souhaitez mettre en cache.
Les suggestions sont justes, les suggestions
N'oubliez pas que le panneau "Audits" recommande des améliorations basées sur des méthodes heuristiques génériques. Elle consiste à appliquer à votre application Web les bonnes pratiques apprises au fil des années. La plupart du temps, ces recommandations sont pertinentes et doivent être prises à cœur.
Toutefois, dans certains cas, la recommandation peut être correcte, mais ne conduisant à aucune amélioration. Par exemple, si votre page ne comporte qu'une seule grande image, le panneau "Audits" vous recommande d'ajouter les 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 ni à l'inspecter). Même s'il s'agit généralement d'un excellent conseil, cela ne vous sera d'aucune utilité si l'image est le seul élément de la page.
N'oubliez pas d'appliquer ces suggestions après les avoir comprises. N'oubliez pas non plus de mesurer les performances avant et après les modifications pour vous assurer qu'elles se traduisent réellement.
Résumé
Le panneau "Audits" est un outil efficace et facile à utiliser qui vous montre rapidement comment optimiser les performances de votre application Web. La vitesse est un attribut essentiel d'une application Web, car de nombreuses entreprises ont établi des corrélations directes entre les performances, les revenus ou l'activité. Optimiser les performances de votre application n'est pas seulement la bonne chose à faire pour vos utilisateurs, c'est aussi la bonne chose à faire pour les résultats de votre entreprise.