Optimiser WordPress

Optimiser WordPress : Comment analyser ton site web en 7 secondes

Si tu veux optimiser WordPress, certaines mesures sont claires, connues et efficaces. Mais même les sites web prétendument optimisés à fond ont souvent encore du potentiel. C'est pourquoi il vaut la peine de regarder au-delà de Google PageSpeed Insights et autres. En effet, de nombreux outils de performance fournissent de véritables mines d'or de données qui permettent une analyse très complète - si l'on sait ce qu'il faut chercher.

Des outils de performance simples comme ceux de Google Test My Site ou Google PageSpeed Insights renvoient surtout comme résultat une liste de recommandations d'actions. Cela peut convenir au début. Mais si tu veux surveiller efficacement tes projets WordPress et optimiser WordPress de manière judicieuse, tu devrais tôt ou tard recourir à un outil de performance qui indique également le temps de chargement de ton site web et te montre exactement comment se comporte ton blog, ta boutique, le site web de ton entreprise lors du chargement.

Il s'agit par exemple de Pingdom, GTMetrix ou Webpagetest. Ils fournissent souvent un diagramme en cascade. Nombreux sont ceux qui ne prêtent guère attention à ces jeux de données un peu encombrants. Mais si tu travailles professionnellement avec WordPress, tu dois comprendre comment ils fonctionnent. En effet : il n'existe aucune autre source de données qui te montre la vitesse de chargement de ton site web, la qualité de ton hébergeur web, l'efficacité du chargement de ton site web et où se trouvent les chantiers de ton site web.

Et avec un peu de pratique, tu peux analyser n'importe quel site web en un coup d'œil et en 7 secondes (chronométrées à la main) 😉 Comment faire ? C'est ce que je vais te montrer aujourd'hui, étape par étape !

OptimiserWordPress : Sans diagramme de cascade, vous ne faites qu'effleurer la surface

Peut-être te demandes-tu maintenant : Pourquoi se donner tant de mal ? Il existe pourtant de superbes outils de performance qui m'indiquent déjà toutes les mesures d'optimisation importantes. De plus, cela se limite de toute façon le plus souvent aux points suivants :

Il est clair que si tu as clarifié et optimisé ces points, tu as créé une très bonne base pour un site web vraiment rapide. C'est pourquoi ces raisons sont traitées (à juste titre) dans tous les bons guides de performance.

Par exemple

Et même parmi les freins au temps de chargement les plus fréquents des sites WordPress, ces raisons arrivent toujours en tête de liste.

Notre expérience issue de centaines d'analyses systématiques des performances avec Webpagetest et de contrôles approfondis de sites montre toutefois que même les sites WordPress prétendument "optimisés à fond" présentent toujours des pièges en matière de performances. Et c'est justement là que le diagramme en cascade est utile. Il te montre comment ton site web se charge, quels éléments sont chargés et à quelle vitesse.

Voici comment accéder au trésor de données

Toutes les bonnes analyses de performance fournissent également des graphiques en cascade. Si tu utilises par exemple les outils Pingdom, il te suffit de faire défiler la page suffisamment bas.

Optimiser WordPress - Pingdom Waterfall
Dans les outils Pingdom, il faut d'abord faire défiler un peu la page pour atteindre le diagramme en cascade. La section correspondante s'appelle ici File Requests. Webpagetest et GT-Metrix ont chacun leurs propres onglets pour les diagrammes.

Mais pour saisir correctement toutes ces informations, vous devez comprendre comment lire correctement les diagrammes de chutes d'eau.

Comment lire correctement les diagrammes de chutes d'eau

La densité cumulée des informations fait que les cartes de cascades ne sont pas exactement connues pour leur clarté. En fait, il suffit de savoir quatre choses pour comprendre les ensembles de données :

  • Le temps est reporté sur l'axe X. Les diagrammes en cascade sont construits de manière chronologique : Grâce à l'axe X, tu peux voir exactement quand un élément commence à se charger et combien de temps il lui faut pour le faire. C'est justement cette structure chronologique qui rend un diagramme en cascade si précieux. Tu peux ainsi voir exactement où le temps de chargement est perdu et sur quels processus tu dois agir pour optimiser ta vitesse de chargement.
  • Sur l'axe Y, chaque requête HTTP est enregistrée. Dans la plupart des diagrammes en cascade, tu peux cliquer sur les éléments de l'axe Y pour obtenir des informations supplémentaires à leur sujet.
  • Une légende indique quel type de ressource est chargé. Webpagetest marque le HTML, CSS, les images, Flash, etc. par des couleurs, Pingdom utilise des symboles pour cela.
  • Un système de codage supplémentaire donne des informations sur la manière dont les différentes requêtes sont exécutées - par exemple, le temps nécessaire pour se connecter au serveur ou l'utilisation de HTTPS.
Optimiser WordPress - Zones en cascade
Dans cette figure, vous trouverez les quatre domaines décrits ci-dessus.

OptimisezWordPress avec l'analyse de 7 secondes

On sait maintenant comment lire un diagramme de cascade, mais quels enseignements peut-on en tirer ?

Pour l'analyse des performances, l'analyse en 7 secondes a fait ses preuves chez nous : En un coup d'œil, ce diagramme te renseigne sur sept facteurs importants pour la vitesse de chargement. Ces sept hacks t'aident à comprendre exactement comment et à quelle vitesse ton site web est rendu. Et ils montrent où se trouve le potentiel pour le rendre plus rapide, pour résoudre les problèmes ou pour l'améliorer encore.

Note

Au fait, dans nos exemples, nous nous référerons toujours aux diagrammes de cascades de Webpagetest, car nous utilisons toujours cet outil, qu'il soit manuel ou automatisé.

Conseil n°1 : La taille compte

Plus la cascade est longue (c'est-à-dire plus il y a d'éléments enlevés sur l'axe Y), plus il y a de demandes à traiter et plus le site web se charge lentement. Néanmoins, une longue cascade n'est pas nécessairement mauvaise. Il existe des fonctionnalités et des ressources externes auxquelles tu ne peux ou ne veux tout simplement pas renoncer. Chez nous, le chat en direct est par exemple un tel outil. Le chargement du programme de chat ralentit bien sûr notre site web. Toutefois, le support rapide via le chat est un élément central de notre hébergement. Nous ne pouvons donc pas nous passer de ce plug-in.

HTTP/2 garantit également que le simple nombre de demandes n'a plus la même importance qu'il y a quelques années.

En effet, avec le nouveau standard web, les requêtes peuvent être traitées simultanément, et non plus l'une après l'autre comme auparavant. De plus, sous HTTP/2, le serveur envoie déjà par précaution des fichiers HTML au navigateur. Le nouveau standard compense donc les inconvénients que tu pourrais éventuellement subir en raison d'un grand nombre de requêtes HTTP. Pour profiter du HTTP/2, ton site doit toutefois être chargé via HTTPS, c'est-à-dire disposer d'un certificat SSL.

De toute façon, l'expérience a montré chez nous qu'il n'y a pas de corrélation directe entre la longueur d'une cascade et la vitesse de chargement effective. Du moins jusqu'à une certaine limite : lorsque le nombre de requêtes dépasse nettement 100, il y a dans la plupart des cas un potentiel d'économie certain.

Si ton site web dépasse ce seuil, tu devrais te pencher en détail sur tes requêtes HTTP. Notre page d'accueil, par exemple, se charge avec plus de 130 requêtes HTTP. Il y a donc là un potentiel d'optimisation. Si ta cascade contient plus de 100 requêtes, examine attentivement celles dont tu peux te passer.

Conseil n°2 : Détecter le temps de chargement

La valeur maximale sur ton axe X est essentielle pour l'analyse de la vitesse de chargement : tu peux voir ici combien de temps s'écoule avant que ton site web ne soit entièrement rendu. Plus cette valeur est faible, mieux c'est.

Si la valeur maximale de ton axe X est supérieure à 10, tu devrais définitivement te pencher sur la vitesse de chargement de ton site web. Le temps de chargement total de ton site web devrait être inférieur à 10 secondes.

"*" indique les champs obligatoires

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Conseil n°3 : Détecter le temps de charge perçu

La plupart des utilisateurs ne se soucient guère des valeurs affichées par les outils d'analyse. La seule chose qui compte pour eux, c'est la vitesse à laquelle ils ont l'impression que le site web se charge.

Lorsque tu gères un site web, il est donc important d'améliorer autant que possible cette sensation de vitesse. Tu peux y parvenir par une mise en cache optimale, une optimisation above the fold ou - si tes clients se trouvent à l'étranger - l'utilisation d'un réseau de diffusion de contenu (CDN).

Heureusement, les diagrammes en cascade permettent également d'analyser ce temps de chargement perçu. À notre connaissance, Webpagetest est le seul outil gratuit qui fait la distinction entre le temps de chargement mesuré techniquement et le temps de chargement perçu par l'utilisateur.

L'ensemble du diagramme représente le temps de chargement technique - moins important -. Le temps de charge perçu est caché entre les lignes bleue et verte du diagramme.

La ligne verte indique le moment où le premier élément visuel du site web est chargé (on parle ici du point "Start Render"). La ligne bleue indique le moment où l'utilisateur perçoit le site web comme entièrement chargé - à partir de ce point, la probabilité qu'il interagisse avec le site web augmente considérablement. Ces deux lignes doivent être placées le plus à gauche et le plus près possible l'une de l'autre.

Optimiser WordPress - Temps de chargement estimé
La zone orange indique la phase dans laquelle aucun contenu visible n'est rendu. Jusqu'à la fin de cette phase, le visiteur ne voit qu'une page blanche. La zone bleue marque la période entre le début du rendu et le chargement, pendant laquelle le visiteur peut percevoir un processus de rendu visible (par exemple, un sablier). Ces deux éléments forment ensemble le temps de chargement perçu.

Webpagetest est le seul outil qui te fournit ces données. Nous ne connaissons pas cela des outils Pingdom ou GTMetrix. Cette règle ne s'applique donc que si tu utilises Webpagetest: La ligne verte devrait apparaître après environ 2 à 3 secondes, la ligne bleue après 7 secondes au plus tard.

Conseil n°4 : HTTP/2 contre HTTP/1

HTTP/2 offre un avantage décisif par rapport à HTTP/1 : avec le nouveau standard web, les sites web se chargent beaucoup plus rapidement. Cependant, en plus d'un certificat SSL, tu es également dépendant de ton hébergeur qui doit te fournir ce service. Or, beaucoup de personnes ne savent pas si c'est effectivement le cas chez elles ou non.

L'un des principaux avantages de HTTP/2 est le traitement simultané de plusieurs requêtes. Et c'est précisément ce que tu peux voir clairement dans ton graphique en cascade. Comme les requêtes sont présentées chronologiquement, plusieurs barres commencent au même point de l'axe X lorsque HTTP/2 est utilisé.

Optimiser WordPress HTTP2
A gauche, le comportement de chargement typique d'un site WordPress sans HTTP/2. Les différentes requêtes HTTP sont exécutées les unes après les autres. A droite, tu vois comment se comporte le même site web avec HTTP/2 : Les différentes requêtes sont ici chargées simultanément.

Si des requêtes individuelles se chargent en parallèle, ton site web fonctionne avec HTTP/2.

Conseil n°5 : reconnaître les images trop grandes

Pour environ 30 % des sites web que nous analysons, nous trouvons encore du potentiel en ce qui concerne la taille des images. Et ce, bien que la plupart des webmasters partent du principe qu'ils ont déjà tiré le maximum dans ce domaine.

Les images sont - selon notre expérience - le facteur le plus important du temps de chargement des pages après la mise en cache. Pour chaque image que tu télécharges dans le backend, WordPress crée automatiquement toute une série d'autres fichiers, les vignettes ou featured images. La compression correcte de ces fichiers est l'une des méthodes les plus efficaces pour réduire la taille et donc la vitesse de chargement de ton site.

Comment optimiser vos images de manière judicieuse, par exemple :

Dans le diagramme de la cascade, les images peuvent être rapidement identifiées grâce à la légende : Webpagetest les affiche avec des barres violettes, Pingdom avec une icône. Seul GTMetrix n'affiche pas les images séparément. En tout cas, si les barres correspondantes sont sensiblement plus longues que les barres des demandes restantes, cela indique un long temps de chargement de l'image.

Optimiser WordPress - Images trop grandes
Un exemple extrême mais très parlant d'images non compressées. Certains fichiers nécessitent à eux seuls plus de 8 secondes pour être chargés, ralentissant ainsi l'ensemble du site.

Dans un cas comme celui-ci, tu devrais donc examiner tes images de très près. En cliquant sur la requête correspondante, tu peux généralement voir exactement de quels fichiers il s'agit dans un diagramme en cascade. Cela facilite grandement la recherche de freins au temps de chargement. Les longues barres de chargement pour les ressources d'images indiquent un potentiel de compression.

Conseil n°6 : repérer les redirections

Un graphique en cascade t'aide non seulement à comprendre quels éléments sont chargés, quand et à quelle vitesse, mais aussi combien de redirections ont été mises en place et où elles pointent. Les requêtes avec des redirections sont généralement mises en évidence par une couleur. Le diagramme te permet en outre de savoir quelle redirection a été mise en place et où elle mène.

Optimiser WordPress - Redirections
Ce site web présente plusieurs redirections 302 successives.

Avec un diagramme en cascade, tu peux donc voir d'un coup d'œil combien de redirections ont été mises en place et lesquelles. Cela aide d'ailleurs aussi à détecter les boucles de redirection après un changement de DNS.

Grâce aux marquages jaunes, nous avons déjà pu détecter à plusieurs reprises des redirections inutiles, voire nuisibles.

Conseil n° 7 : identifier les erreurs en un coup d'œil

Il arrive parfois que des éléments d'un site web ne soient pas rendus correctement. Cela peut par exemple concerner les cadres AdSense, mais aussi les cartes et les polices intégrées.

Optimiser WordPress - Erreurs
Ce site Web génère une erreur 404.

Dans ce cas, le diagramme de la cascade envoie un message d'erreur et met en évidence la ligne de la demande en question en rouge. En outre, le diagramme indique quelle est l'erreur et quelle ressource produit l'erreur.

Les lignes rouges indiquent des erreurs lors du rendu du site web.

Toutes les astuces en un coup d'œil grâce à la cheatsheet

Un graphique en cascade est probablement l'évaluation la plus précieuse que tu puisses obtenir pour tes sites WordPress. Il combine diverses données que tu dois garder à l'œil : Les temps de chargement, l'ordre de rendu et les messages d'erreur. Grâce aux conseils de cet article, tu peux identifier rapidement et efficacement le potentiel d'optimisation :

  • La chute d'eau est-elle trop longue (plus de 100 demandes) ?
  • La valeur maximale de l'axe X est-elle trop élevée (supérieure à 10) ?
  • Les demandes se chargent-elles en parallèle (via HTTP/2) ?
  • Les images sont-elles trop grandes (c'est-à-dire mal optimisées) ?
  • La ligne verte et la ligne bleue sont-elles trop à droite ou trop éloignées l'une de l'autre (l'utilisateur perçoit-il donc le site comme lent) ?
  • Y a-t-il des lignes jaunes inattendues (redirections) ?
  • Y a-t-il des lignes rouges (erreurs) ?

On te l'accorde, il te faudra peut-être plus de temps pour l'analyser la première fois. Avec un peu d'expérience cependant, les diagrammes en cascade te permettent de mieux comprendre tes projets WordPress et de les optimiser de manière plus approfondie.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.