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

Jan Hornung Mis à 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 WebPagetest est beaucoup 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 visant à mesurer et à évaluer le temps de chargement de vos pages web. Nous l'avons montré dans les articles précédents :

Aujourd'hui, je vais vous montrer deux fonctions 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.

C'est pourquoi je vais vous montrer aujourd'hui

Autres indicateurs clés - Indice de vitesse, éléments DOM et coût

En plus des valeurs standard - comme 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, qui montre les paramètres étendus importants
Exemple de résultat d'un test de page web. L'indice de vitesse, le nombre d'éléments DOM et le nombre de demandes sont trois indicateurs importants de la performance globale de votre site.

Les éléments du DOM : Un élément DOM est, en gros, un module HTML. Moins votre navigateur a besoin de charger ces éléments, plus votre page sera légère et rapide. Par conséquent, le nombre d'éléments DOM n'est qu'une indication du temps de chargement de la page. Le nombre d'éléments DOM peut être réduit de manière significative en modifiant le Plugins, mais surtout le Theme, .

Extrait du code source d'un article de blogRAIDBOXES
Chaque élément du corps du 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. En théorie, moins il y a de demandes, mieux c'est. Au fait, cela vous donne Diagramme de la cascade votre site a toujours la meilleure vue d'ensemble des requêtes HTTP qui sont chargées.

Dans la pratique, cependant, le nombre réel de demandes HTTP n'est pas si important. Du moins, pas si votre site est crypté SSL et hébergé sur un serveur avec HTTP/2 est en cours. Parce qu'alors plusieurs demandes peuvent être exécutées et chargées simultanément.

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 donc meilleures que les valeurs élevées - qui indique la rapidité et l'efficacité du chargement du contenu visible de votre page. En principe, webpagetest détermine l'expérience de l'utilisateur par le biais de captures d'écran de votre site et la mesure avec une valeur temporelle. Au cas où vous seriez intéressé : Webpagetest a également développé un Équation formulée.

Base de calcul de l'indice de vitesse
L'indice de vitesse de Webpagetest est affiché et calculé sous forme de zone. Plus le contenu de votre page est chargé rapidement, plus la zone est réduite et donc l'indice de vitesse devient plus petit. Si les détails vous intéressent : ici Webpagetest répertorie toutes les informations relatives au calcul de l'indice de vitesse.

L'indice de vitesse est le mieux adapté aux comparaisons. Si une mesure d'optimisation entraîne une réduction significative de l'indice, elle a tendance à être couronnée de succès 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 offrira une meilleure expérience de navigation aux visiteurs.

Coût : Cette valeur est plutôt agréable à avoir. Il indique le coût de votre site lorsqu'il est chargé via les réseaux mobiles. Les données proviennent de whatdoesmysitecost.com et forment une valeur moyenne pour tous les tarifs des pays énumérés ici. Grâce à cette fonction, vous pouvez voir les coûts du chargement mobile de votre site. Cependant, je pense que cette valeur n'est que dans très peu de cas réellement pertinente pour l'optimisation. Veuillez me corriger si je me trompe.

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

Lorsque vous mesurez le temps de chargement de votre page, il y a généralement deux raisons : Soit vous avez fait une modification et vous voulez savoir quel effet elle a sur le temps de chargement, soit vous voulez comparer votre page avec d'autres.

Bien sûr, il faut une valeur comparative pour une telle déclaration. Et c'est exactement ce que la fonction "comparaison visuelle" créé. 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 sites avec ceux de vos concurrents
  • vérifier ce que le changement d'hébergeur a apporté
  • comparer deux ou plusieurs sous-pages entre elles
  • vérifier la vitesse de chargement des sous-pages par rapport à la page d'accueil

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

À des fins de test nous comparons deux de nos pages de produits entre ellesLe résultat vous permet de comparer les pages en utilisant plusieurs mesures. Le plus descriptif se trouve au début du document des résultats : The Filmstrip View. Vous pouvez voir ici quand le visiteur perçoit votre page comme étant entièrement chargée (le paramètre correspondant est appelé "Visuellement complet").

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

Résultat, si vous comparez deux sites web sur Webpagetest
Les mesures les plus frappantes sont présentées dès le début : La vue de la bande de film. Vous pouvez toujours le configurer via les paramètres en bas à droite. Les diagrammes des chutes d'eau peuvent être basculés d'avant en arrière à l'aide du curseur situé à gauche au-dessus des diagrammes.

Vous trouverez ci-dessous quatre autres diagrammes à barres qui vous montrent comment les pages testées se comportent en termes de temps de chargement perçu, de temps de chargement des clés, de nombre de requêtes HTTP et de taille des pages.

Grâce à ces mesures, vous pouvez voir d'un seul coup d'œil quelles sont les pages testées qui se chargent le plus rapidement, qui sont les plus légères et qui offrent une meilleure expérience au visiteur.

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

Lorsque vous vous connectez à Webpagetest avec votre compte Google, chaque test est enregistré. Vous avez donc la possibilité de consulter et de comparer tous les tests de l'année écoulée.

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

Cet aperçu est extrêmement pratique grâce à deux fonctions : vous pouvez accéder aux 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 les différentes épreuves et les comparer entre elles 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. Parce qu'il vous permet de voir votre site par rapport à la concurrence, aux modèles ou aux références de l'industrie. Les résultats que vous obtenez sont - à des fins de test des pages web - é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 enregistrer toutes les modifications pertinentes de vos pages et, surtout, les analyser.

Vous connaissez une autre fonctionnalité utile de Webpagetest que nous avons oubliée ? Alors, nous attendons avec impatience votre commentaire !

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