Comme nous le savons bien maintenant, la vitesse d’une page Web est très importante du point de vue du référencement et de l’expérience utilisateur. Les pages plus rapides ont des classements plus élevés dans les moteurs de recherche, et les utilisateurs visiteront plus de pages et convertiront plus sur un site Web performant. En bref, le professionnel du référencement intelligent doit également penser à optimiser les performances ainsi que le contenu.
Comme nous en avons discuté dans notre dernier article, WebPageTest est un excellent outil gratuit que vous pouvez utiliser pour optimiser les performances de votre site Web. L’un des résultats les plus utiles de l’outil WebPageTest est un graphique connu sous le nom de diagramme en cascade. Un diagramme en cascade est une vue graphique de toutes les ressources chargées par un navigateur Web pour présenter votre page à vos utilisateurs, montrant à la fois l’ordre dans lequel ces ressources ont été chargées et le temps qu’il a fallu pour charger chaque ressource. L’analyse de la façon dont ces ressources sont chargées peut vous donner un aperçu de ce qui ralentit votre page Web et de ce que vous pouvez corriger pour la rendre plus rapide.
Les diagrammes en cascade ressemblent beaucoup à Microsoft Excel : ils sont simples dans leur concept et peuvent être très puissants, mais la plupart des gens ne les utilisent pas à leur plein potentiel. Dans cet article, nous montrerons comment un professionnel du référencement peut utiliser des diagrammes en cascade créés par des outils tels que WebPageTest pour identifier et améliorer les performances et l’expérience utilisateur de son site.
Comment lire un diagramme en cascade
Si vous ne l’avez pas déjà fait, accédez à WebPageTest et exécutez un test de votre site. Lorsque les résultats sont terminés, cliquez sur le premier résultat de test pour voir la cascade. Vous trouverez ci-dessous un exemple de graphique en cascade (cliquez pour une version plus grande).
Comme mentionné ci-dessus, les diagrammes en cascade sont des graphiques en cascade qui montrent comment un navigateur Web charge et affiche une page Web. Chaque ligne du diagramme est une demande distincte faite par le navigateur. Plus le diagramme est grand, plus il y a de requêtes pour charger la page Web. La largeur de chaque ligne représente le temps nécessaire au navigateur pour demander une ressource et télécharger la réponse.
Pour chaque ligne, le graphique en cascade utilise une barre multicolore pour montrer où le navigateur a passé son temps à charger cette ressource, par exemple :
Il est important de comprendre chaque phase d’une requête car vous pouvez améliorer la vitesse de votre site en réduisant le temps passé dans chacune de ces phases. Voici un bref aperçu :
- Recherche DNS [Dark Green] – Avant que le navigateur puisse communiquer avec un serveur, il doit effectuer une recherche DNS pour convertir le nom d’hôte en adresse IP. Vous ne pouvez pas faire grand-chose à ce sujet et, heureusement, cela ne se produit pas pour toutes les demandes.
- Connexion initiale [Orange] – Avant que le navigateur puisse envoyer une requête, il doit créer une connexion TCP. Cela ne devrait se produire que sur les premières lignes du graphique, sinon il y a un problème de performances (plus à ce sujet plus tard).
- Négociation SSL/TLS [Purple] – Si votre page charge des ressources en toute sécurité via SSL/TLS, il s’agit du temps que le navigateur passe à configurer cette connexion. Google utilisant désormais HTTPS comme facteur de classement de recherche, la négociation SSL/TLS est de plus en plus courante.
- Temps jusqu’au premier octet (TTFB) [Green] – Le TTFB est le temps qu’il faut pour que la requête se rende au serveur, pour que le serveur la traite, et pour que le premier octet de la réponse la fasse parvenir au navigateur. Nous utiliserons la mesure pour déterminer si votre serveur Web est sous-alimenté ou si vous devez utiliser un CDN.
- Téléchargement (Bleu) – C’est le temps que le navigateur passe à télécharger la réponse. Plus cette phase est longue, plus la ressource est importante. Idéalement, vous pouvez contrôler la durée de cette phase en optimisant la taille de votre contenu.
Vous remarquerez également quelques autres lignes sur le diagramme en cascade. Il y a une ligne verticale verte qui indique quand “Démarrer le rendu” arrive. Comme nous en avons discuté dans notre dernier article, jusqu’à ce que Start Render se produise, l’utilisateur regarde un écran blanc vierge. Un temps de démarrage élevé donnera à l’utilisateur l’impression que votre site est lent et ne répond pas. Il y a quelques points de données supplémentaires dans la cascade, tels que “Téléchargement de contenu”mais il s’agit de sujets plus avancés qui dépassent le cadre de cet article.
Optimiser les performances avec un diagramme en cascade
Alors, comment accélérer le chargement d’une page Web et créer une meilleure expérience utilisateur ? Un graphique en cascade nous fournit 3 excellentes aides visuelles pour nous aider à atteindre cet objectif :
- Tout d’abord, nous pouvons optimiser notre site pour réduire le temps nécessaire au téléchargement de toutes les ressources. Cette réduit la largeur de notre cascade. Plus la cascade est fine, plus votre site est rapide.
- Deuxièmement, nous pouvons réduire le nombre de requêtes que le navigateur doit effectuer pour charger une page. Cette réduit la hauteur de notre cascade. Plus votre chute d’eau est courte, mieux c’est.
- Enfin, nous pouvons optimiser l’ordonnancement des demandes de ressources pour améliorer le temps de rendu. Cela déplace le vert Démarrer le rendu ligne vers la gauche. Plus on quitte cette ligne, mieux c’est.
Plongeons maintenant dans chacun d’eux plus en détail.
Réduire la largeur de la cascade
Nous pouvons réduire la largeur de la cascade en réduisant le temps nécessaire pour télécharger chaque ressource. Nous savons que chaque ligne de la cascade utilise une couleur pour indiquer les différentes phases de récupération d’une ressource. La fréquence à laquelle vous voyez différentes couleurs révèle différentes optimisations que vous pouvez apporter pour améliorer la vitesse globale.
- Y a-t-il beaucoup d’orange ? Orange est pour la connexion TCP initiale établie sur votre site. Seules les 2 à 6 premières demandes adressées à un nom d’hôte spécifique doivent créer une connexion TCP, après quoi les connexions existantes sont réutilisées. Si vous voyez beaucoup d’orange sur le graphique, cela signifie que votre site n’utilise pas connexions persistantes. Ci-dessous, vous pouvez voir un diagramme en cascade pour un site qui n’utilise pas de connexions persistantes et notez la section orange au début de chaque ligne de demande.
Une fois les connexions persistantes activées, la largeur de chaque ligne de requête sera réduite de moitié car le navigateur n’aura pas à établir de nouvelles connexions à chaque requête. - Y a-t-il de longues sections violettes ? Le violet est le temps passé à effectuer une négociation SSL/TLS. Si vous voyez beaucoup de violet encore et encore pour le même site, cela signifie que vous n’avez pas optimisé pour TLS. Dans l’extrait de diagramme ci-dessous, nous voyons 2 requêtes HTTPS. Un serveur a été correctement optimisé, tandis que l’autre a une mauvaise configuration TLS :
Pour optimiser les performances TLS, consultez notre précédent article Moz . - Y a-t-il de longues sections bleues ? Le bleu est le temps passé à télécharger la réponse. Si une ligne a une grande section bleue, cela signifie très probablement que la réponse (la ressource) est très volumineuse. Un excellent moyen d’accélérer un site consiste simplement à réduire la quantité de données à envoyer au client. Si vous voyez beaucoup de bleu, demandez-vous « Pourquoi cette ressource est-elle si importante ? » Il y a de fortes chances que vous puissiez en réduire la taille grâce à la compression HTTP, à la minification ou à l’optimisation d’image. A titre d’exemple, dans le diagramme ci-dessous, nous voyons une image PNG qui prend beaucoup de temps à télécharger. Nous pouvons le dire à cause de la longue section bleue.
Des recherches plus poussées ont révélé que cette image fait près de 1,1 Mo ! Il s’avère que le concepteur a oublié de l’exporter correctement depuis Photoshop. L’utilisation de techniques d’optimisation d’image a réduit cette ligne et accéléré le chargement global de la page. - Y a-t-il beaucoup de vert ? Il y a de fortes chances qu’il y ait beaucoup de verdure. Le vert est le navigateur qui n’attend que d’obtenir du contenu. Plusieurs fois, vous verrez une ligne où le navigateur attend 80 ou 90 ms, pour ensuite passer 1 ms à télécharger la ressource ! La meilleure façon de réduire la section verte est de déplacer votre contenu statique, comme les images, vers un réseau de diffusion de contenu (CDN) plus proche de vos utilisateurs. Plus à ce sujet plus tard.
Réduire la hauteur de la cascade
Si le diagramme en cascade est grand, le navigateur doit faire un grand nombre de requêtes pour charger la page. La meilleure façon de réduire le nombre de requêtes est d’examiner tout le contenu de votre page et de déterminer si vous en avez vraiment besoin. Par exemple:
- Voyez-vous beaucoup de fichiers CSS ou JavaScript ? Ci-dessous, un extrait d’un diagramme en cascade d’un site AOL qui, je ne plaisante pas, demande 48 fichiers CSS distincts !
Si votre site charge un grand nombre de fichiers CSS ou JavaScript individuels, vous devriez essayer de les combiner comme avec un plugin CMS ou dans le cadre de votre processus de construction. La combinaison de fichiers réduit le nombre de requêtes effectuées, améliorant ainsi la vitesse globale de votre page. - Voyez-vous beaucoup de “petits” (moins de 2 Ko) de fichiers JavaScript ou de fichiers CSS ? Envisagez d’inclure le contenu de ces fichiers directement dans votre code HTML via des balises
Articles similaires
