Optimiser WordPress : Comment analyser ton site web en 7 secondes

Jan Hornung Dernière mise à jour le 12.10.2020
9 Min.
Grâce à ces conseils et à notre feuille de triche, tu peux analyser tes sites WordPress en seulement 7 secondes et même mieux que Google PageSpeed Insights
Dernière mise à jour le 12.10.2020

Si vous souhaitez optimiser WordPress , certaines mesures sont claires, bien connues et leur efficacité est prouvée. Mais même les pages soi-disant optimisées ont souvent encore du potentiel. Il vaut donc la peine de regarder au-delà de Google PageSpeed Insights and Co. Parce que de nombreux outils de performance fournissent de véritables donnéesqui permettent une analyse très complète - si vous savez ce qu'il faut chercher. Aujourd'hui, je vais vous montrer 7 conseils qui peuvent vous aider à analyser vosdonnées en seulement 7 secondes.

Des outils de performance simples comme ceux de Google Tester mon site ou Google PageSpeed Insights principalement de dresser une liste d'actions recommandées en conséquence. Cela peut être bien pour le début. Mais si vous souhaitez suivre efficacement vos projets WordPress et optimiser utilement WordPress , vous devriez tôt ou tard recourir à un outil performant qui vous indique également le temps de chargement de votre page et vous montre exactement comment se comporte votre blog, votre boutique, votre page d'entreprise lors du chargement.

Il s'agit, par exemple, de Pingdom, GTMetrix ou Webpagetest. Celles-ci fournissent souvent une carte dite de cascade. Ces ensembles de données quelque peu volumineux ne sont guère remarqués par de nombreux utilisateurs. Mais si vous travaillez professionnellement avec WordPress , vous devez comprendre comment ils fonctionnent. Parce que : il n'existe aucune autre source de données qui vous indique la vitesse de chargement de votre site, la qualité de votre hébergeur, l'efficacité de votre chargement et l'emplacement des sites de construction de votre site.

Et avec un peu d'entraînement, vous pouvez analyser chaque page d'un seul coup d'œil et en (main levée) 7 secondes 😉

Comment faire ? Je vais vous montrer étape par étape aujourd'hui !

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

Peut-être vous demandez-vous maintenant : Quel est l'intérêt de tous ces efforts ? Il existe des outils très performants qui me montrent déjà toutes les mesures d'optimisation importantes. En outre, elle se limite essentiellement aux points suivants :

Bien sûr, si vous avez clarifié et optimisé ces points, vous avez créé une très bonne base pour un site vraiment rapide. C'est pourquoi ces raisons sont (à juste titre) abordées dans tous les bons guides de performance.

Par exemple

Et aussi avec les freins de temps de chargement les plus fréquents de WordPress - sides ces raisons atterrissent encore et encore sur les premières places.

Cependant, notre expérience de centaines d'analyses systématiques des performances avec Webpagetest et de contrôles approfondis de sites montre que même dans les pages WordPress prétendument "entièrement optimisées", les pièges des performances peuvent être trouvés encore et encore. Et c'est exactement là que le diagramme de la cascade s'avère utile. Parce qu'il peut faire quelque chose de spécial : il vous montre comment votre page se charge, quels éléments sont chargés et à quelle vitesse l'ensemble se déroule.

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

Toutes les bonnes analyses de performance produisent également des graphiques de cascades. Si vous utilisez les outils Pingdom, par exemple, vous n'avez qu'à faire défiler la page assez loin.

WordPress  optimiser la cascade de Pingdom
Dans Pingdom Tools, vous devez d'abord faire défiler un peu pour atteindre le tableau des chutes d'eau. La section correspondante ici s'appelle Demande de dossier. Webpagetest et GT-Metrix ont chacun leur propre onglet 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 :

  1. Le temps est tracé sur l'axe des X.
    Les diagrammes de cascades sont structurés chronologiquement : En utilisant l'axe X, vous pouvez voir exactement quand un élément commence à se charger et combien de temps il met à se charger. C'est cette structure chronologique qui rend un diagramme de cascade si précieux. Ainsi, vous pouvez voir exactement où le temps de chargement est perdu et quels sont les processus que vous devez traiter afin d'optimiser votre vitesse de chargement.
  2. Sur l'axe des Y, chaque requête HTTP est enregistrée.
    Dans la plupart des diagrammes de cascades, vous pouvez cliquer sur les éléments de l'axe des Y pour obtenir des informations supplémentaires à leur sujet.
  3. Une légende montre quel type de ressource est chargé.
    Webpagetest marque le HTML, le CSS, les images, le Flash etc. avec des couleurs, Pingdom utilise des icônes pour cela.
  4. Un système de codage supplémentaire fournit des informations sur la manière dont les demandes individuelles sont exécutées - par exemple, le temps nécessaire pour se connecter au serveur ou si le HTTPS est utilisé.
Optimiser WordPress : Comment analyser ton site web en 7 secondes
WordPress  optimiser les zones d'un diagramme de chute d'eau
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 nous a fait ses preuves : Le graphique vous donne des informations sur sept facteurs importants pour la vitesse de chargement en un seul coup d'œil. Ces sept hacks vous aident à comprendre exactement comment et à quelle vitesse votre site web est rendu. Et ils montrent où il est possible d'accélérer le processus, de résoudre les problèmes ou de 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 les éléments sont enlevés sur l'axe Y), plus les demandes doivent être traitées et plus le chargement des pages est lent. Néanmoins, une longue chute d'eau ne doit pas nécessairement être mauvaise. Il existe des fonctionnalités et des ressources externes dont vous ne pouvez ou ne voulez tout simplement pas vous passer. Dans notre cas, par exemple, le chat en direct est un de ces outils. Bien sûr, le chargement du programme de chat ralentit notre site. Toutefois, l'assistance rapide par le biais du chat est un élément central de notre hébergement. On ne peut donc pas se passer du Plugin .

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

Avec la nouvelle norme web, les demandes peuvent être traitées simultanément au lieu d'être traitées l'une après l'autre comme auparavant. En outre, sous HTTP/2, le serveur envoie déjà des fichiers HTML au navigateur par précaution. La nouvelle norme compense donc les inconvénients que vous pourriez avoir du fait du grand nombre de requêtes HTTP. Pour bénéficier du protocole HTTP/2, votre site web doit toutefois être chargé via HTTPS, c'est-à-dire qu'il doit disposer d'un certificat SSL.

Quoi qu'il en soit, notre expérience a montré qu'il n'y a pas de corrélation directe entre la longueur d'une chute d'eau et la vitesse de chargement réelle. Aumoins jusqu'à une certaine limite : avec un nombre de demandes nettement supérieur à 100, il y a certainement un potentiel d'économie dans la plupart des cas .

Si votre site web dépasse ce seuil, vous devriez examiner de plus près vos demandes HTTP. Par exemple, notre page d'accueil se charge de plus de 130 requêtes HTTP. Il y a donc là un potentiel d'optimisation.

Si votre cascade contient plus de 100 demandes, examinez attentivement celles dont vous pouvez vous passer.

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

La valeur maximale sur votre axe des x est essentielle pour l'analyse de la vitesse de chargement : vous pouvez y lire le temps qui s'écoule avant que votre site web ne soit complètement rendu. Plus cette valeur est faible, mieux c'est.

Si la valeur maximale de votre axe des x est supérieure à 10, vous devez absolument vérifier la vitesse de chargement de votre page.

Le temps de chargement total de votre page doit être inférieur à 10 secondes

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

La plupart des utilisateurs ne se soucient pas vraiment de ce que les outils d'analyse des valeurs crachent. La seule chose qui compte pour eux, c'est la vitesse de chargement de la page .

Pour vous, en tant qu'exploitant de site, il est donc important d'améliorer autant que possible ce sentiment de rapidité. Vous pouvez y parvenir grâce à une mise en cache optimale, à une optimisation au-dessus du pli ou - si vos clients sont situés à l'étranger - à l'utilisation d'un réseau de diffusion de contenu (CDN).

Heureusement, vous pouvez aussi très bien connaître ce temps de charge perçu grâce aux diagrammes en cascade. À notre connaissance, Webpagetest est le seul outil gratuit qui permet de distinguer les techniquement mesuré le temps de chargement et le perçue par l'utilisateur le temps de chargement.

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 de la page web est chargé (c'est ce qu'on appelle le point de "rendu de départ"). La ligne bleue indique le moment où l'utilisateur perçoit que la page est entièrement chargée - à ce moment, la probabilité d'interagir avec la page augmente considérablement. Ces deux lignes doivent être aussi loin à gauche et aussi proches que possible l'une de l'autre.

WordPress  optimiser la cartographie du temps de chargement perçu
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 vous donne ces données. Nous n'avons pas connaissance de cela de la part de Pingdom Tools ou de GTMetrix. Cette règle ne s'applique donc que si vous utilisez Webpagetest:

La ligne verte devrait apparaître au bout de 2 à 3 secondes environ, la ligne bleue au bout de 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 pages se chargent beaucoup plus rapidement. Cependant, en plus d'un certificat SSL, vous êtes également dépendant de votre hébergeur qui fournit ce service. De nombreux exploitants de sites ne sont pas sûrs que ce soit réellement le cas pour eux.

L'un des principaux avantages de HTTP/2 est qu'il peut traiter plusieurs requêtes à la fois. Et vous pouvez le voir clairement dans votre diagramme de cascade. Les demandes étant ici traitées chronologiquement, plusieurs barres commencent au même point sur l'axe X lorsque le protocole HTTP/2 est utilisé.

WordPress  optimiser le comportement de chargement d'une page WordPress  avec et sans HTTP/2
A gauche, le comportement de chargement typique d'une WordPress page sans HTTP/2. Les requêtes HTTP individuelles sont exécutées l'une après l'autre. À droite, vous voyez comment la même page se comporte avec HTTP/2 : Les demandes individuelles sont chargées ici simultanément.

Si des demandes individuelles se chargent en parallèle, votre page 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 un potentiel en termes de taille d'image. Et ce, bien que la plupart des webmasters supposent qu'ils ont déjà atteint l'optimum ici.

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 vous téléchargez dans le backend, toute une série de fichiers supplémentaires, les vignettes ou les images vedettes, sont WordPress automatiquement créées. 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 votre page.

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.

WordPress  optimiser c'est ce à quoi cela ressemble lorsque les images sont vraiment trop grandes
Un exemple extrême mais très illustratif d'images non compressées. Certains des fichiers à eux seuls prennent plus de 8 secondes à charger, ralentissant ainsi la page entière.

Dans un cas comme celui qui précède, vous devez regarder vos images de près. En cliquant sur la demande correspondante, vous pouvez généralement voir dans un diagramme en cascade quels sont exactement les fichiers concernés. La recherche de freins de temps de chargement est ainsi beaucoup plus facile.

Les longues barres de chargement des ressources d'images indiquent le potentiel de compression.

Conseil n°6 : repérer les redirections

Un tableau des chutes d'eau vous aidera non seulement à comprendre quels éléments sont en train de se charger, quand et à quelle vitesse, mais aussi combien de redirections ont été mises en place et où elles pointent.

Les demandes avec redirection sont généralement surlignées en couleur. Le diagramme vous indique également quelle redirection est mise en place et où elle va.

OptimiserWordPress  Identifier les redirections
Cette page comporte plusieurs 302 redirections à la suite.

Grâce à un diagramme en cascade, vous pouvez voir d'un coup d'œil combien et quelles redirections ont été définies. En outre, cela permet également de détecter les boucles de transfert après une modification du DNS. Grâce aux marqueurs jaunes, nous avons pu détecter à plusieurs reprises des redirections inutiles ou même nuisibles.

Les lignes jaunes marquent les réorientations.

Conseil n°7: reconnaître les erreursd'un seul coup d'œil

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

WordPress  optimiser dans le diagramme de la cascade les erreurs sont identifiées par des lignes rouges
Cette page affiche 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 les erreurs lors du rendu de la page.

Tous les conseils en un coup d'œil avec la fiche de triche

Une carte des chutes d'eau est probablement l'analyse la plus précieuse que vous puissiez obtenir pour vos pages WordPress . Il combine diverses données que vous devez surveiller en tant que propriétaire du site : Temps de chargement, ordre de rendu et messages d'erreur. Grâce aux conseils de cet article, vous pouvez reconnaître rapidement et efficacement et efficacement, là où il existe encore un potentiel d'optimisation :

  • La chute d'eau est-elle trop longue (plus de 100 demandes) ?
  • La valeur maximale de l'axe des X est-elle trop grande (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) ?
  • Les lignes verte et bleue sont-elles trop à droite ou trop éloignées (c'est-à-dire l'utilisateur perçoit-il la page comme lente) ?
  • 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.

RAIDBOXER depuis le début et chef du soutien. Aux Bar- et WordCamps, il aime parler de la vitesse des pages et des performances des sites web. La meilleure façon de le soudoyer est de lui offrir un espresso - ou un bretzel bavarois.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.