WordPress optimiser : Comment analyser votre site web en 7 secondes

Jan Hornung Mis à jour le 12.10.2020
9 Min.
Grâce à ces conseils et à notre triche, vous pouvez analyser vos WordPress pages en seulement 7 secondes et même mieux que Google PageSpeed Insights
Dernière mise à jour le 12.10.2020

Si vous voulez WordPress optimiser, certaines mesures sont claires, bien connues et leur efficacité est prouvée. Mais même les pages qui sont supposées être optimisées en profondeur ont souvent encore du potentiel. C'est pourquoi il vaut la peine de regarder au-delà de Google PageSpeed Insights and Co. Parce que de nombreux outils de performance fournissent de véritables données mine d'orn, qui permettent une analyse très complète - si vous savez ce qu'il faut rechercher. Je vais vous montrer sept conseils aujourd'hui, par lequel l'analysee en seulement 7 secondes.

Des outils de performance simples comme ceux de Google Tester mon site ou Google PageSpeed Insights se traduisent principalement par une liste de recommandations d'actions. Pour commencer, cela peut être bon. Lorsque vous avez votre WordPress mais en assurant un suivi efficace des projets et WordPress vous devriez tôt ou tard utiliser un outil performant qui affiche également le temps de chargement de votre page et vous montre exactement comment votre blog, votre boutique, la page de votre entreprise se comporte lors du chargement.

Il s'agit par exemple Le royaume des pins, GTMetrix ou Webpagetest. Ces derniers fournissent souvent une Diagramme de la cascade avec. Ces ensembles de données quelque peu volumineux ne sont guère remarqués par de nombreux utilisateurs. Mais si vous travaillez avec WordPress eux de manière professionnelle, 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 chantiers de votre site.

Et avec un peu de pratique, vous pouvez analyser chaque page d'un seul coup d'œil et en 7 secondes (à la main) 😉

Comment faire ? Aujourd'hui, je vais vous montrer pas à pas !

WordPress optimiser : Sans diagramme de cascade, on ne fait qu'effleurer la surface

Peut-être vous demandez-vous maintenant : Pourquoi tout ce tapage ? Il existe des outils très performants qui me montrent déjà toutes les mesures d'optimisation importantes. De plus, elle se limite généralement 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) traitées dans tous les bons guides de performance.

Par exemple

Et aussi avec les plus fréquentes Freins de temps de chargement de WordPress pages ces raisons viennent toujours en tête.

Cependant, notre expérience de centaines d'analyses systématiques des performances avec des tests de pages web et des vérifications approfondies de sites montre que même dans les pages supposées "complètement optimisées" WordPress, il y a toujours des pièges de performance. Et c'est exactement là que le diagramme de la chute d'eau intervient. 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 diagrammes de cascades. Par exemple, si vous utilisez les Pingdom Tools, vous n'avez qu'à faire défiler la page assez loin.

WordPress  optimiser la cascade du Pingdom
Avec les outils Pingdom, il faut d'abord faire défiler un peu pour atteindre le diagramme de la cascade. La section correspondante ici s'appelle Demande de dossier. Webpagetest et GT-Metrix ont chacun leurs propres onglets pour les diagrammes.

Mais pour obtenir toutes ces informations, vous devez comprendre comment lire correctement les cartes des chutes d'eau.

Comment lire correctement les diagrammes de chutes d'eau

La densité concentrée d'informations fait que les diagrammes de cascades ne sont pas exactement connus pour leur clarté. En fait, il suffit de savoir quatre choses pour comprendre les registres :

  1. Le temps est tracé sur l'axe des X.
    Les diagrammes de chutes d'eau sont structurés chronologiquement : L'axe des X vous indique exactement quand un élément commence à se charger et combien de temps il faut pour le charger. C'est cette structure chronologique qui fait la valeur d'un diagramme en cascade. Car de cette façon, vous pouvez voir exactement où le temps de chargement est perdu et par quels processus vous devez commencer pour optimiser votre vitesse de chargement.
  2. Chaque requête HTTP est enregistrée sur l'axe Y.
    Pour la plupart des diagrammes de chutes d'eau, vous pouvez cliquer sur les éléments de l'axe des Y pour obtenir des informations supplémentaires à leur sujet.
  3. Une légende indique quel type de ressource est chargé.
    Webpagetest marque de couleurs les HTML, CSS, images, Flash, etc., Pingdom utilise des symboles à cet effet.
  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 de connexion au serveur ou l'utilisation éventuelle du HTTPS.
WordPress  optimiser : Comment analyser votre site web en 7 secondes
WordPress  optimiser les zones d'un diagramme de cascade
Dans ce schéma, vous trouverez les quatre domaines décrits ci-dessus.

WordPress optimiser avec l'analyse de 7 secondes

On sait maintenant comment lire un diagramme de cascade - mais quelles conclusions peut-on en tirer ?

Dans l'analyse des performances, nous avons Analyse de 7 secondes prouvé : Le diagramme vous donne des informations en un coup d'œil sur sept facteurs importants pour la vitesse de chargement. Ces sept hacks vous aident à comprendre exactement comment et à quelle vitesse votre site web est rendu. Et ils montrent où il est possible de les rendre plus rapides, de résoudre les problèmes ou de les 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, que ce soit manuellement ou automatiquement.

Conseil n° 1 : la taille compte

Plus la chute 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 caractéristiques et des ressources externes dont vous ne pouvez ou ne voulez tout simplement pas vous passer. Chez nous, par exemple, le chat en direct est un de ces outils. Le chargement du programme de chat ralentit bien sûr notre site. Mais l'assistance rapide via le chat est un élément central de notre hébergement. Nous ne pouvons Plugindonc pas nous en passer.

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

En effet, grâce à 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, le serveur envoie des fichiers HTML au navigateur sous HTTP/2 par précaution. La nouvelle norme compense donc les inconvénients qui peuvent découler d'un grand nombre de requêtes HTTP. Toutefois, pour bénéficier du protocole HTTP/2, votre page web doit être chargée via HTTPS, c'est-à-dire via un Certificat SSL ...l'ordre.

En tout cas, l'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. Au moins jusqu'à une certaine limite : Avec bien plus de 100 demandes dans la plupart des cas, il y a Potentiel d'économies.

Si votre site web dépasse ce seuil, vous devriez examiner de plus près vos demandes HTTP. Notre page d'accueil, par exemple, contient 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 analyser la vitesse de chargement : vous pouvez voir ici combien de temps s'écoule avant que votre site web 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 tenir compte de 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 chargement perçu

La plupart des utilisateurs ne se soucient guère de ce que les outils d'analyse des valeurs crachent. La seule chose qui compte pour eux est la rapidité avec laquelle la page se charge.

Pour vous, en tant qu'exploitant de site, il est donc important d'améliorer autant que possible cette sensation de vitesse. 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 - en utilisant un réseau de diffusion de contenu (CDN).

Heureusement, on apprend aussi à très bien connaître ce temps de chargement ressenti à l'aide de diagrammes de cascades. À notre connaissance, Webpagetest est le seul outil gratuit qui peut être utilisé entre mesuré techniquement le temps de chargement et la perçue par l'utilisateur Le temps de chargement est différent.

L'ensemble du diagramme représente le temps de chargement technique - moins important -. Le temps de chargement perçu est caché entre les lignes bleues et vertes 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 "Start Render"). La ligne bleue indique le moment où l'utilisateur perçoit la page comme étant entièrement chargée - à ce moment-là, la probabilité d'interagir avec la page augmente de manière significative. Ces deux lignes doivent être aussi à 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 peut vous fournir ces données. Nous ne connaissons pas les outils Pingdom ou GTMetrix. Cette règle ne s'applique donc que si vous Utilisations de 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 pour vous fournir ce service. Toutefois, de nombreux exploitants de sites ne sont pas sûrs que ce soit réellement le cas pour eux.

L'un des principaux avantages du protocole HTTP/2 est le traitement simultané de plusieurs demandes. Et vous pouvez le voir clairement dans votre diagramme de chute d'eau. Comme les demandes sont traitées chronologiquement, plusieurs barres commencent au même point sur l'axe des X lorsque HTTP/2 est utilisé.

WordPress   optimiser le comportement de charge d'un WordPress  -Page 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.

Chargez des requêtes uniques en parallèle, votre page fonctionnera avec HTTP/2.

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

Dans environ 30 % des sites web que nous analysons, nous trouvons encore un potentiel en termes de taille d'image. Et ce, même si la plupart des webmasters pensent qu'ils en ont déjà tiré le meilleur parti.

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.

La façon d'optimiser vos images de manière judicieuse vous montre, par exemple :

Dans le diagramme de la chute d'eau, 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 ne marque pas les images séparément. Dans tous les cas : si les barres correspondantes sont beaucoup 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 vivant d'images non compressées. Certains des fichiers seuls prennent plus de 8 secondes à charger, ce qui ralentit toute la page.

Dans un tel cas, comme ci-dessus, vous devez regarder attentivement vos photos. En cliquant sur la demande correspondante, vous pouvez généralement voir dans un diagramme en cascade quels sont exactement les fichiers concernés. Il est ainsi beaucoup plus facile de rechercher des dynamomètres de charge.

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

Conseil n° 6 : Suivi de l'acheminement

Un diagramme de cascade vous 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 demandes avec transmission sont généralement surlignées en couleur. Le diagramme vous donne également des informations sur la mise en place de la transmission et sur sa destination.

WordPress  optimiser Identifier l'expédition
Cette page comporte plusieurs 302 redirections à la suite.

Ainsi, grâce à un diagramme en cascade, vous pouvez voir d'un seul coup d'œil combien et quelles redirections ont été définies. D'ailleurs, cela permet également de détecter les boucles de transfert après une modification de l'ADN. Grâce au marquage jaune, nous avons déjà pu détecter plusieurs fois des redirections inutiles, voire nuisibles.

Les lignes jaunes indiquent l'acheminement.

Conseil #7 : Détecter les erreurs en un coup d'œil

Il arrive parfois que des éléments d'une page web ne soient pas rendus correctement. Cela peut concerner 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 éjecte une erreur 404.

Dans ce cas, le diagramme en cascade éjecte un message d'erreur et marque en rouge la ligne contenant la requête correspondante. Le diagramme indique également le type d'erreur et la ressource qui produit l'erreur.

Les lignes rouges indiquent les erreurs lors du rendu de la page.

Avec le Fiche de fraude tous les conseils en vue

Un diagramme de chute d'eau est probablement l'évaluation la plus précieuse que vous puissiez obtenir pour vos WordPress pages. Il combine diverses données que vous devez surveiller en tant que propriétaire du site : Les temps de chargement, l'ordre de rendu et les messages d'erreur. Grâce aux conseils de cet article, vous reconnaîtrez rapidement et efficace là où il y a encore des possibilités d'amélioration :

  • La chute d'eau est-elle trop longue (plus de 100 demandes) ?
  • La valeur maximale de l'axe X est-elle trop grande (supérieure à 10) ?
  • Charger des demandes 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 (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) ?

Accordée : La première fois, il vous faudra peut-être plus de temps pour l'analyser. Avec un peu d'expérience, cependant, les diagrammes en cascade vous permettent de mieux comprendre vos WordPress projets et de les optimiser de manière plus approfondie.

RAIDBOXER de la première heure 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

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .