Webpagetest : Domptez le monstre de test et analysez les performances de votre site web

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

Webpagetest.org est probablement le meilleur et le plus complet des outils gratuits pour mesurer le temps de chargement de vos pages. Malheureusement, il fournit beaucoup de données très complexes. Aujourd'hui, je vais vous montrer ce que vous devez régler, comment mettre de l'ordre dans le fouillis de 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 vos projets clients et vos propres pages se chargent que vous pouvez les optimiser en haut.

Votre propre site doit être sécurisé. Et vite. Bien sûr, car beaucoup dépend du temps de chargement : le taux de conversion, le sentiment de sécurité de vos visiteurs et le classement de votre offre dans Google. Cependant, de nombreux utilisateurs de WordPress ne vont même pas jusqu'à pouvoir déterminer correctement le temps de chargement de leur propre page.

Par exemple, certains exploitants de sites ne savent même pas quels outils ils peuvent utiliser pour analyser correctement leur site. Ou bien ils ne savent pas quels réglages ils doivent faire pour obtenir de très bons résultats. Pour que vous ne fassiez pas les mêmes erreurs, je vais vous montrer aujourd'hui comment vous pouvez 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 page se charge et si et où vous devez l'optimiser.

Afin de comprendre exactement comment fonctionnent les différentes étapes d'analyse, je vous conseille de regarder les ensembles de données liés aux points importants ou d'analyser votre propre page en parallèle. Parce que : mettre de l'ordre dans le fouillis de 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 des clients ou si vous gagnez de l'argent avec vos projets WP-WordPress -, l'effort en vaut la peine.

Webpagetest est le meilleur outil que nous connaissons

Certes : Dans cet article, nous faisons l'éloge de webpagetest.org de manière effusive. Peut-être de manière trop effusive, mais pas sans raison. Car Webpagetest est le seul outil que nous connaissons qui vous permette de déterminer de manière fiable le temps de chargement absolu et perçu de votre site. Et ce, tout à fait gratuitement. Pas de barrière de paiement, pas de modèle d'abonnement, juste des données précieuses et une API qui vous permet d'automatiser le tout : c'est comme ça que ça doit être.

Par souci d'exhaustivité, il faut dire que vous obtenez également de beaux résultats de mesure avec Pingdom et GTmetrix. Mais pas aussi bien qu'avec Webpagetest. Bien sûr, cela ne signifie pas que vous ne pouvez pas et ne devez pas valider vos résultats avec plusieurs tests dans différents outils. Et cela ne signifie pas non plus qu'il ne faut pas mesurer avec Pingdom ou GTmetrix. Je suis le seul à pouvoir vous recommander de jeter un coup d'œil à Webpagetest au moins une fois.

C'est presque devenu un mantra chez nous : Pour mesurer le temps de chargement de votre page, des outils comme Google PageSpeed Insights ne suffisent pas. Car ceux-ci ne déterminent que le potentiel de performance de votre page. Bien sûr, ces données sont toujours précieuses - du point de vue des performances et du référencement - mais elles ne vous permettent tout simplement pas de tirer des conclusions sur ce qui se passe réellement lorsqu'un visiteur appelle votre page.

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

Malheureusement, Webpagetest ne fournit pas seulement de très jolies données, mais aussi des résultats de tests très complets. C'est pourquoi je vous montrerai aujourd'hui comment utiliser Webpagetest et comment interpréter les résultats.

Dans la section suivante, je vais brièvement présenter le contexte de l'outil. Si vous n'êtes pas intéressé, sautez cette partie.

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 se trouve sur GitHub et peut également être téléchargée et utilisée localement.

Alors que PageSpeed Insights vous montre où se situe le potentiel d'optimisation de votre site, Webpagetest peut faire bien plus. 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). On pourrait plutôt dire que Webpagetest s'inscrit dans le plan de Google visant à rendre le web plus rapide dans son ensemble. Cependant, vous voulez évaluer les efforts de Google dans ce contexte.

4 étapes pour un chargement vraiment significatif des données temporelles

Oui, Webpagetest est plus complexe que d'autres outils. Mais ne vous laissez pas effrayer par cela ! Dans ce cas, la complexité est une bonne chose. Parce que cela signifie que vous obtenez des données intéressantes sur votre site web. Et même en tant qu'utilisateur débutant, vous pouvez obtenir les informations pertinentes assez rapidement.

Et ce, en quatre étapes :

Étape 1 : Définir les paramètres des tests

Étape 2 : Obtenir 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 à utiliser pour les tests (2)
  • les paramètres de test avancés, dont je parlerai plus en détail dans un instant (3)
Page d'accueil de Webpagetest
Voici à quoi ressemble la page d'accueil de Webpagetest. Il est un peu plus complexe que celui 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 choisissez le serveur par défaut aux États-Unis, le résultat du test vous sera renvoyé pour une visualisation de la page depuis le Texas. Dans la plupart des cas, cependant, ce n'est pas nécessairement ce que vous voulez. Ce cadre est donc très important. Parce qu'il peut fausser massivement le résultat global et doit être fixé en conséquence, selon le cas d'utilisation.

Les deux cas d'utilisation les plus courants 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
En plus d'une sélection par liste, vous avez également la possibilité de sélectionner le serveur de test via une carte. Vous pouvez également voir un aperçu de tous les serveurs de test ici.

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. Par exemple, RAIDBOXES est surtout visité via Chrome.

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 !

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, par exemple, définir que seules certaines valeurs doivent être émises, ou que la mesure doit s'arrêter automatiquement après un certain temps. Et voici 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, il faut toujours mesurer plus d'une fois lors de la mesure du temps de chargement. Sinon, vous courez le risque de mesurer des valeurs aberrantes et de chercher éventuellement un problème qui n'existe pas. Et croyez-moi : nous en avons déjà fait l'expérience à plusieurs reprises. Je recommande au moins trois tests consécutifs.

Vous devez également vous souvenir de toujours mesurer la version en cache de votre page. Vous pouvez le faire en utilisant l'option Répéter la vue.

Paramètres avancés de Webpagetest
Les paramètres avancés de Webpagetest sont là où réside la véritable magie de l'outil. Seulement si vous sélectionnez au moins 3 tests ici et que vous incluez également la vue répétée, les données que vous obtenez seront vraiment intéressantes.

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

Il est important de noter que Webpagetest ne teste que la page qui est accessible sous l'URL, et non l'ensemble de ta présence sur le web. Cela signifie que tu dois tester individuellement ta page d'accueil, toutes les pages de renvoi et, le cas échéant, ton aperçu de produit.

Dans ce guide, je travaille avec les données issues de l'analyse de notre page d'accueil, raidboxes.de. Cela signifie que vous pouvez reproduire tout ce qui est expliqué ici en un à un dans webpagetest.org. Il suffit de cliquer ici et vous obtiendrez les résultats de l'analyse.

Étape 2 : Obtenir une vue d'ensemble

La première chose que vous verrez est l'aperçu du temps de chargement des pages. Il est divisé en trois sections :

  • 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 du test de la page web
Aperçu des premiers résultats de webpagetest.org

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

Dans la première zone, les paramètres de test sont à nouveau listés pour vérification. Si vous découvrez une erreur ici, il vous suffit de répéter le test. Vous verrez également les résultats de l'analyse de potentiel. Webpagetest affiche également les résultats de Google PageSpeed Insights . Si vous êtes satisfait de l'affichage spartiate de Webpagetest, vous pouvez vous passer de PageSpeed Insights .

Webpagetest utilise un niveau scolaire et un code de couleur. A est le meilleur score, F le 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) Plus vite, mieux c'est

Dans la deuxième section des résultats, vous trouverez toutes les données clés pertinentes sur le temps de chargement de votre page pour les variantes en cache et en clair de votre page. Il est important de le noter : Dans l'aperçu, Webpagetest n'affiche que les valeurs d'un seul des trois tests. L'aperçu vous indique quel test se trouve directement à côté des étiquettes Première vue et Répétition de la vue. La deuxième série, par exemple, est le résultat de la deuxième série de tests.

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 faire dans un instant.

Cinq valeurs sont particulièrement importantes ici et maintenant :

  • Temps de chargement : Le temps nécessaire à votre page pour que l'utilisateur ait l'impression que la page est complètement chargée. Le temps de chargement correspond donc au 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 doit, si possible, être inférieure à 200 millisecondes et constitue une indication importante des performances de votre hébergement.
  • Start Render : cette valeur décrit le temps de chargement d'une page jusqu'à ce que le visiteur voit le contenu pour la première fois. Jusqu'à ce moment, la page reste complètement blanche pour l'utilisateur. Bien entendu, cette valeur doit également être la plus faible possible. Avec le temps de chargement (ou document complet), cette valeur constitue le point de référence de l'évaluation de la vitesse perçue du site web. Start Render marque le début du chargement visible de votre page, Document Complete la fin.
  • Document complet : cette valeur est identique à celle du temps de chargement.
  • Complètement chargé: cette valeur s'affiche lorsque la page est complètement chargée avec tous les scripts et éléments. Il décrit le temps total de chargement technique de la page. Cela n'a pas d'importance pour le visiteur. Ce qui est vraiment décisif, c'est 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
  • Le rendu de départ ne doit pas être supérieur à 2,5 secondes
  • Le document complet ne doit pas dépasser cinq secondes

Bien sûr, ces valeurs ne sont que des règles empiriques. Cela dépend toujours de votre page : Une page de magasin contenant 50 produits - c'est-à-dire 50 images et textes descriptifs ou plus - se charge naturellement plus lentement qu'une page d'impression qui ne contient que du texte.

Je ne peux donc que vous conseiller : Testez les sites de vos concurrents directs et de vos modèles. De cette façon, vous obtenez des valeurs comparatives au sein de l'industrie.

Calcul des valeurs moyennes - Il est maintenant 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 mesure. Et vous vous souvenez : des valeurs uniques et isolées peuvent vous égarer. C'est pourquoi vous avez effectué au moins trois mesures consécutives pour le test de votre page. Et les 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 : pour créer les moyennes, il suffit d'appuyer sur un bouton :

Résultats du test de la page web de la parcelle
En cliquant sur l'option de tracé, Webpagetest calcule 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 obtenir. 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 déroutants.

Test de la page web Vue de la parcelle
Ces tracés illustrent parfaitement pourquoi vous devez toujours prendre plusieurs mesures : Le point de mesure 3 est inférieur de près d'une seconde au 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 représentées ici dans un diagramme (remarquable est surtout la différence entre le point de mesure 1 et le point de mesure 3). 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 pour 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 vaut la peine, car vous l'avez vu dans les chiffres des graphiques : Deux tests avec les mêmes paramètres peuvent parfois être séparés d'une seconde entière. Dans certaines circonstances, le hasard décide si vous investissez du temps et de l'argent dans l'optimisation de vos pages ou non. Et surtout si vous gagnez votre argent avec WordPress , que ce soit avec votre propre boutique, une entreprise de conception de sites web ou votre propre agence, vous devriez disposer de la meilleure base de données pour une telle décision.

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 page, donc vous savez à quelle vitesse votre page se charge et s'il y a encore un potentiel d'optimisation, mais vous ne savez pas exactement où votre page peut être améliorée. 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à long sur votre page. Vous pouvez voir si des améliorations sont encore possibles dans certains domaines, à quelle vitesse votre page se charge réellement et si elle pourrait se charger un peu plus vite. Cependant, vous ne serez pas encore en mesure d'identifier les causes des problèmes. Mais vous pouvez les trouver dans les rapports détaillés :

Les diagrammes de la cascade énumèrent 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 extraire beaucoup de détails sur votre site à partir d'une carte de cascade en un seul coup d'œil. Nous vous montrons ici comment lire correctement les cartes de cascades et comment les utiliser pour optimiser votre site.

Fondamentalement, 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'examen des performances, vous trouverez des informations détaillées sur la manière dont les performances de votre site sont déjà optimisées. Cet examen détaillé comporte trois éléments :

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

Si vous analysez votre site avec webpagetest.org pour la première fois, vous devriez d'abord consulter le glossaire. Tous les termes importants de l'examen 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 un besoin d'amélioration et une croix rouge signifie que la mesure d'optimisation proposée est manquante.

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

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

Vous devrez consacrer un certain temps à ces évaluations détaillées, mais avec leur aide, vous pourrez vous faire une idée précise de votre site et de son potentiel d'optimisation.

Et comme il s'agit essentiellement des mêmes informations que celles que PageSpeed Insights diffuse, vous pouvez bien entendu effectuer une analyse de la vitesse de page en parallèle. Parce que ce test est beaucoup plus joli et mieux préparé.

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

Contrairement à tous les autres tests que nous connaissons, Webpagetest est le seul qui affiche gratuitement le temps de chargement perçu de votre page. Le filmstripview vous permet de voir une vidéo du chargement de la page. De cette façon, vous pouvez voir exactement ce que vos visiteurs voient et vous pouvez encore mieux évaluer si et comment votre page doit être optimisée.

Webpagetest Trouver Filmstripview
Vous trouverez le filmstripview dans l'aperçu des résultats de vos mesures à l'extrême droite. Attention : Cette option n'est pas toujours affichée. Pourquoi n'est 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 la mesure la plus importante du temps de chargement de votre page. Elle influence le fait que vos visiteurs quittent la page prématurément, la probabilité de conversion et l'expérience globale de votre page. La vitesse de page perçue est donc un critère important, en particulier pour les magasins. Bien entendu, le temps de chargement perçu doit toujours être aussi faible que possible.

En plus de l'aperçu du film, n'oubliez pas ceci :

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

L'affichage par bandes de filtres vous montre exactement à quoi ressemble votre page et quels processus sont en cours d'exécution à un moment donné. Si vous regardez le test avec ces données, vous verrez que rien ne se passe sur la page pendant plus de trois secondes. Mais ensuite, d'un seul coup, la page est presque exactement la même que dans l'état final. L'utilisateur a donc l'impression que la page a fini de se charger en 3,5 secondes. Ou bien le visiteur a déjà l'impression, au bout de 3,5 secondes, qu'il peut interagir avec la page.

Ainsi, surtout lorsqu'il s'agit de hiérarchiser le contenu des pages visibles, le Filmstrip View est un outil très précieux.

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

Ok, après avoir lu cet article, vous devriez maintenant pouvoir choisir les bons paramètres pour un test de page web, savoir quelles mesures 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 et afficher le temps de chargement perçu de votre page.

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 utiles pour votre site.

Mais pourquoi était-ce encore important ? Tout simplement : 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 d'autre part, vous manquez d'informations pour l'optimisation du temps de chargement.

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

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