Ces deux fonctions de WebPagetest que vous ne connaissiez pas encore - mais que vous devriez utiliser régulièrement

Jan Hornung Dernière mise à jour le 21.10.2020
6 Min.
Comparer les sites web avec Webpagetest

Webpagetest.org est probablement le meilleur outil gratuit pour mesurer le temps de chargement de votre page. Parce que le WebPagetest est incomparablement plus puissant que la concurrence directe. Et ce, grâce à deux fonctions principales : La possibilité de comparer les sites web et la comparaison à long terme.

Cet article fait partie d'une série sur la mesure et l'évaluation du temps de chargement de vos pages web. Nous l'avons montré dans les articles précédents :

Aujourd'hui, je vais vous montrer deux fonctionnalités de Webpagetest que vous ne connaissiez probablement pas encore. Parce que l'outil est particulièrement adapté aux comparaisons de performances et à une évaluation continue du temps de chargement de votre page.

Aujourd'hui, je vais donc vous montrer

Autres paramètres importants - Indice de vitesse, éléments DOM et coûts

En plus des valeurs standard - telles que Start Render, Document Complete, etc. - Webpagetest fournit également d'autres données clés utiles qui vous permettent d'évaluer l'efficacité de votre site. Ces valeurs sont importantes pour que vous puissiez interpréter correctement les résultats de l'outil.

Exemple de résultat d'un test de page web montrant les valeurs de caractéristiques étendues importantes
Exemple de résultat d'un test de page web. L'indice de vitesse, le nombre d'éléments DOM et le nombre de requêtes sont trois indicateurs importants pour la performance globale de votre site.

Éléments DOM : Un élément DOM est, en gros, un élément HTML. Moins votre navigateur a d'éléments à charger, plus votre page est mince et rapide. Cependant, le nombre d'éléments DOM n'est qu'une indication du temps de chargement de la page. En apportant des modifications à Plugins, mais surtout à Theme, le nombre d'éléments DOM peut être sensiblement réduit.

Extrait du code source d'un billet de blog RAIDBOXES
Chaque élément du corps HTML qui est entouré de crochets est un élément DOM.

Demandes : Cette valeur décrit le nombre de requêtes HTTP individuelles que votre navigateur doit adresser au serveur web. Les éléments individuels tels que les fichiers CSS, les fichiers JavaScript ou les images sont demandés via une requête HTTP. Ici aussi, la règle suivante s'applique en théorie : moins il y a de demandes, mieux c'est. Au fait, le diagramme en cascade de votre page vous donne toujours le meilleur aperçu des requêtes HTTP qui sont chargées.

Dans la pratique, cependant, le nombre spécifique de demandes HTTP ne joue pas un rôle aussi important. Du moins, pas si votre site est crypté en SSL et fonctionne sur un serveur avec HTTP/2. Parce qu'alors, plusieurs demandes peuvent être exécutées et chargées en même temps.

Indice de vitesse : Cet indice est calculé par Webpagetest et est un indicateur du temps de chargement des pages perçu. La valeur décrit une valeur en millisecondes - les valeurs faibles sont meilleures que les valeurs élevées - qui indique la rapidité et l'efficacité avec lesquelles le contenu visible de votre page est chargé. Fondamentalement, Webpagetest détermine l'expérience de l'utilisateur par le biais de captures d'écran de votre page et la mesure avec une valeur temporelle. Au cas où vous seriez intéressé : Webpagetest a également formulé une équation pour cette.

Base de calcul de l'indice de vitesse
L'indice de vitesse de Webpagetest est affiché et calculé comme une zone. Plus le contenu de votre page est chargé rapidement, plus la zone et donc l'indice de vitesse sont réduits. Si les détails vous intéressent : Webpagetest répertorie ici toutes les informations sur le calcul de l'indice de vitesse.

L'indice de vitesse est le mieux adapté aux comparaisons. Si une mesure d'optimisation apporte une réduction significative de l'indice, elle est généralement réussie et la page est perçue comme plus rapide. Si votre site a un indice de vitesse nettement inférieur à celui de la concurrence, vous pouvez supposer que votre site offre aux visiteurs une meilleure expérience de navigation.

Coût : Cette valeur est plus agréable à avoir. Il indique le coût de votre page lorsqu'elle est chargée via les réseaux mobiles. Les données proviennent de whatdoesmysitecost.com et est une valeur moyenne pour tous les taux des pays énumérés ici. Grâce à cette fonction, vous pouvez consulter le coût du chargement mobile de votre site une fois. Je pense que cette valeur n'est pas vraiment pertinente pour l'optimisation dans la plupart des cas. Veuillez me corriger si je me trompe.

La fonction la plus importante de Webpagetest : Comparer directement plusieurs sites web

Si vous mesurez le temps de chargement de votre page, cela a généralement deux raisons : Soit vous avez fait un changement et vous voulez savoir quelle influence il a sur le temps de chargement, soit vous voulez comparer votre site avec d'autres.

Bien sûr, il faut une valeur de comparaison pour une telle déclaration. Et c'est exactement pour cela que la fonction"Comparaison visuelle" a été créée. Car avec lui, vous pouvez directement comparer le temps de chargement et le comportement de chargement de plusieurs URL.

La fonction de comparaison visuelle vous permet de comparer directement les sites web entre eux.
Vous trouverez la fonction de comparaison directement à droite de l'analyse standard de Webpagetest.

Avec cette fonction, vous pouvez par exemple

  • comparer vos propres pages avec celles du concours
  • vérifier ce que le changement d'hébergeur a apporté
  • tester deux ou plusieurs sous-pages les unes par rapport aux autres
  • vérifier la vitesse de chargement des sous-pages par rapport à la page d'accueil

Pour la comparaison directe, il suffit de nommer les pages, d'insérer les URL et de faire le test avec les paramètres préalablement définis.

À des fins de test, nous comparons deux de nos pages de produits entre elles. Le résultat vous permet de comparer les pages en utilisant plusieurs mesures. La plus descriptive se trouve au début du document de résultat : la vue de la bande de film. Ici, vous pouvez voir quand le visiteur perçoit votre page comme ayant terminé son chargement (la mesure correspondante est appelée Visuellement complète).

La valeur de référence peut également être modifiée afin que d'autres valeurs caractéristiques, telles que Pleinement chargé et Document complet, puissent également être affichées.

Résultat, si vous comparez deux sites web sur Webpagetest
La métrique la plus descriptive est présentée dès le début : The Filmstrip View. Vous pouvez toujours le configurer via les paramètres en bas à droite. Les diagrammes des chutes d'eau peuvent être commutés d'avant en arrière grâce au curseur situé à gauche au-dessus des diagrammes.

Vous trouverez ci-dessous quatre diagrammes à barres qui vous montrent comment les pages testées se comportent en termes de temps de chargement perçu, les points les plus importants du temps de chargement, le nombre de requêtes HTTP et la taille de la page.

Grâce à ces mesures, vous pouvez voir d'un seul coup d'œil laquelle des pages testées se charge le plus rapidement, est la plus légère et offre une meilleure expérience au visiteur.

Pour les utilisateurs de Google, Webpagetest offre également la possibilité de faire des comparaisons à long terme

Si vous vous connectez à Webpagetest avec votre compte Google, les tests individuels sont enregistrés. Vous avez ainsi la possibilité de consulter tous les tests de l'année écoulée et de les comparer entre eux.

Comparaisons à long terme dans Webpagetest pour comparer plusieurs versions d'un site web
Notre page web teste l'histoire des sept derniers jours. Chaque fois que vous vous connectez avec votre compte Google, vos tests sont enregistrés et peuvent être consultés par la suite.

Cet aperçu est extrêmement pratique grâce à deux fonctions : vous pouvez appeler les données historiques des tests en cliquant sur l'URL. Cela signifie que vous pouvez voir les résultats complets de tous les tests de l'année passée.

Vous pouvez également noter des tests individuels et les comparer entre eux pour avoir un aperçu rapide de l'évolution de vos pages.

Conclusion : Webpagetest est beaucoup plus puissant que les autres outils gratuits

La comparaison directe de plusieurs pages est certainement la fonction la plus puissante de Webpagetest. Il vous permet de visualiser votre site par rapport à la concurrence, aux modèles ou aux références du secteur. Les résultats que vous obtenez sont - selon les normes de webpagetest - également bien préparés et faciles à comprendre.

L'analyse des séries chronologiques vous permet également d'obtenir une image complète de l'évolution du temps de chargement de votre page. Vous pouvez donc voir exactement quelles mesures d'optimisation ou quels changements ont affecté votre page, son temps de chargement et l'expérience de l'utilisateur.

Grâce à ces deux fonctions, vous pouvez saisir et, surtout, analyser toutes les modifications pertinentes apportées à vos pages.

Tu connais une autre fonction utile de Webpagetest que nous avons oubliée ? Alors, nous attendons avec impatience tes commentaires !

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 *.