7 étapes pour un site Web dont la vitesse de page est toujours optimisée

Ce message a été sponsorisé par DebugBear. Les opinions exprimées dans cet article sont celles du sponsor.

Nous avons tous connu des sites Web dont le chargement prend une éternité. Ce n'est pas une bonne première impression !

Un site Web rapide peut vous aider à générer plus de trafic et encourager vos visiteurs à explorer davantage ce que vous proposez. (Vérifiez la vitesse actuelle de votre site Web →)

Mais parfois, une fois que vous accélérez votre site Web pour la première fois, de nouvelles mesures d'expérience utilisateur telles que Interaction To Next Paint sont déployées.

D'autres fois, le La charge surprise du serveur coupable ralentit votre site lorsque vous n'y prêtez pas attention.

Alors, que pouvez-vous faire pour accélérer votre site Web et rester au top de vos performances Web au fil du temps ?

Dans ce guide

1. 1. Pourquoi la vitesse des pages est-elle importante dans le référencement ?
2. 2. Étape 1 : Exécuter un test de performances de site Web
3. 3. Étape 2 : Configurer la surveillance du site Web
4. 4. Étape 3 : Configurer la surveillance des utilisateurs réels
5. 5. Étape 4 : Utiliser des données utilisateur réelles pour identifier des mesures de performances spécifiques
6. 6. Étape 5 : Exécuter en continu des tests de vitesse de page
7. 7. Étape 6 : Configurer des alertes en cas de baisse des performances Web
8. 8. Étape 7 : Comparez les résultats des tests de vitesse
9. 9. Restez au top de vos principaux éléments essentiels du Web

Pourquoi la vitesse des pages est-elle importante en référencement ?

La vitesse des pages et son lien avec l'expérience de votre utilisateur sont un signal de classement.

Une fois que les utilisateurs ont décidé d'ouvrir votre site Web, il est important de garantir que le site Web se charge rapidement et offre une bonne expérience. Si les utilisateurs peuvent trouver rapidement les informations dont ils ont besoin, ils sont plus susceptibles de consulter le reste de votre site Web ou de suivre votre processus de paiement.

Par conséquent, rendre votre site Web rapide présente plusieurs avantages, vous aidant :

• Classez-vous mieux dans Google et augmentez le trafic organique.
• Offrez une meilleure expérience utilisateur et i< strong>Augmentez les conversions.
• Réduisez les coûts pour vous et vos visiteurs.

Par exemple, 70 % des consommateurs déclarent qu'ils sont moins susceptibles d'acheter quelque chose en ligne ou de revenir sur un site Web si celui-ci est lent. Google a également publié un certain nombre d'études de cas expliquant que de bons Core Web Vitals conduisent également à davantage de ventes. .

Comment la vitesse des pages vous aide à obtenir un meilleur classement dans les résultats de recherche Google

Google collecte des données sur la vitesse des pages auprès de vrais utilisateurs de Chrome et les utilise comme signal de classement.

Il examine trois mesures de performances, appelées Core Web Vitals (CWV).

Les Core Web Vitals sont constitués de :

• Largest Contentful Paint (LCP).
• Cumulative Layout Shift (CLS) .
• First Input Delay (FID), qui sera remplacé par Interaction to Next Paint (INP) en 2024.

Si au moins 75 % des visiteurs du site Web ont une expérience que Google qualifie de « bonne » pour les trois métriques, vous bénéficierez d'un avantage de classement maximal.

Comment vérifier les éléments essentiels du Web ?

Le rapport CWV dans Google Search Console vous indique si vous devez optimiser l'expérience des pages sur votre site Web.

Conseil de pro : Utilisez DebugBear pour mesurer automatiquement vos Core Web Vitals et obtenir des mesures concrètes pour accélérer votre site.

Que signifie chaque élément essentiel du Web ?

Chaque CWV se concentre sur la vitesse de différents aspects de votre site Web.

Votre objectif est que votre site Web soit en « Bon » pour chaque métrique.

Largest Contentful Paint (LCP)

La métrique LCP mesure la rapidité de chargement de votre site Web. Plus précisément, il examine le délai après la navigation vers une page où l'élément de contenu le plus important apparaît, par exemple une image de héros ou un en-tête de contenu.

Le score de peinture de contenu le plus élevé doit être de 2,5 secondes ou moins.

p>

Cumulative Layout Shift (CLS)

CLS mesure si la mise en page est stable après que le contenu commence à apparaître. Si un changement de mise en page se produit, cela signifie que certains éléments de la page changent de place après leur première apparition. Cela donne une mauvaise expérience utilisateur, car l'utilisateur doit se réorienter pour continuer la lecture ou peut accidentellement cliquer sur le mauvais bouton.

Le score cumulatif de décalage de mise en page doit être inférieur à 0,1. Il est calculé en examinant la taille du contenu qui a été décalé et la distance de déplacement.

Délai de première entrée (FID) et amp; Interaction To Next Paint (INP)

Ces deux mesures mesurent la rapidité avec laquelle votre site Web répond aux entrées des utilisateurs. Lorsqu'un utilisateur clique sur un bouton de votre page, la mise à jour du contenu de la page peut prendre une seconde ou plus en réponse à la saisie de l'utilisateur, ce qui donne l'impression que le site Web est lent et ne répond pas.

L'interaction avec Next Paint remplacera le délai de première entrée en tant que noyau Mesure Web Vitals en mars 2024.

Visez un score FID inférieur à 100 millisecondes et un score INP inférieur à 200 millisecondes.

Comment un site Web rapide réduit les coûts

Enfin, l'optimisation des performances Web peut également permettre de réduire les coûts d'hébergement de votre site Web, car moins de traitement CPU est nécessaire et moins de données doivent être téléchargées, ce qui entraîne une baisse des frais de bande passante.

De nombreux visiteurs de sites Web disposent également de bande passante limites de leurs forfaits de données mobiles et ils peuvent encourir des coûts supplémentaires en cas de dépassement de la limite.

Étape 1 : Exécuter un test de performances de site Web

Vous voulez voir à quelle vitesse votre site Web se charge et obtenir des recommandations pour l'accélérer ? L'exécution d'un test de vitesse de site Web gratuit vous permet d'évaluer les performances actuelles de votre site Web. et fournit un rapport détaillé sur la façon de l'améliorer.

Voici un exemple de ce à quoi ressemble un résultat de test :

Test de vitesse des pages Les outils peuvent également identifier les optimisations potentielles que vous pouvez appliquer à votre site Web, comme la réduction du temps de réponse du serveur, la suppression des scripts bloquant le rendu ou l'optimisation de vos images.

Même si vous répondez déjà aux normes CWV de Google, vous pouvez toujours en bénéficier en optimisant davantage. Étant donné que Google examine les 75 % d'expériences les plus rapides, il se peut qu'un quart de vos visiteurs aient une expérience sous-optimale.

Par exemple, certains utilisateurs peuvent utiliser une connexion mobile lente ou le Wi-Fi d'un avion. L'optimisation de la vitesse des pages pour ces utilisateurs peut entraîner des achats que vous auriez pu perdre autrement.

Étape 2 : Configurer la surveillance du site Web

L'exécution d'un test sur votre site Web vous indique la vitesse à laquelle votre site Web est exécuté. maintenant. Mais la surveiller en permanence votre site Web et disposer de données historiques signifie que vous pouvez :

• Recevez des alertes lorsqu'un nouveau problème de performances survient.
• Vérifiez si les optimisations de performances ont l'impact attendu.< /li>
• Comparez les résultats des tests sur différents jours et comprenez les différences.
• Créez des rapports qui montrent à votre équipe et à votre direction l'état de votre site. faire.

Types de surveillance de la vitesse du site

Il existe deux principaux types de données sur la vitesse des pages que vous pouvez surveiller :

• < b>Les données de laboratoire ou synthétiques sont collectées selon un calendrier dans un environnement de test contrôlé.
• Les données de terrain ou d'utilisateur réel sont collectées auprès des utilisateurs finaux lorsqu'ils visitent le site Web. .

Les données de laboratoire sont plus détaillées et plus faciles à collecter, tandis que les données réelles des utilisateurs peuvent vous montrer comment les utilisateurs perçoivent réellement votre site Web.

Tests de performances synthétiques : avantages et amp ; Limites

Les tests de vitesse de page planifiés en laboratoire sont faciles à configurer, fournissent des rapports détaillés et peuvent être configurés à la fois pour vos propres sites et ceux de vos concurrents.

Cependant, le laboratoire Les tests basés sur les tests comportent certaines limitations :

• Les interactions des utilisateurs après le chargement initial de la page ne sont pas mesurées (sauf si vous les avez scriptées dans le cadre de la configuration du test).
• Les tests planifiés sont exécutés avec une configuration d'appareil cohérente, comme la taille de l'écran et la vitesse de connexion réseau. Cependant, les utilisateurs réels utilisent un large éventail d'appareils et sont confrontés à des conditions de réseau variables.
• Vous obtenez uniquement des données pour les URL de page pour lesquelles vous avez configuré la surveillance.

Certaines métriques comme INP et CLS dépendent fortement de la façon dont l'utilisateur interagit avec la page après son chargement.

L'élément de contenu responsable de la métrique LCP varie également souvent en fonction de l'appareil. Pour un utilisateur disposant d'un grand écran, l'élément LCP peut être une image. Sur un petit écran, l'élément LCP peut être un en-tête, avec l'image apparaissant quelque part en dessous de la ligne de flottaison.

Surveillance des performances du site Web des utilisateurs réels : avantages et amp; Limites

La collecte de données auprès d'utilisateurs réels présente de nombreux avantages :

• C'est ce qui compte en fin de compte pour vos visiteurs.
• Google utilise des données d'utilisateurs réels pour classements.
• Vous obtenez des données sur l'ensemble du spectre des expériences utilisateur : différents navigateurs, appareils, réseaux et comportements des utilisateurs.
• Les données peuvent être collectées pour l'ensemble de votre site Web plutôt que pour des classements spécifiques. URL des pages.

Cependant, vous devez apporter des modifications à votre site Web pour configurer une véritable surveillance des utilisateurs, et chaque résultat de test sera moins détaillé qu'un test complet en laboratoire. Les données de vitesse du site utilisateur réel et les tests de performances planifiés ont chacun leurs avantages et leurs inconvénients, et ils se complètent en fin de compte.

Étape 3 : Configurer la surveillance des utilisateurs réels

Pour collecter des données à partir de sites réels. utilisateurs, vous devez installer un extrait d'analyse sur votre site Web à partir de l'outil de surveillance de site Web de votre choix.

Conseil de pro : Vous pouvez inscrivez-vous pour un essai gratuit de DebugBear pour commencer.

Une fois votre compte configuré, passez à l'option « RUM " et cliquez sur " Commencer ".

Cela générera un code d'intégration que vous devrez installer sur votre site Web. Vous pouvez l'ajouter au modèle HTML de votre site Web ou l'installer via un outil de gestion de balises comme Google Tag Manager.

Une fois cette configuration configurée, vous commencerez à voir des expériences Core Web Vitals réelles pour votre site Web.

Vous pouvez également voir où dans le monde les utilisateurs ont une bonne expérience et où votre site se charge plus lentement.

Étape 4 : Utiliser les données utilisateur réelles pour identifier Mesures de performances spécifiques

Si votre site Web ne fonctionne pas bien selon l'une des mesures Core Web Vitals, vous pouvez approfondir ce problème.

DebugBear fournit des tableaux de bord spécifiques aux métriques qui vous montrent :

• Lesquelles de vos pages sont rapides et lesquelles sont lentes.
• La distribution des expériences utilisateur.
• Si une expérience utilisateur typique est rapide ou lente.
• Comment la vitesse des pages a changé au fil du temps, à la fois pour l'utilisateur moyen et pour les 10 % d'expériences utilisateur les plus lentes.

Lors du débogage du LCP, il est également important de savoir quel élément de la page était le plus gros élément de contenu pour les différents utilisateurs. DebugBear affiche une répartition de ces éléments et combien de temps les utilisateurs doivent attendre pour qu'ils apparaissent.

De cette façon, vous pouvez identifier quelles optimisations de page auraient le plus grand impact sur le plus grand nombre d'utilisateurs.

La même chose s'applique à INP où vous devez savoir quelle interaction de page a conduit à un retard d'interaction pour l'utilisateur.

Enfin, DebugBear peut également faire rapport à vous expliquez comment les métriques de vitesse de page sont en corrélation avec d'autres métriques telles que le taux de rebond :

En quoi la surveillance des utilisateurs réels est différente du rapport sur l'expérience utilisateur Chrome (CrUX) de Google

Que vous possédiez des analyses ou que vous consultiez les données Google , dans les deux cas, vous travaillez avec des statistiques d'utilisateurs réelles.

Pourquoi ne pas vous fier uniquement aux données de Google ?

• Google fournit des données agrégées sur une période de 28 jours. période, donc après une modification sur votre site Web, il faut beaucoup de temps pour voir l'effet.
• Les données CrUX ne sont disponibles que pour les pages qui atteignent un volume de trafic minimum.
• Google uniquement collecte les données des utilisateurs connectés à leur compte Google dans Chrome.

Étape 5 : Exécutez en continu des tests de vitesse de page

L'Le service de surveillance de sites Web DebugBear peut exécuter des tests de performances selon un planning horaire, quotidien ou hebdomadaire.

Pour pour commencer, entrez simplement l'URL de votre site Web et choisissez un emplacement de test, un appareil de test et un calendrier de surveillance.

Une fois que vous avez configuré la surveillance, un tableau de bord vous indiquera les performances de votre site Web selon les métriques CWV des dernières semaines.

Vous pouvez également surveiller les sites concurrents pour comparer la vitesse de votre site.

Pour chaque page surveillée, vous obtenez également un tableau de bord spécifique à la page avec les tendances de performances pour cette URL spécifique et une analyse détaillée de chaque métrique de vitesse.

Par exemple, dans la capture d'écran ci-dessous, vous pouvez voir :

• Comment la métrique Largest Contentful Paint a changé au fil du temps.
• L'élément d'image responsable du déclenchement du jalon LCP.
• Quelles requêtes réseau sont impliquées dans le chargement de l'image (appelées demander une visualisation en cascade).

En plus d'exécuter ses propres tests de performances, DebugBear vérifie également en permanence les données utilisateur réelles que Google utilise pour les classements. Ces données proviennent du Rapport sur l'expérience utilisateur Chrome, ou CrUX en abrégé.

Nous pouvons voir que sur cette page plus de 86 % des visiteurs vivent une bonne expérience.

Étape 6 : configurer des alertes en cas de baisse des performances Web

Même si vous avez un site Web rapide, vous rencontrerez toujours des problèmes de performances de temps en temps. Par exemple après :

• Téléchargement d'une nouvelle image sur une page de destination.
• Installation d'un nouveau script tiers.
• Modification d'une option de configuration dans votre configuration d'hébergement.
• Croissance progressive de la taille de votre base de données.

DebugBear peut envoyer des alertes de régression par e-mail, Slack ou Microsoft Teams.

Pour éviter les alertes bruyantes, tous les tests sont réexécutés s'ils déclenchent un problème. De cette façon, les notifications ne sont envoyées que pour les problèmes reproductibles.

Comme vous pouvez le voir dans l'alerte ci-dessus, DebugBear exécute également un Audit Google Lighthouse avec chaque test, y compris les scores d'accessibilité et de référencement. De cette façon, l'accessibilité de base et la surveillance du référencement sont également incluses.

Étape 7 : Comparez les résultats des tests de vitesse

D'accord, vous avez donc reçu une alerte de performances Web et constatez un changement dans vos métriques. . Et ensuite ?

DebugBear propose un mode de comparaison qui permet vous comparez les résultats des tests avant et après une régression pour voir exactement ce qui a changé et quel impact cela a sur les utilisateurs.

La capture d'écran ci-dessous montre un exemple dans lequel un nouveau script tiers a été ajouté à un site Web et les visiteurs attendent maintenant beaucoup plus longtemps pour que le contenu de la page s'affiche.

Une fois que vous savez quelle est la cause du problème, vous pouvez décider comment procéder. Vous pouvez :

• Annuler la modification.
• Charger le script de manière asynchrone afin qu'il ne retarde pas le rendu.
• Optimisez le script pour qu'il soit plus petit et plus rapide à télécharger.
• Charger le script de votre propre domaine pour éviter d'avoir à établir une connexion serveur vers le site Web tiers.

L'outil de comparaison est également un excellent moyen de communiquer visuellement une régression ou l'impact d'une optimisation des performances réussie.

DebugBear propose à la fois une vue pellicule qui montre chaque rendu image du site Web une par une, et une vue vidéo qui montre comment un utilisateur réel ressentirait la vitesse de chargement avant et après une modification. Vous pouvez exporter cette visualisation sous forme de fichier vidéo MP4 et l'intégrer dans des présentations d'équipe ou de client.

Restez au top de vos principaux éléments essentiels du Web

Prêt à commencer à donner la priorité aux performances de votre site Web, à obtenir un meilleur classement dans Google et offrir une meilleure expérience utilisateur ? Essayez DebugBear gratuitement pendant 14 jours.

L'essai gratuit permet vous :

• Testez les performances de votre site Web dès maintenant.
• Obtenez des recommandations pour optimiser la vitesse des pages.
• Découvrez rapidement quand la vitesse de vos pages change.
• Découvrez comment les utilisateurs réels perçoivent votre site Web.

Crédits image

En vedette Image : Image de DebugBear.Utilisée avec autorisation.