Webpagetest : Domptez le monstre du test et analysez vos sites web

Jan Hornung Dernière mise à jour le 23.01.2020
14 Min.
Webpagetest
Dernière mise à jour le 23.01.2020

WebPagetest est probablement le meilleur et le plus complet des outils gratuits pour mesurer le temps de chargement de vos pages. Malheureusement, il fournit un grand nombre de données très complexes. Aujourd'hui, je vais vous montrer ce que vous devez ajuster, comment mettre de l'ordre dans le chaos des données et quels sont les paramètres dont vous avez besoin pour une analyse professionnelle. Car ce n'est que si vous savez comment charger vos projets clients et vos propres pages que vous pourrez les optimiser.

C'est certainement le cas de son propre camp. Et vite. Bien sûr, car beaucoup dépend du temps de chargement : le taux de conversion, la perception de sécurité de vos visiteurs et le classement de votre offre dans Google. Mais de nombreux WordPress utilisateurs n'arrivent même pas à déterminer correctement le temps de chargement de leur propre page.

Certains exploitants de sites, par exemple, ne savent même pas avec quels outils ils peuvent analyser leur site correctement. Ou bien ils ne savent pas quels réglages ils doivent faire pour obtenir de très bons résultats. Pour éviter de faire les mêmes erreurs, je vais vous montrer aujourd'hui comment obtenir un aperçu rapide et significatif de votre site avec le (à notre avis) meilleur outil de mesure gratuit qui soit. Vous savez donc exactement à quelle vitesse votre site se charge et si et où vous devez l'optimiser.

Afin de comprendre exactement comment fonctionnent les différentes étapes de l'analyse, je vous conseille d'examiner les ensembles de données liés aux points importants ou d'analyser votre propre site en parallèle. Parce que : mettre de l'ordre dans le chaos des données n'est pas si facile. Mais en récompense de cet effort, vous recevrez certaines des meilleures données que vous ayez jamais collectées sur votre site. Et surtout si vous travaillez pour un client ou si vous gagnez de l'argent avec vosWordPress projets WP, l'effort en vaut la peine.

Webpagetest est le meilleur outil que nous connaissons

Accordée : Nous louons webpagetest.org dans cet article jaillissant. Peut-être trop, mais pas sans raison valable. Car Webpagetest est le seul outil connu qui vous permet de déterminer de manière fiable le temps de chargement absolu et perçu de votre page. Et tout cela pour rien. Pas de barrière de paiement, pas de modèle d'abonnement, simplement des données précieuses et un APIqui vous permet d'automatiser le tout : c'est comme ça que ça devrait être.

Par souci d'exhaustivité, permettez-moi de dire que vous aussi Le royaume des pins et GTmetrix obtenir de bons résultats de tests. Mais pas aussi bien qu'avec Webpagetest. Cela ne signifie pas, bien sûr, que vous ne pouvez pas et ne devez pas étayer vos résultats par des tests multiples dans différents outils. Et cela ne signifie pas qu'il ne faut pas mesurer avec Pingdom ou GTmetrix. Je suis le seul à pouvoir vous recommander de consulter Webpagetest au moins une fois.

C'est presque devenu un mantra chez nous : Pour mesurer le temps de chargement de votre page, des outils tels que Google PageSpeed Insights pas à l'extérieur. Parce qu'elles ne déterminent que le potentiel de performance de votre site. Ces données sont bien sûr toujours précieuses - du point de vue des performances et du référencement - mais ne vous permettent tout simplement pas de tirer des conclusions sur ce qui se passe réellement lorsqu'un visiteur visite votre site.

C'est ce que vous voulez savoir. Et c'est exactement ce que vous devez savoir pour déterminer si une mesure d'optimisation est efficace.

Malheureusement, Webpagetest ne fournit pas seulement des données très bien préparées, mais aussi des résultats de tests très complets. Aujourd'hui, je vais donc vous montrer comment utiliser Webpaget et comment interpréter les résultats de manière fondamentale.

Dans la section suivante, je vais brièvement présenter quelques informations générales sur cet outil. Si vous n'êtes pas intéressé, sauter Faites juste votre part.

Webpagetest : Le grand frère de Google PageSpeed Insights

Webpagetest était à l'origine un projet d'AOL et était uniquement destiné à un usage interne. En 2008, cependant, le programme est devenu un logiciel libre et est maintenant Principalement maintenu et développé par Google. La documentation complète de Webpagetest peut être consultée à l'adresse suivante GitHub et peut également téléchargé et utilisés localement.

Si PageSpeed Insightscela montre où se situe le potentiel d'optimisation de votre site, Webpagetest peut faire beaucoup plus. Parce qu'il vous montre non seulement comment vous pouvez améliorer votre site, mais aussi directement quels sont les effets de vos mesures d'optimisation sur le temps de chargement de votre site.

Contrairement à Pingdom et GTmetrix, aucune entreprise derrière Webpagetest ne veut vendre un service payant (ok, sauf Google, mais au moins le service n'est pas vendu directement). En fait, on pourrait dire que webpagetest fait partie du plan de Google pour rendre le web plus rapide dans l'ensemble. Tout ce que l'on veut pour évaluer les efforts de Google dans ce contexte.

En 4 étapes pour des données de temps de chargement vraiment significatives

Oui, Webpagetest est plus complexe que d'autres outils. Ne laissez pas cela vous décourager ! Dans ce cas, la complexité est bonne. Parce que cela signifie que vous obtenez de très bonnes données de votre site web. Et même en tant qu'utilisateur débutant, vous pouvez obtenir les informations pertinentes assez rapidement.

Pour ce faire, il faut suivre les quatre étapes suivantes :

Première étape : Définir les paramètres des tests

Deuxième étape : fournir une vue d'ensemble

Troisième étape : Analyse détaillée

Quatrième étape : Analyse du temps de chargement perçu

Étape 1 : Définir les paramètres du test

Webpagetest offre des paramètres très fins pour tester votre site web. Quatre de ces paramètres sont particulièrement importants pour obtenir de bons résultats de mesure :

  • le serveur à tester avec (1)
  • le navigateur à tester avec (2)
  • les paramètres de test avancés, que je vais détailler dans un instant (3)
Page d'accueil de Webpagetest
Voici à quoi ressemble la page d'accueil de Webpagetest. Elle est donc un peu plus complexe que celles de Pingdom ou de GTmetrix.

Le serveur que vous choisissez pour le test simule un utilisateur qui accède à la page à partir de là. Si vous sélectionnez le serveur par défaut aux États-Unis, le résultat du test pour un appel de page depuis le Texas sera affiché. Mais dans la plupart des cas, ce n'est pas nécessairement ce que vous voulez. Cette attitude est donc très importante. En effet, elle peut fausser massivement le résultat global et doit être adaptée en conséquence, en fonction de l'application.

Les deux demandes les plus courantes sont :

  1. Détermination du temps de chargement pour un utilisateur de votre groupe cible
  2. Comparaison des temps de chargement après une mesure d'optimisation

Si vous voulez savoir comment vos visiteurs perçoivent le temps de chargement de la page, l'emplacement du serveur doit correspondre le plus possible à l'emplacement d'un utilisateur type. Pour un blog dont les lecteurs sont principalement européens, cela signifie que vous devez choisir un serveur en Europe.

Si vous voulez savoir quelle mesure d'optimisation est nécessaire, alors en principe, l'emplacement du serveur que vous utilisez n'a pas d'importance. La seule chose importante est la suivante : vous devez utiliser le même emplacement de serveur pour le test avant et après l'optimisation. Sinon, vous ne pouvez pas comparer correctement les données mesurées. Bien sûr, je recommande également un serveur de test européen pour ce test. Elle fournit simplement les résultats les plus réalistes.

Webpagetest : Carte pour la sélection du serveur de test sur Webpagetest.org
Outre la sélection d'une liste, vous avez également la possibilité de sélectionner le serveur de test via une carte. Vous pouvez également voir tous les serveurs de test en un coup d'œil.

Le navigateur utilisé

Webpagetest offre de nombreuses options de réglage pour simuler certaines techniques de transmission et certains navigateurs. Par exemple, vous pouvez définir que la page doit être chargée via une connexion 3G et Firefox. Pour commencer, il suffit toutefois de choisir le navigateur que votre groupe cible utilise le plus souvent.

Vous pouvez trouver des informations à ce sujet dans Google Analytics ou Piwik, par exemple.RAIDBOXES

Extrait des navigateurs utilisés par les visiteurs de raidboxes.fr. Ils servent de modèle pour les paramètres de Webpagetest.
Les navigateurs les plus utilisés sur raidboxes.fr. Donc, pour une analyse dans Webpagetest, je testerais principalement le Chrome. Les résultats pour Firefox et Safari, d'autre part, sont bien sûr également intéressants.

Très important : les paramètres avancés déterminent la qualité de vos données de mesure au final !

En plus des deux paramètres qui déterminent la manière dont le test est effectué - c'est-à-dire l'emplacement du serveur et le navigateur utilisé - Webpagetest offre également la possibilité de définir ce que le test doit produire à la fin. Dans les paramètres avancés, vous pouvez définir, par exemple, que seules certaines valeurs doivent être émises ou que la mesure doit s'arrêter automatiquement après un certain temps. Et ici, il y a deux paramètres qui sont particulièrement importants pour obtenir des données raisonnablement complètes et fiables : Le "Nombre de tests à effectuer" et la "Vue répétée".

En principe, vous devez toujours mesurer plus d'une fois lorsque vous mesurez le temps de charge. Sinon, vous risquez de mesurer des valeurs aberrantes et de rechercher un problème qui n'existe pas. Et croyez-moi, nous avons déjà vu cela se produire plusieurs fois. Je recommande au moins trois tests consécutifs.

Vous devez également vous rappeler de toujours mesurer la version en cache de votre site. Vous pouvez y parvenir grâce à l'option Répéter la vue.

Paramètres avancés de Webpagetest
C'est dans les paramètres avancés de Webpagetest que réside la véritable magie de l'outil. Les données que vous obtiendrez ne seront vraiment intéressantes que si vous sélectionnez au moins 3 tests ici et que vous incluez également la vue répétée.

Avez-vous votre URL - par exemple https://raidboxes.io - et définissez les paramètres du test (c'est-à-dire le serveur europ, le navigateur, le minimum de 3 répétitions et la vue de répétition), vous pouvez lancer le test. En fonction du nombre d'autres utilisateurs qui testent actuellement leurs pages, l'analyse peut prendre quelques minutes.

Important : Webpagetest ne teste que la page accessible sous l'URL, et non l'ensemble de votre présence sur le web. Cela signifie que vous devez tester individuellement votre page d'accueil, toutes les pages de renvoi et, le cas échéant, votre présentation de produit.

Dans ce guide, je travaille avec les données issues de l'analyse de notre page d'accueil, raidboxes.io. Cela signifie que vous pouvez recréer tout ce qui est expliqué ici en tête à tête dans webpagetest.org. Il suffit de cliquer ici et vous recevrez les résultats de l'analyse dès la fin décembre 2016.

Étape 2 : Obtenir une vue d'ensemble

La première chose que vous voyez est la vue d'ensemble du temps de chargement des pages. Elle est divisée en trois domaines :

  • les paramètres d'essai et les résultats des analyses potentielles (1)
  • la ventilation des principales caractéristiques (2)
  • l'aperçu de la structure des pages (3)
Les résultats généraux du Webpagetest
Aperçu des premiers résultats de webpagetest.org

(1) Plus il y a de vert, mieux c'est

Dans la première section, les paramètres de test sont à nouveau listés à des fins de vérification. Si vous découvrez une autre erreur ici, répétez simplement le test. Vous verrez également le résultat de l'analyse du potentiel. Webpagetest vous donne également les résultats de Google PageSpeed Insights éteint. Si vous pouvez faire face à la présentation spartiate de Webpagetest, dualso peut être réglé sur PageSpeed Insights ...de s'en passer.

Webpagetest utilise un niveau scolaire et un code de couleur. A est la meilleure note, F la pire. Le vert indique un bon degré d'optimisation, l'orange indique un potentiel d'optimisation utilisable et le rouge indique un besoin urgent d'action.

(2) Le plus tôt sera le mieux

Dans la deuxième section des résultats, vous trouverez toutes les données clés pertinentes concernant le temps de chargement de votre page pour les variantes en cache et en clair de votre page. L'important, c'est que : Dans l'aperçu, Webpagetest n'affiche que les valeurs d'un des trois tests. L'aperçu situé juste à côté des étiquettes Première vue et Répétition de la vue vous indique de laquelle il s'agit. Le deuxième essai, par exemple, est le résultat du deuxième essai.

Explication des résultats individuels de Webpagetest
Malheureusement, cet aperçu n'est disponible que pour les résultats de mesures individuelles, c'est-à-dire les essais individuels. Pour les valeurs vraiment précieuses, il faut aller un peu plus loin. Je vous expliquerai comment cela fonctionne dans un instant.

Cinq valeurs sont particulièrement importantes à cet égard :

  • Temps de chargement : Le temps que prend votre page pour que l'utilisateur sente que la page est entièrement chargée. Le temps de chargement est le temps de chargement total perçu de votre page.
  • Premier octet: temps nécessaire pour que le premier octet de données soit transmis entre le client et le serveur web. Cette valeur devrait, si possible, être inférieure à 200 millisecondes et constitue un indicateur important de la performance de votre hébergement.
  • Start Render : Cette valeur décrit le temps de chargement d'une page jusqu'à ce que le contenu soit affiché pour la première fois au visiteur. Jusqu'à ce point, la page reste entièrement blanche pour l'utilisateur. Cette valeur doit bien entendu être aussi faible que possible. Avec le temps de chargement (ou document complet), cette valeur constitue la norme d'évaluation de la vitesse perçue du site web. Début Le rendu marque le début du chargement visible de votre page, Document Compléter la fin.
  • Document complet : cette valeur est identique à celle du temps de chargement.
  • Fully Loaded : cette valeur indique que la page est entièrement chargée, avec tous les scripts et éléments. Il décrit le temps de chargement technique total de la page. Cela n'a pas d'importance pour le visiteur. Ce qui est vraiment décisif, c'est avant tout le temps de chargement perçu.

La règle suivante s'applique à toutes ces valeurs : plus c'est petit, mieux c'est. A titre indicatif, vous pouvez vous en souvenir :

  • le temps nécessaire au premier octet doit être inférieur à 200 millisecondes
  • Début Le rendu ne doit pas durer plus de 2,5 secondes
  • Le document complet ne doit pas durer plus de cinq secondes

Bien sûr, ces valeurs ne sont que des règles empiriques. Cela revient toujours à votre côté : Une page de boutique contenant 50 produits - c'est-à-dire 50 images ou plus et des textes de description - se charge naturellement plus lentement qu'une page d'impression composée uniquement de texte.

Je ne peux donc que deviner : Testez également les sites de vos concurrents directs et de vos modèles. Ainsi, vous recevrez des valeurs comparatives au sein de l'industrie.

Calcul des valeurs moyennes - Il est temps de passer aux choses sérieuses

Malheureusement, la vue d'ensemble expliquée ci-dessus ne montre que les résultats d'une seule série de mesures. Et vous vous souvenez : les valeurs individuelles et isolées peuvent vous égarer. C'est pourquoi vous avez effectué au moins trois mesures consécutives pour tester votre site. Et les valeurs moyennes de ces trois mesures sont les meilleures approximations que vous pouvez obtenir pour le temps de chargement de votre page.

Et ne vous inquiétez pas : la création des valeurs moyennes ne nécessite qu'une simple pression sur un bouton :

Résultats du test des pages web
En cliquant sur l'option de tracé, Webpagetest calculera les valeurs moyennes de vos résultats de mesure.

Vous obtenez maintenant une quantité de données initialement déroutante à partir de ce que l'on appelle des tracés. Et ce sont exactement les résultats que vous souhaitez. En principe, cette nouvelle vue d'ensemble est la même pour toutes les valeurs. Donc, une fois que vous avez compris comment les lire, ils sont tout sauf confus.

Vue du tracé de la page web
Ces tracés illustrent parfaitement pourquoi il faut toujours prendre plusieurs mesures : Le point de mesure 3 est presque une seconde plus mauvais que le point de mesure 1, c'est pourquoi le calcul de la moyenne est essentiel pour une analyse professionnelle des performances.

Comme vous pouvez le voir, les trois valeurs mesurées (1-3) sont ici représentées dans un diagramme (la différence entre le point de mesure 1 et le point de mesure 3 est particulièrement remarquable !) Au-dessus du graphique se trouve la valeur à laquelle le diagramme se réfère (4). Dans ce cas, le temps de chargement perçu (document complet ou temps de chargement). Le nombre dans la colonne Moyenne décrit maintenant la valeur moyenne du temps de chargement sur les trois mesures (5). Cette moyenne est l'information la plus précieuse que vous pouvez obtenir sur votre site.

Au fait : en cochant la case Répéter, vous pouvez également obtenir les valeurs du temps de chargement avec et sans mise en cache. Et si vous voulez trouver les résultats pour les autres valeurs : il suffit de rechercher "First Byte" et "Start Render" via la recherche de votre navigateur (CTRL+F pour les PC et cmd+f pour les Mac).

Conclusion provisoire : beaucoup de travail pour des données particulièrement précieuses

D'accord, c'était beaucoup de contributions. Et il y a eu beaucoup de pas. Surtout par rapport aux méthodes de test simples. Mais cela en valait la peine, car on pouvait le voir dans les chiffres des diagrammes : Deux tests avec les mêmes paramètres peuvent parfois être séparés d'une seconde entière. C'est donc peut-être le hasard qui décide si vous investissez ou non du temps et de l'argent dans l'optimisation de vos pages. Et surtout si vous gagnez de l'argent avec WordPress votre propre boutique, entreprise de conception de sites web ou agence, vous devriez disposer de la meilleure base de données pour prendre une telle décision.

Mais en fait, nous n'en sommes pas encore à la fin. Parce que maintenant vous connaissez les paramètres de performance les plus importants de votre site, c'est-à-dire la vitesse de chargement de votre site et s'il existe encore un potentiel d'optimisation, mais vous ne savez pas exactement où votre site peut être amélioré. Et c'est exactement à cela que sert l'analyse détaillée.

Étape 3 : Analyse détaillée

L'aperçu vous en dit déjà beaucoup sur votre site. Vous pouvez voir si des améliorations sont encore possibles dans certains domaines, à quelle vitesse votre page se charge réellement et si elle ne pourrait pas se charger un peu plus vite. Cependant, vous ne reconnaissez pas encore les causes de ces problèmes. Mais vous pouvez les trouver dans les rapports détaillés :

Les diagrammes en cascade répertorient toutes les requêtes HTTP qu'un navigateur adresse au serveur web. À première vue, ces diagrammes semblent très complexes et déroutants. Mais si vous savez comment faire, vous pouvez obtenir beaucoup de détails sur votre site à partir d'un diagramme de cascade en un seul coup d'œil. Nous vous montrons ici comment lire correctement les diagrammes de chutes d'eau et comment les utiliser pour optimiser votre site.

En gros, une page rapide comporte un court diagramme en cascade avec peu de demandes courtes. Cela signifie que la longueur du diagramme et la longueur des barres dans les différentes lignes sont particulièrement importantes.

Dans l'évaluation des performances, vous trouverez des informations détaillées sur la façon dont les performances de votre site sont déjà optimisées. Cet examen détaillé contient à nouveau trois éléments :

  • la liste de contrôle de l'optimisation
  • la ventilation détaillée du test de performance
  • le glossaire

Vous devriez d'abord consulter le glossaire lorsque vous analysez votre site avec webpagetest.org pour la première fois. Tous les termes importants de l'évaluation des performances sont expliqués ici.

Extrait du glossaire de Webpagetest.
Malheureusement en anglais, mais Webpagetest explique en fait chaque terme technique en détail.

Dans la liste de contrôle de l'optimisation, vous trouverez les critères d'évaluation individuels qui sont appliqués à chacune des demandes HTTP. Une coche verte signifie que l'exigence est remplie, un triangle jaune indique la nécessité d'une amélioration, une croix rouge l'absence de la mesure d'optimisation proposée.

Un extrait de la liste de contrôle des performances de Webpagetest.
Grâce à la liste de contrôle de l'optimisation, vous pouvez par exemple voir exactement quelles images de votre site ont encore un potentiel d'optimisation, quelles requêtes doivent être encore plus compressées et si votre mise en cache fonctionne correctement.

Enfin, dans la section "Détails", vous trouverez une description des avertissements et des mesures d'optimisation manquantes. Webpagetest décrit pour chaque ressource les optimisations qui sont encore possibles. Dans le cas des images, par exemple, il indique le volume de données pouvant être sauvegardé.

Bien que vous ayez à traiter ces évaluations détaillées pendant un certain temps, vous pouvez les utiliser pour obtenir une image détaillée de votre site et de son potentiel d'optimisation.

Et comme il s'agit fondamentalement des mêmes informations qui sont crachéesPageSpeed Insights, vous pouvez bien sûr simplement effectuer une analyse de PageSpeed en parallèle. Parce que ce test est beaucoup plus agréable et mieux préparé.

Étape 4 : Analyse du temps de chargement perçu

Contrairement à tous les autres tests connus, Webpagetest est le seul qui indique gratuitement le temps de chargement perçu de votre page. Vous pouvez visionner une vidéo de la structure de la page via le film stripview. Vous pouvez ainsi voir exactement ce que vos visiteurs voient et évaluer encore mieux si et comment votre site doit être optimisé.

Webpagetest Trouver Filmstripview
Vous trouverez le film en bande dans l'aperçu de votre résultat de mesure à l'extrême droite. Note : Cette option n'est pas toujours affichée. Pourquoi n'est-ce pas tout à fait clair pour moi. Toutefois, la répétition du test a toujours rendu cette option accessible jusqu'à présent.

Le temps de chargement perçu est probablement le paramètre le plus important du temps de chargement de votre page. Elle influence le fait que vos visiteurs quittent le site plus tôt, la probabilité de conversion et l'expérience globale de votre site. La vitesse perçue du site web est donc un critère important, en particulier pour les magasins. Bien entendu, le temps de chargement perçu doit toujours être aussi court que possible.

En plus de la bande-annonce du film, vous devez vous rappeler ce qui suit :

Représentation schématique du temps de chargement des pages
Le temps total de chargement perçu doit être aussi court que possible. Dans le même temps, il est important que la distance entre T0 et Start Render soit aussi faible que possible. Car l'utilisateur a alors très tôt l'impression que la page s'est complètement chargée, même si elle est loin d'être chargée.

L'affichage par bande de filtre vous montre au dixième de seconde près à quoi ressemble votre page et quels processus sont en cours à un moment donné. Si vous passez le test avec ces donnéesvous verrez que rien ne bouge de ce côté pendant plus de trois secondes. Mais la page est alors presque exactement la même que dans l'état final. L'utilisateur a l'impression que la page est chargée en 3,5 secondes. En d'autres termes, le visiteur a le sentiment qu'il peut interagir avec la page après seulement 3,5 secondes.

Le Filmstrip View est un outil très précieux, en particulier pour hiérarchiser le contenu des pages visibles.

Conclusion : avec ces bases et un peu de pratique, vous aurez un très bon aperçu de votre site

Ok, après avoir lu l'article, vous devriez maintenant pouvoir choisir les bons paramètres pour un test de page web, savoir quelles mesures vous devez interpréter et comment éviter les mauvaises interprétations dues à des valeurs aberrantes. Vous savez également où trouver des informations détaillées sur votre page et comment déterminer le temps de chargement perçu de votre page et comment l'afficher.

Vous connaissez donc les bases importantes pour avoir un aperçu vraiment complet de votre propre site, des sites de vos clients et de tout autre projet web. Et vous savez où trouver les informations qui vous permettront de donner vie aux résultats des mesures et de tirer des conclusions significatives pour votre site.

Mais pourquoi était-ce encore important ? Très simple : sans une mesure raisonnable de l'état réel de votre page, vous ne pouvez pas évaluer correctement la façon dont votre page se charge actuellement. Et deuxièmement, il vous manque des informations pour la Optimisation du temps de chargement.

Vous avez un autre conseil pour utiliser Webpagetest ? Parfait, alors écrivez un commentaire sur ce post !

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