7 conseils pour améliorer la vitesse de votre site Web en 2024

DebugBear 26 mars 2024 Image vedette

Un site Web à chargement rapide offre une bonne expérience utilisateur et aide à augmenter les taux de conversion. Google a également récemment mis à jour sa documentation pour confirmer que Éléments essentiels du Web sont utilisés par ses systèmes de classement.

Prêt à rendre votre site Web rapide ? Voici sept conseils pour vous aider à analyser la vitesse de votre site et à identifier les optimisations potentielles.

1. Analysez une cascade de requêtes réseau pour votre site Web

UN demander une visualisation en cascade peut vous dire exactement ce qui se passe lors de l’ouverture de votre site Web. Par exemple:

  • Quelles ressources sont téléchargées ?
  • Quand les ressources commencent-elles à se charger et combien de temps prend chaque requête ?
  • Quel est le lien avec ce que les visiteurs peuvent voir lors du chargement du site Web ?

Ces informations peuvent servir de base pour identifier les optimisations à plus fort impact. Vous pouvez exécuter un vitesse de page gratuite testez sur votre site Web pour générer une vue en cascade.

Les cascades de demande fournissent beaucoup de détails et peuvent sembler intimidantes. Décomposons exactement ce que vous devez rechercher.

Demander une vue en cascade pour un site WebDemander une vue en cascade pour un site Web

Pour interpréter une cascade, recherchez trois étapes clés dans le processus de chargement d'un site Web :

Sauf s'il y a des redirections, le document HTML sera la première requête dans la cascade. Avant le jalon TTFB, aucune autre ressource ne peut commencer à se charger et aucun contenu ne peut devenir visible. Le TTFB de votre serveur représente donc une valeur minimale pour les scores FCP et LCP.

Demande de document HTML et TTFB dans une cascade de requêtesDemande de document HTML et TTFB dans une cascade de requêtes

Ensuite, nous chercherons requêtes bloquant le rendu. Il s'agit de demandes de ressources supplémentaires importantes qui doivent être chargées avant que le contenu de la page ne devienne visible.

Dans cet exemple, nous pouvons voir qu'il existe quatre requêtes de feuille de style CSS bloquant le rendu. Une fois le chargement de ces fichiers terminé, nous pouvons voir le premier contenu apparaître dans la pellicule de rendu en haut à droite.

Requêtes bloquant le rendu retardant le premier Contentful PaintRequêtes bloquant le rendu retardant le premier Contentful Paint

Pour optimiser le FCP vous pouvez :

Par exemple, dans l'exemple ci-dessus, nous pouvons voir que le fichier app.css fait plus de 100 kilo-octets. Le téléchargement peut prendre un certain temps, en particulier sur les connexions de données mobiles plus lentes.

Pour accélérer les requêtes, vous souhaiterez également vérifier à quels serveurs le navigateur se connecte lors de l'ouverture de la page. Une nouvelle connexion est nécessaire pour chaque nouveau domaine à partir duquel une ressource est chargée, et chaque nouvelle connexion au serveur prend un certain temps à établir.

Vous pouvez identifier les connexions serveur dans la cascade en recherchant trois petits rectangles devant la requête principale. Ces rectangles représentent les allers-retours réseau nécessaires à la recherche DNS, à la connexion TCP et à la connexion SSL.

Connexions au serveur établies pour chaque nouveau domaineConnexions au serveur établies pour chaque nouveau domaine

Enfin, nous examinerons le jalon LCP. Si l'élément de contenu le plus grand est une image, cela peut généralement être clairement vu en recherchant le badge « LCP » dans la vue en cascade.

Une fois l'image LCP téléchargée, le navigateur commence rapidement à mettre à jour la page et à afficher l'image. Vous pouvez voir la métrique LCP marquée par la ligne rouge dans la vue en cascade.

Demande d'image LCP à chargement différé dans une vue en cascadeDemande d'image LCP à chargement différé dans une vue en cascade

Pour faciliter l'analyse des données en cascade de requêtes, de nombreux outils de performances tels que DébogageOurs incluent également des recommandations automatisées sur la vitesse des pages.

Recommandations de vitesse de page DebugBearRecommandations de vitesse de page DebugBear

2. Chargez d'abord le contenu le plus important

Lors du chargement d'un site Web, le contenu moins important ne doit pas réduire la bande passante des requêtes plus importantes.

Dans l'exemple ci-dessus, chargement paresseux est appliqué à l’image LCP. Cela signifie que le navigateur ne donnera pas la priorité à cette ressource. Une fois que la page commence à s'afficher, le navigateur se rend compte que l'image est réellement importante et la priorité de la demande est modifiée.

Par conséquent, l’image ne commence à se charger que tardivement et d’autres requêtes utilisent également la bande passante du réseau à ce stade. Nous pouvons le voir en regardant les lignes bleu foncé dans la demande à l’intérieur de la cascade. Les lignes bleu foncé indiquent quand les données de réponse sont reçues pour chaque demande.

Ressource LCP à chargement lentRessource LCP à chargement lent

Pour garantir qu'une image LCP est prioritaire, vous pouvez :

  • Assurez-vous qu'il n'est pas chargé paresseux.
  • Utilisez le récupérer la priorité attribut pour le marquer comme étant de grande importance.
  • Pensez à utiliser un balise de préchargement pour aider le navigateur à charger l'image plus tôt.

3. Réduire la taille des téléchargements des principales demandes anticipées

Les fichiers plus volumineux prennent plus de temps à télécharger, car la bande passante est limitée et le chargement d'une grande quantité de données nécessite plusieurs allers-retours réseau entre le client et le serveur.

Par exemple, cette capture d'écran montre un gros fichier CSS :

Analyse de taille CSS avec une image intégréeAnalyse de taille CSS avec une image intégrée

UNLorsque nous l’examinons de plus près, nous pouvons voir qu’il contient de nombreuses images intégrées sous forme de texte. Cela signifie que le chargement de ces images bloque le rendu, même si elles ne sont pas importantes pour la page et peuvent ne pas être utilisées du tout.

Pour réduire la taille des fichiers, vous pouvez :

  • Utiliser formats d'images modernes comme WebP et Avif.
  • Utiliser Brotli compression du contenu textuel (comme HTML, CSS et JavaScript).
  • Analysez votre HTML ou CSS code pour identifier les images, polices et données intégrées.

4. Comparez les données utilisateur réelles aux données de laboratoire

Google fournit des données utilisateur réelles pour la plupart des sites Web dans le cadre de leur Informations sur la vitesse de page outil. En comparant ces données aux résultats de leur laboratoire Phare Le test peut vous aider à mieux comprendre ce qui se passe sur votre site Web.

Résultat PageSpeed ​​Insights avec des données de terrain et des données de laboratoireRésultat PageSpeed ​​Insights avec des données de terrain et des données de laboratoire

Le résultat des tests en laboratoire rapporte généralement des mesures pires que les données réelles des utilisateurs. En effet, le test Lighthouse utilise une connexion réseau et un processeur plus lents que ceux de la plupart des visiteurs.

Deux raisons courantes pour lesquelles les résultats de vos tests en laboratoire sont plus rapides que les données utilisateur réelles :

  • Le test PageSpeed ​​Insights est signaler des données peu fiables.
  • Le test en laboratoire atteint un cache alors que la plupart des utilisateurs réels rencontrent des réponses lentes du serveur.

5. Vérifiez l'évolution des performances de votre site Web au fil du temps

L'ensemble de données utilisateur réel fourni par Google sur la base du Rapport sur l'expérience utilisateur Chrome (CrUX) inclut également des données historiques, même si elles ne sont pas rapportées dans PageSpeed ​​Insights. Voir l'évolution des performances de votre site Web au fil du temps vous permet de voir quand un problème est apparu et d'identifier la cause première.

Pour afficher les données historiques Core Web Vitals de votre site Web, vous pouvez exécuter un DebugBear Test Core Web Vitals puis vérifiez le Éléments essentiels du Web onglet pour une tendance sur 25 semaines.

Chaque valeur de données CrUX couvre une période glissante de 28 jours. Si un problème survient, cela aura progressivement un impact sur vos scores au cours des quatre semaines suivantes.

Tendances Core Web Vitals sur 25 semainesTendances Core Web Vitals sur 25 semaines

6. Mettre en place une surveillance continue de la vitesse du site Web

Si vous souhaitez détecter les régressions (c'est-à-dire qu'un changement a été déployé et a eu un impact négatif sur la vitesse du site Web) dès qu'elles se produisent, vous devez configurer une surveillance de la vitesse des pages pour votre site Web.

DébogageOurs est un service de surveillance qui fournit deux types de surveillance :

  • Tests en laboratoire : Exécutez des tests de vitesse de page selon un planning dans un environnement de laboratoire contrôlé.
  • Surveillance des utilisateurs réels : Découvrez comment vos visiteurs perçoivent votre site Web.

La mise en place d'une surveillance pour votre site Web vous alertera en cas de régression, puis comparera les données avant et après pour identifier la cause du ralentissement.

Tableau de bord avec tests de surveillance de sites Web programmésTableau de bord avec tests de surveillance de sites Web programmés

7. Examinez les métriques au-delà du temps de chargement

Les performances d'un site Web ne concernent pas seulement la vitesse de chargement initiale mesurée par la métrique LCP. Google prend également en compte la rapidité avec laquelle un site Web répond aux interactions des utilisateurs, telle que mesurée par le Interaction avec la peinture suivante (INP) métrique devenue Core Web Vital le 12 mars.

Alors que LCP dépend principalement de ce qui est chargé sur le réseau, INP examine le traitement du processeur et le temps nécessaire avant que la page puisse traiter une interaction et mettre à jour l'interface utilisateur pour être prête pour la prochaine interaction.

La mesure de l'INP nécessite une interaction de l'utilisateur, ce qui rend difficile le test dans un environnement de laboratoire. Il existe des outils de test INP en laboratoire, comme le Débogueur INPmais ils ne peuvent pas identifier toutes les interactions possibles des utilisateurs ni vous indiquer avec quels éléments les utilisateurs interagissent le plus souvent.

Résultat du test du débogueur INPRésultat du test du débogueur INP

Pour améliorer l'interaction avec Next Paint, vous avez besoin surveillance réelle des utilisateurs (RUM). Ces données peuvent vous dire :

  • Quelles pages ont une INP lente ?
  • Avec quels éléments les utilisateurs interagissent ?
  • Quels scripts contribuent aux retards ?
DebugBear données de surveillance des utilisateurs réelsDebugBear données de surveillance des utilisateurs réels

Conclusion

Pour améliorer la vitesse de votre site Web, vous devez d’abord comprendre ce qui le ralentit. Commencez par exécuter un test de vitesse de page gratuit.

Un outil de surveillance de site Web vous aide à suivre les Core Web Vitals au fil du temps et à être informé des régressions. Tu peux démarrez un essai gratuit de 14 jours de DebugBear ici.

Newsletter

Rejoignez notre newsletter pour des astuces chaque semaine