Webpagetest.org est probablement le meilleur et le plus complet des outils gratuits pour mesurer le temps de chargement de tes pages. Malheureusement, il fournit des données très nombreuses et très complexes. Je te montre aujourd'hui ce que tu dois régler, comment mettre de l'ordre dans la salade de données et de quelles valeurs caractéristiques tu as besoin pour une analyse professionnelle. Car ce n'est que si tu sais comment tes sites web se chargent que tu peux les optimiser au maximum.

Ton site web doit être sûr. Et rapide aussi. Bien sûr, car beaucoup de choses dépendent du temps de chargement : le taux de conversion, le sentiment de sécurité de la personne devant le terminal et le classement Google de ton offre. Mais beaucoup n'arrivent même pas à déterminer correctement le temps de chargement de leur propre site web.

Par exemple, certains ne savent pas quels outils utiliser pour analyser correctement leur site web. Ou alors, ils ne savent pas quels réglages ils doivent effectuer pour obtenir de bons résultats. Pour que tu ne fasses pas les mêmes erreurs, je te montre aujourd'hui comment obtenir un aperçu rapide et pertinent de ton site web grâce au meilleur outil de mesure gratuit (selon nous). Tu sauras ainsi exactement à quelle vitesse ton site web se charge et si tu dois l'optimiser et où.

Pour comprendre exactement comment fonctionnent les différentes étapes de l'analyse, je te conseille de regarder les jeux de données liés aux endroits importants ou d'analyser ton propre site web en parallèle. Car : mettre de l'ordre dans la salade de données n'est pas si simple. Mais en récompense de tes efforts, tu obtiendras les meilleures données que tu aies jamais collectées sur ton site web. Et surtout si tu travailles sur commande ou si tu gagnes de l'argent avec tes projets WordPress, l'effort en vaut vraiment la peine.

Webpagetest est le meilleur outil que nous connaissons

Il faut bien l'avouer : Nous louons excessivement webpagetest.org dans cet article. Peut-être trop, mais pas à tort. Car Webpagetest est le seul outil que nous connaissons qui te permet de déterminer de manière fiable le temps de chargement absolu et perçu de ton site web. Et ce, gratuitement. Pas de barrière payante, pas de modèle d'abonnement, juste des données précieuses et une API qui te permet d'automatiser le tout : c'est ainsi que cela doit être.

Pour être complet, tu peux aussi obtenir de bons résultats avec Pingdom et GTmetrix. Mais pas aussi bien qu'avec Webpagetest. Bien sûr, cela ne signifie pas que tu ne peux et ne dois pas vérifier tes résultats avec plusieurs tests dans différents outils. Et cela ne signifie pas non plus que tu ne dois pas mesurer avec Pingdom ou GTmetrix. Je te conseille seulement de jeter un coup d'œil à Webpagetest.

C'est presque devenu un mantra chez nous : Pour mesurer le temps de chargement de ton site web, des outils comme Google PageSpeed Insights ne suffisent pas. Ils ne font que déterminer le potentiel de performance de ton site. Ces données sont bien sûr précieuses - du point de vue de la performance et du SEO - mais elles ne te permettent tout simplement pas de savoir ce qui se passe réellement lorsque ton site est consulté.

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.

Webpagetest était à l'origine un projet AOL et n'était destiné qu'à un usage interne. Mais en 2008, le programme est devenu un logiciel open source et est aujourd'hui principalement géré et développé par Google. Toute la documentation de Webpagetest se trouve sur GitHub et peut également être téléchargée et utilisée localement.

Alors que PageSpeed Insights te montre où se trouvent les potentiels d'optimisation de ton site web, Webpagetest peut faire beaucoup plus. Car il te montre non seulement comment tu peux encore améliorer ton site web, mais aussi directement quel est l'impact de tes mesures d'optimisation sur le temps de chargement de ton site web.

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 que cela ne te décourage pas ! Dans ce cas, la complexité est une bonne chose. Car cela signifie que tu obtiendras d'excellentes données sur ton site web. Et même en tant que première utilisation de l'outil, tu obtiendras assez rapidement les informations pertinentes.

Et ce, en quatre étapes :

Étape 1 : régler les paramètres de test

Étape 2 : Avoir une vue d'ensemble

Étape 3 : Analyse détaillée

Étape 4 : Analyse du temps de chargement ressenti

É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 avec lequel le test doit être effectué
• le navigateur avec lequel tu veux faire le test
• les paramètres de test avancés, dont je parlerai plus en détail dans un instant

Le serveur que tu choisis pour le test simule un appel au site web à partir de là. Si tu choisis le serveur par défaut aux États-Unis, le résultat du test correspondra à un appel de page depuis le Texas. Mais dans la plupart des cas, ce n'est pas forcément ce que tu souhaites. C'est pourquoi ce paramètre est très important. Il peut en effet fausser considérablement le résultat global et doit être réglé 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 tu veux savoir comment est perçu le temps de chargement de ton site, l'emplacement du serveur doit correspondre le plus possible à l'emplacement typique des appels. Pour un blog allemand, cela signifie que tu dois choisir un serveur en Allemagne, par exemple à Francfort.

Si tu veux savoir ce qu'une mesure d'optimisation a apporté, le site du serveur que tu utilises n'a en principe aucune importance. La seule chose importante est que tu dois utiliser le même emplacement de serveur pour le test avant et après l'optimisation. Sinon, tu ne peux pas comparer correctement les données de mesure. Bien sûr, je recommande également un serveur de test allemand. Il donne tout simplement les résultats les plus réalistes.

Le navigateur utilisé

Webpagetest propose de nombreuses options de configuration pour simuler certaines techniques de transmission et certains navigateurs. Tu peux par exemple définir que le site web doit être chargé via une connexion 3G et Firefox. Mais pour commencer, il suffit de choisir le navigateur que ton groupe cible utilise le plus souvent.

Tu peux trouver des informations à ce sujet dans Google Analytics ou Piwik, par exemple. Raidboxes est majoritairement visité via Chrome.

Très important : les paramètres avancés déterminent la qualité de tes 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, tu peux par exemple définir que seules certaines valeurs doivent être affichées, ou que la mesure s'arrête automatiquement après un certain temps. Et ici, il y a deux paramètres qui sont particulièrement importants pour obtenir des données relativement complètes et fiables : le "nombre de tests à exécuter" et le "Repeat View".

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.

Tu dois également penser à toujours mesurer la version mise en cache de ton site web. Tu peux y parvenir en utilisant l'option Repeat View.

Une fois que tu as saisi ton URL - par exemple https://raidboxes.de - et que tu as défini les paramètres du test (c'est-à-dire le serveur allemand, le navigateur, les 3 répétitions minimum et la vue répétée), tu peux lancer le test. Selon le nombre total de tests en cours, l'analyse peut prendre quelques minutes.

Important : Webpagetest ne teste que le site web accessible par l'URL, pas toute ta présence sur le web. Cela signifie que tu dois tester ta page d'accueil, toutes les pages de destination et, si cela est pertinent, ta liste de produits individuellement.

Dans ce guide, je travaille avec les données de l'analyse de notre page d'accueil, raidboxes.io.

Étape 2 : Obtenir une vue d'ensemble

La première chose que tu vois est le résumé des performances et le point "Opportunités & Expériences". Ici, tu obtiens un aperçu général du potentiel de ton site web dans certains aspects ou si le site web est déjà bien classé dans ces aspects. Webpagetest te donne donc aussi des résultats similaires à ceux de Google PageSpeed Insights .

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

Dans la deuxième zone, les paramètres de test sont à nouveau listés pour le contrôle. Le vert indique un bon niveau d'optimisation, l'orange indique un potentiel d'optimisation utilisable et le rouge indique un besoin d'action urgent.

Tu obtiens ici toutes les données de base pertinentes sur le temps de chargement des pages pour les variantes mises en cache et non mises en cache de ton site Web. La première vue n'est pas mise en cache et la vue répétée est mise en cache. Ce qui est important, c'est que : Dans l'aperçu, Webpagetest ne donne les valeurs que pour l'un des trois tests. Le texte entre parenthèses à côté des étiquettes First View et Repeat View t'indique de quel type il s'agit. Run 2 est donc le résultat du deuxième test.

J'explique maintenant les deux paramètres importants :

• 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'un site Web avant que le contenu ne s'affiche pour la première fois. Jusqu'à ce moment, le site reste entièrement blanc pour l'utilisateur. Cette valeur doit bien sûr être aussi faible que possible. Cette valeur, associée à la durée totale de la construction visuelle de la page, constitue le critère d'évaluation de la vitesse perçue du site. Start Render marque le début du chargement visible de ton site.

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
• L'ensemble du chargement visuel de la page ne devrait pas dépasser cinq secondes.

Bien sûr, ces valeurs ne sont que des règles du pouce. Cela dépend toujours de ton site web : Une page de boutique avec 50 produits - donc 50 images ou plus et des textes de description - se charge naturellement plus lentement qu'une page de mentions légales composée uniquement de texte.

Je ne peux donc que te conseiller : Teste aussi les sites de tes concurrents directs et de tes modèles. Tu obtiendras ainsi des valeurs de comparaison au sein du secteur.

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

Malheureusement, l'aperçu expliqué ci-dessus ne montre que les résultats d'un seul cycle de mesure. Et tu te souviens : des valeurs isolées peuvent t'induire en erreur. C'est pourquoi tu as effectué au moins trois mesures successives pour tester ton site web. Et la moyenne de ces trois mesures est la meilleure approximation que tu puisses obtenir pour ton temps de chargement de page.

Et ne vous inquiétez pas : pour créer les moyennes, il suffit d'appuyer sur un bouton :

Avant de continuer, tu dois d'abord cocher les deux cases First et Repeat en haut.

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.

Comme tu peux le voir, les trois valeurs mesurées (1-3) sont représentées ici dans un graphique. Au-dessus du tracé se trouve la valeur à laquelle le graphique se réfère. Le chiffre dans la colonne Mean décrit maintenant la valeur moyenne du temps de chargement sur les trois mesures. Cette valeur moyenne est l'information la plus précieuse que tu peux obtenir sur ton site web.

D'ailleurs, en appuyant sur Box Repeat, tu peux également obtenir les valeurs du temps de chargement avec et sans cache. Et si tu veux trouver les résultats pour les autres valeurs : cherche simplement via la recherche de ton navigateur (CTRL+F pour les PC et cmd+f pour les Mac) les "First Byte" et "Start Render".

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

Ok, c'était beaucoup d'idées. Et c'était beaucoup d'étapes de travail. Surtout en comparaison avec les méthodes de test simples. Mais l'effort en vaut la peine, car tu l'as vu dans les chiffres des diagrammes : Deux tests avec les mêmes paramètres peuvent être séparés d'une seconde entière. Dans certaines circonstances, c'est donc le hasard qui décide si tu investis du temps et de l'argent dans l'optimisation de tes sites Web ou non. Et justement, si tu gagnes de l'argent avec WordPress, que ce soit avec ta propre boutique, une entreprise de design web ou ta propre agence, tu devrais avoir la meilleure base de données pour prendre une telle décision.

En fait, nous ne sommes pas encore au bout de nos peines. En effet, tu connais maintenant les principales caractéristiques de performance de ton site web, tu sais donc à quelle vitesse ton site web se charge et s'il y a encore un potentiel d'optimisation, mais tu ne sais pas encore exactement où ton site web peut encore être amélioré. Et c'est précisément à cela que sert l'analyse détaillée.

Étape 3 : Analyse détaillée

L'aperçu t'en dit déjà beaucoup sur ton site web. Tu peux voir s'il y a encore un potentiel d'amélioration dans certains domaines, à quelle vitesse ton site web se charge réellement et s'il ne pourrait pas se charger un peu plus rapidement. Mais tu ne peux pas encore identifier les causes des problèmes. Tu les trouveras dans les rapports détaillés :

• les diagrammes de la cascade
• l'analyse du potentiel

Les diagrammes en cascade énumèrent chaque requête HTTP qu'un navigateur envoie au serveur Web. A première vue, ces diagrammes semblent très complexes et peu clairs. Mais si tu sais comment faire, tu peux obtenir beaucoup de détails sur ton site Web à partir d'un diagramme en cascade en un seul coup d'œil. Nous te montrons ici comment lire correctement les diagrammes en cascade et comment les utiliser pour optimiser encore plus ton site Web.

La règle de base est qu'un site rapide a un diagramme en cascade court avec peu de requêtes courtes. Cela signifie que la longueur du graphique et la longueur des barres dans chaque ligne sont particulièrement pertinentes.

Dans la revue de performance, tu trouveras des informations détaillées sur le degré d'optimisation de la performance de ton site web. Cette revue détaillée contient

• la check-list d'optimisation, à trouver sous l'option de menu "Optimisation".
• la ventilation détaillée du test de performance

Dans la liste de contrôle d'optimisation, tu trouveras les différents critères d'évaluation, chacun étant appliqué à chacune des demandes HTTP. Une coche verte signifie que l'exigence est remplie, un triangle jaune marque un besoin d'amélioration, une croix rouge l'absence de la mesure d'optimisation proposée.

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

Tu devras consacrer du temps à ces évaluations détaillées, mais elles te permettront de te faire une idée détaillée de ton site web 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 à présenter gratuitement le temps de chargement ressenti de ton site. Tu peux regarder une vidéo du chargement de la page en utilisant la fonction Filmstrip View. Tu peux ainsi voir exactement ce que l'on voit pendant le chargement et à quel moment, et tu peux encore mieux évaluer si et comment ton site web doit être optimisé.

Le temps de chargement ressenti est probablement le paramètre le plus important de ton temps de chargement de page. Il influence le fait que ton site soit ou non quitté prématurément, la probabilité de conversion et l'expérience globale de ton site. Pour les boutiques en particulier, la vitesse perçue du site est donc une valeur de référence importante. Bien entendu, le temps de chargement ressenti doit toujours être aussi faible que possible.

En plus du film Strip View, tu devrais te souvenir de ce qui suit :

Le film Strip View te montre à un dixième de seconde près à quoi ressemble ton site web et quels sont les processus en cours à ce moment-là. Souvent, il ne se passe rien pendant plusieurs secondes, et d'un seul coup, le site est presque identique à l'état final. On a donc l'impression que le site web a fini de se charger pendant ce laps de temps. Ou alors, on a déjà l'impression de pouvoir interagir avec le site.

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

Ok, après avoir lu cet article, tu devrais maintenant être en mesure de choisir les bons paramètres pour un test de webpage. Maintenant, tu devrais aussi savoir quels indicateurs tu dois interpréter et comment éviter les erreurs d'interprétation dues aux valeurs aberrantes. Tu sais également où trouver des informations détaillées sur ton site web et comment déterminer et afficher le temps de chargement ressenti de ton site web.

Tu connais ainsi les bases importantes pour obtenir un aperçu vraiment complet de ton site web. Et tu sais où trouver les informations qui te permettront de donner vie aux résultats des mesures et d'en tirer des conclusions pertinentes pour ton site.

Mais pourquoi était-ce important ? C'est simple : sans une bonne mesure de l'état actuel de ton site web, tu ne peux pas évaluer correctement la manière dont ton site web se charge actuellement. Et d'autre part, il te manque des informations pour optimiser le temps de chargement.

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