Comment tester la vitesse de votre site Web

Une étude de Google a révélé que les taux de rebond des sites Web augmentent jusqu'à 31 % des temps de chargement d'une seconde à trois secondes.

D'après mon expérience, les temps de chargement des pages sont l'une des erreurs techniques les plus fréquentes des développeurs Web et les administrateurs Web, en particulier sur les appareils mobiles.

La première étape pour résoudre les erreurs de vitesse de page consiste à comprendre comment les sites Web se chargent et à identifier les mesures les plus critiques, ce qui entraîne des temps de chargement plus rapides.

Comprendre la vitesse des pages : comment les sites Web se chargent

Internet est très compliqué.< /p>

Ainsi, pour simplifier cette explication, nous pouvons décomposer le processus de chargement de page en deux composants essentiels, qui communiquent entre eux.

Clients <> Serveurs

• Clients : appareil Web qui envoie une requête sur Internet à un serveur pour afficher une page Web. Les exemples de clients incluent les appareils informatiques connectés au Wi-Fi, les appareils mobiles connectés aux forfaits de données et les navigateurs utilisés pour exécuter cette fonction.
• Serveurs : un ordinateur qui stocke les adresses Web et tente de rendre les demandes afin que les clients puissent afficher une page Web. Les serveurs peuvent également être appelés DNS (système de noms de domaine), qui héberge toutes les adresses disponibles sur Internet.

Comprendre la relation entre les clients et les serveurs vous aidera à découvrir toute perturbation ou augmentation potentielle de latence qui affectent la vitesse des pages de votre site Web.

Comme tout le monde le sait, la première étape charger une page Web consiste à saisir l'URL. Cette URL envoie une requête à un DNS, qui récupère l'adresse IP unique et traite la requête sur le serveur de l'application Web.

Une fois la requête traitée, le navigateur de l'utilisateur enverra une réponse HTML pour commencer à traiter le Modèle d'objet de document (DOM). Le temps de réception de ces informations est connu sous le nom de temps au premier octet (TTFB) - une métrique de chargement de page vitale.

Une fois que le navigateur aura traité la réponse HTML, il mappera le modèle d'objet DOM et CSS pour exécuter JavaScript.

Avant que le rendu précis d'une page puisse commencer, un navigateur doit rendre tous les éléments CSS et JavaScript, ce qui signifie que s'il existe des scripts de blocage externes, cette ressource devra être téléchargé.

Ensuite, une autre requête entre le navigateur et le serveur doit être faite (augmentation des temps de chargement).

Une fois terminé, un événement de chargement de fenêtre sera déclenché, et la page se chargera complètement au-dessus du pli.

Notez également que les pages avec chargement asynchrone continueront à charger des éléments même après l'exécution des événements de chargement de fenêtre.

Cependant, les temps de chargement de la page seront différents entre les ordinateurs de bureau et les appareils mobiles, en fonction de la compatibilité mobile du site Web et du réseau utilisé par l'appareil pour se connecter à Internet.

Par exemple, Google établit sa référence pour les vitesses de chargement des pages mobiles d'au moins une seconde pour tout le contenu au-dessus de la ligne de flottaison afin que les utilisateurs puissent interagir avec les sites dès que possible.

Étant donné que la latence du réseau sur un réseau 4G consommera à moins 300 millisecondes de temps de chargement de page, vous disposez de 700 millisecondes pour optimiser une page afin de charger le contenu au-dessus de la ligne de flottaison en au moins une seconde.

Atteindre ce benchmark est possible mais difficile.

Alors, pourquoi Google recommande-t-il que les pages se chargent au moins une seconde au-dessus de la ligne de flottaison ?

L'importance de la vitesse du site Web

Depuis Google s'appuie sur une expérience client positive pour conserver sa part de marché, il ne souhaite servir que les sites qui se chargent rapidement et efficacement.

En conséquence, il a tendance à donner la priorité aux pages qui se chargent plus rapidement que les autres. De plus, vos analyses auront tendance à refléter cela, car les pages plus lentes subiront des taux de rebond plus élevés que les pages plus rapides.

Dans l'ensemble, il existe plusieurs raisons pour lesquelles il est essentiel de surveiller la vitesse de votre page :

• Expérience utilisateur : les utilisateurs s'attendent à un chargement rapide des pages sur les appareils mobiles et de bureau. Plus votre page est lente, plus il faut attendre la première interaction et plus votre taux de rebond est élevé. Non seulement cela a un impact sur les statistiques clés des utilisateurs, mais cela peut également diminuer votre taux de conversion et avoir un impact sur les revenus de votre site Web.
• Algorithmes de Google : La recherche montre que Google accorde une importance à la vitesse de la page dans ses algorithmes de classements, notamment sur mobile. On ne sait pas dans quelle mesure cela affecte les classements, mais Google a déclaré qu'il accordait la priorité à des facteurs tels que ses Core Web Vitals (métriques répertoriées ci-dessous).
• Fonctionnalité et traitement : La vitesse de la page est un autre élément important de la fonctionnalité du site Web et peut entraver les processus de base, tels que le chargement des paniers d'achat ou des articles de blog, qui entraînent des taux de rebond élevés.
• Autorité et confiance : Un site Web à chargement rapide communique un certain niveau de confiance et d'autorité, alors qu'un site Web à chargement lent pourrait indiquer que votre site Web est mal construit ou même spammé.

Grâce à ces facteurs, vous ne pourrez pas optimiser la vitesse des pages de votre site Web sans découvrir les problèmes qui l'influencent négativement.

De plus , vous découvrirez que la vitesse des pages diffère selon les appareils et les emplacements, ce qui rend encore plus important le besoin de tests constants.

Considérations lors de l'exécution d'un test de page Web

Tous les tests ou outils de vitesse de page ne fourniront pas les mêmes résultats.

Pour cette raison, équilibrer ces résultats et comprendre les mesures à surveiller vous donnera les résultats les plus impartiaux.

Mise en cache

Tout d'abord, je recommanderais de tester les sites avec la mise en cache activée et désactivée pour voir la différence.

La plupart des outils ignorent généralement la mise en cache, mais d'autres outils comme WordPress vous permet de tester la vitesse des pages avec la mise en cache activée.

Configurez votre mise en cache pour voir si elle interfère avec vos résultats ou les fausse par rapport à ce que vous trouvez sur d'autres outils.

Localisation

De nombreuses personnes ne tiennent pas compte de la localisation lorsqu'elles testent la vitesse des pages, mais les personnes de différents pays et régions connaîtront des temps de chargement différents en fonction de leur réseau et de la proximité du serveur.< /p>

J'ai même vu des gens réduire considérablement les temps de chargement de leur site Web en hébergeant leur site sur un serveur géographiquement plus proche ou en activant un réseau de diffusion de contenu (CDN) - un réseau de serveurs distribués.

Exécuter plusieurs tests

Comme vous le constaterez, chaque test de vitesse de page peut fournir des résultats différents en fonction des anomalies de votre site Web ou de votre réseau.

Pour cette raison, je recommande d'exécuter plusieurs tests sur plusieurs outils pour obtenir les résultats les plus précis de ce que les utilisateurs rencontrent.

Métriques

Enfin, nous devons comprendre les métriques les plus importantes pour nos vitesses de chargement de page.

Ci-dessous, j'en ai décrit quelques-unes qui influencera le plus la vitesse de chargement des pages.

Temps de chargement de la page

Cette mesure représente le temps total nécessaire pour charger complètement une page.

Google Analytics fournit un rapport sur le temps de chargement des pages pour chacune de vos URL et même sur différents navigateurs.

Time To First Byte (TTFB)

Ceci mesure le temps il faut que les navigateurs reçoivent une requête HTML d'un serveur.

Pauvre TTFB les scores peuvent indiquer que vous avez de nombreux fichiers volumineux sur votre site Web ou que vous devez passer à un nouveau serveur.

Nombre de requêtes HTTP

Chaque fois que votre page doit charger un fichier, il envoie une nouvelle requête qui pourrait réduire la vitesse des pages.

Core Web Vitals

• Le plus grand contenu Peinture : le temps nécessaire pour charger la plus grande image ou élément de texte sur une page. Cette métrique mesure la vitesse à laquelle le chargement réel de votre page s'affiche visuellement.
• Délai de première saisie : Le temps qu'il faut à un utilisateur pour interagir avec une page (c'est-à-dire cliquer sur un lien ou faites défiler).
• Changement de mise en page cumulé : la stabilité de votre page. En d'autres termes, il mesure si les éléments de la page se déplacent une fois la page chargée.

Champ vs. Données de laboratoire

Enfin, lors de la mesure de la vitesse des pages, il est essentiel de différencier les données de terrain et de laboratoire.

Les données de terrain prennent en compte le temps de chargement historique d'une page, tandis que les données de laboratoire fournissent des données issues d'un test simulé.

Google Analytics fournit des données de terrain et un enregistrement historique du temps qu'il faut, en moyenne, pour charger des pages sur votre site.

Sur d'autre part, les données de laboratoire, comme Google Lighthouse, fournissent une mesure approximative des vitesses de chargement des pages sous des variables définies.

Les données de laboratoire sont idéales pour diagnostiquer des problèmes spécifiques, tandis que les données de terrain sont un excellent moyen de suivre les progrès et la convivialité de votre site Web au fil du temps.

Avec ces conseils à l'esprit, explorez certains des meilleurs outils que je recommande à chaque site d'essayer pour tester la vitesse de son site Web.

Meilleurs outils pour tester la vitesse du site Web

Google PageSpeed Insights< /h3>

Google PageSpeed Insights est un outil gratuit conçu pour diagnostiquer des opportunités spécifiques où la vitesse de la page fait défaut.

Capture d'écran de PageSpeed Insights, mars 2023

Ces suggestions augmenteront les scores de vitesse de votre page et augmenteront le classement de vos mots clés.

Cet outil fournit également des mesures pour les Core Web Vitals, le temps d'interactivité et son indice de vitesse général.

PageSpeed Insights utilise Lighthouse, qui fournit des données de laboratoire pour estimer le chargement des pages sur un appareil standard avec une bonne connexion Wi-Fi.

PageSpeed Insights est une première étape utile pour découvrir des problèmes de surface qui peuvent être facilement résolus.

GTMetrix

GTMetrix est un excellent outil d'audit pour la vitesse des pages Web qui fournit des données de laboratoire similaires à celles de Google Lighthouse avec des outils de visualisation encore meilleurs.

L'onglet Performances vous indique tout ce que vous devez savoir sur Core Web Vitals, et l'onglet Structure offre des possibilités d'améliorer la vitesse des pages.

Capture d'écran de GTMetrix, mars 2023

Capture d'écran de GTMetrix , mars 2023

Cependant, mon outil préféré sur GTMetrix est l'onglet cascade qui vous permet de visualiser les éléments de chargement de la page et leur influence sur les temps de chargement de la page.

Capture d'écran de GTMetrix, mars 2023

Pingdom

Pingdom est un outil payant, qui en vaut la peine si vous avez besoin d'une surveillance en temps réel de la vitesse des pages via son paramètre de surveillance de l'utilisateur réel.

Cet outil permet à la fois des données de laboratoire simulées et des données de terrain en temps réel pour vous permettre de voir comment votre site Web fonctionne sur différents appareils, réseaux, et clients.

Pingdom fournit également les mêmes métriques et informations exploitables que d'autres outils fournissent avec un support continu pour votre site Web.

WebPageTest

De mon point de vue, WebPageTest est le meilleur outil de test de vitesse gratuit dont vous ayez jamais entendu parler.

Cet outil fournit toutes les mêmes données de laboratoire que Lighthouse, avec la possibilité de tester sur plusieurs appareils et réseaux.

Certaines de ses fonctionnalités les plus remarquables incluent :

• Cascade.
• Vidéo du chargement de votre page.
• Métriques de performance.
• Tracer les vues.
• Plusieurs tests à la fois.

Plus important encore, vous pouvez voir votre site Web au fur et à mesure qu'il se charge en temps réel avec la vue pellicule.

Capture d'écran de WebPageTest , mars 2023

WebPageTest fournit même un petit questionnaire soigné, par exemple si votre site Web est rapide, utilisable ou résilient, avec des réponses à donner là où votre site doit être amélioré.

Google Search Console

Je vous recommande vivement d'accéder au Rapport de vitesse dans Google Search Console pour un aperçu plus précis des vitesses de chaque page.

Ce rapport fournit des scores de vitesse individuels et des performances globales sur les navigateurs et les appareils.

Capture d'écran de developers.google.com, mars 2023

Utilisez la console de recherche pour surveiller toute progression ou modification de votre site. Bien sûr, vous pouvez également découvrir un grand nombre des mêmes données dans Google Analytics.

< h3>New Relic

Google PageSpeed Insights est un outil gratuit conçu pour diagnostiquer des opportunités spécifiques où la vitesse de la page fait défaut.

Ces suggestions augmenteront les scores de vitesse de votre page et augmenteront le classement de vos mots clés.

Cet outil fournit également des mesures pour les Core Web Vitals, le temps d'interactivité et son indice de vitesse général.

PageSpeed Insights utilise Lighthouse, qui fournit des données de laboratoire pour estimer le chargement des pages sur un appareil standard avec une bonne connexion Wi-Fi.

PageSpeed Insights est une première étape utile pour découvrir des problèmes de surface qui peuvent être facilement résolus.

GTMetrix

GTMetrix est un excellent outil d'audit pour la vitesse des pages Web qui fournit des données de laboratoire similaires à celles de Google Lighthouse avec des outils de visualisation encore meilleurs.

L'onglet Performances vous indique tout ce que vous devez savoir sur Core Web Vitals, et l'onglet Structure offre des possibilités d'améliorer la vitesse des pages.

Cependant, mon outil préféré sur GTMetrix est l'onglet cascade qui vous permet de visualiser les éléments de chargement de la page et leur influence sur les temps de chargement de la page.

Pingdom

Pingdom est un outil payant, qui en vaut la peine si vous avez besoin d'une surveillance en temps réel de la vitesse des pages via son paramètre de surveillance de l'utilisateur réel.

Cet outil permet à la fois des données de laboratoire simulées et des données de terrain en temps réel pour vous permettre de voir comment votre site Web fonctionne sur différents appareils, réseaux, et clients.

Pingdom fournit également les mêmes métriques et informations exploitables que d'autres outils fournissent avec un support continu pour votre site Web.

WebPageTest

De mon point de vue, WebPageTest est le meilleur outil de test de vitesse gratuit dont vous ayez jamais entendu parler.

Cet outil fournit toutes les mêmes données de laboratoire que Lighthouse, avec la possibilité de tester sur plusieurs appareils et réseaux.

Certaines de ses fonctionnalités les plus remarquables incluent :

• Cascade.
• Vidéo du chargement de votre page.
• Métriques de performance.
• Tracer les vues.
• Plusieurs tests à la fois.

Plus important encore, vous pouvez voir votre site Web au fur et à mesure qu'il se charge en temps réel avec la vue pellicule.

WebPageTest fournit même un petit questionnaire soigné, par exemple si votre site Web est rapide, utilisable ou résilient, avec des réponses à donner là où votre site doit être amélioré.

Google Search Console

Je vous recommande vivement d'accéder au Rapport de vitesse dans Google Search Console pour un aperçu plus précis des vitesses de chaque page.

Ce rapport fournit des scores de vitesse individuels et des performances globales sur les navigateurs et les appareils.

Capture d'écran de developers.google.com, mars 2023

Utilisez la console de recherche pour surveiller toute progression ou modification de votre site. Bien sûr, vous pouvez également découvrir un grand nombre des mêmes données dans Google Analytics.

New Relic offre des outils sophistiqués pour surveiller la page vitesse au fil du temps, déboguez votre code et même nettoyez vos plugins pour accélérer la vitesse du site.

Cet outil nécessite un abonnement, mais il possède des fonctionnalités utiles comme vous alerter lorsque la vitesse des pages baisse en temps réel après un modification a été apportée au site.

Conseils pour améliorer la vitesse du site Web

Bien que les outils puissent indiquer des problèmes individuels avec votre site Web, il existe quelques bonnes pratiques générales que vous pouvez suivre pour améliorer votre vitesse des pages du site Web.

Activer la compression

Les fichiers et les images de grande taille sont un frein important sur n'importe quel site Web, donc l'activation de la compression via un plug-in automatisé peut aider.

Il existe des dizaines de plugins disponibles pour WordPress, y compris des favoris comme Optimole et WP Rocket qui inclut le Plug-in Imagify.

Mise en cache

La mise en cache est une autre victoire facile pour augmenter rapidement la vitesse des sites Web pour les clients réguliers.

La mise en cache du Web ou du navigateur permet aux sites Web pour stocker de petits morceaux de données sur les appareils côté client, afin que moins de ressources soient récupérées la prochaine fois qu'ils chargent un site Web.

Plugins comme WP Rocket et WP Super Cache permettent mise en cache et peut considérablement améliorer votre expérience utilisateur.

Lazy Loading

Une autre fonctionnalité que les outils de mise en cache comme WP Rocket ou L'offre LazyLoad est la possibilité de retarder le chargement des fichiers jusqu'à ce que l'utilisateur y accède.

En d'autres termes, si vous avez des images sous la ligne de flottaison d'une page Web, le chargement différé permet à un site Web de retarder le chargement de cette image jusqu'à ce qu'un utilisateur fasse défiler la page.< /p>

Optimisez l'emplacement de votre serveur/CDN

L'hébergement de votre page Web sur un serveur géographiquement proche peut réduire considérablement la latence et les temps de chargement.

Cependant, si vous distribuez du contenu à un public mondial, investir dans un réseau de diffusion de contenu (CDN) peut réduire considérablement les temps de latence et les vitesses de chargement pour les personnes du monde entier.

Réduire les ressources

Outre les images, CSS et JavaScript seront les deux éléments les plus importants de toute page Web qui doivent être chargés.

Par conséquent, réduire ou l'élimination des ressources CSS et JavaScript inutiles, telles que les données en double, réduira le nombre de requêtes et de téléchargements qu'un client et un serveur doivent exécuter pour charger une page correctement.

Réduire les plugins et le code inutile

Enfin, l'élimination des ressources inutiles, telles que les gros plugins backend, libérera des ressources sur votre site Web et mettra moins de stress sur les appareils lorsqu'ils essaient de charger votre site Web.

Malheureusement, c'est trop courant pour les propriétaires de sites WordPress de laisser derrière eux les plugins hérités longtemps après qu'ils aient atteint leur objectif, ce qui peut avoir un impact considérable sur l'efficacité et la fonctionnalité d'un site Web.

Conclusion

Maintenant que vous comprenez comment tester la vitesse de votre site Web et quelles mesures rechercher, vous pouvez mettre en œuvre des solutions pour augmenter la vitesse de votre site Web et surveiller leur impact sur votre référencement. classements.

Bien que la vitesse du site Web soit l'un des nombreux facteurs, les avantages d'un site Web à chargement rapide l'emporteront largement sur les coûts que vous y consacrerez.

Plus de ressources :

• GTmetrix : comment utiliser l'outil de test de vitesse
• Core Web Vitals : les 3 metrics les plus importants de Google pour évaluer l'expérience utilisateur
• Core Web Vitals : Un guide complet

Image sélectionnée : Kaspars Grinvalds/Shutterstock