10 meilleurs conseils pour améliorer la vitesse de votre site Web

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

Voulez-vous un site Web bien classé dans Google et qui convertit bien ?

S'assurer que vos pages se chargent rapidement est important pour offrir une bonne expérience utilisateur.

Et les trois métriques Core Web Vitals introduites par Google sont un signal de classement depuis plusieurs années maintenant.

Vous ne savez pas comment aborder l'optimisation de vos Core Web Vitals ? Cet article propose 10 conseils sur la manière d'aborder l'optimisation de la vitesse des pages et sur ce que vous pouvez faire pour résoudre certains des problèmes les plus courants.

1. Utilisez Google Search Console pour vérifier si la vitesse de la page a un impact sur votre référencement

Google Search Console comprend un rapport Core Web Vitals de haut niveau qui vous indique si certaines pages de votre site Web doivent être optimisées pour la vitesse. Google collecte ces données sur la vitesse des pages auprès de vrais utilisateurs de Chrome.

Capture d'écran de Core Web Vitals dans Google Search Console, octobre 2023

Vous pouvez cliquer sur les problèmes individuels dans la section « Pourquoi les URL ne sont pas considérées comme bonnes » et découvrir quelles pages sont affectées par le problème.

Notez que la Search Console regroupe les pages similaires. Ainsi, par exemple, la valeur Largest Contentful Paint (LCP) pour « Exemple d'URL » ne correspond pas nécessairement à la valeur globale du « Groupe LCP ».

Capture d'écran des groupes d'URL de Google Search Console pour les évaluations Core Web Vitals ayant échoué, octobre 2023

2. Exécutez un test de vitesse de page gratuit

L'exécution d'un test de vitesse de site Web en ligne vous indique la vitesse de chargement de votre site Web, vous aide à comprendre la vitesse de votre page et fournit des recommandations sur la façon de l'améliorer. Entrez simplement l'URL de votre site Web pour générer un rapport.

Capture d'écran d'un résultat de test de vitesse de page DebugBear, octobre 2023

Vous pouvez cliquer sur chaque mesure pour en savoir plus sur les facteurs qui influencent la valeur de la mesure. Par exemple, de nombreux jalons de chargement de page peuvent être expliqués en examinant une visualisation en cascade de requêtes qui montre quand les différentes ressources de page commencent et terminent le chargement.

La vue pellicule au sommet de la cascade vous permet de corréler ce qui se passe sur le réseau avec ce que vos visiteurs peuvent voir.

Capture d'écran d'une visualisation en cascade montrant les requêtes et la progression du chargement des pages, octobre 2023

Vous pouvez également voir les performances de votre site Web dans les données réelles du rapport d'expérience utilisateur Chrome (CrUX) . Ce sont les données que Google utilise comme signal de classement.

Capture d'écran des tendances Google Web Vitals et des résultats des tests de vitesse, octobre 2023

Enfin, vous pouvez trouver des recommandations de vitesse de page spécifiques à votre site Web au bas de l'onglet « Présentation ».

Capture d'écran d'une recommandation de vitesse de page dans DebugBear, octobre 2023

3. Regardez le rendu de votre site Web image par image

Lorsque vous chargez votre site Web sur une connexion réseau rapide, il se charge probablement en une seconde ou deux. Trop rapide pour vraiment voir ce qui se passe étape par étape.

L'utilisation de la limitation du réseau dans Chrome DevTools vous permet de voir comment votre site Web se charge avec une connexion plus lente. Vous pouvez regarder le contenu apparaître progressivement et utiliser cette compréhension du processus de chargement lors de vos efforts d'optimisation.

Suivez ces étapes pour charger votre site Web en utilisant une connexion plus lente :

1. Faites un clic droit sur la page et cliquez sur « Inspecter ».
2. Ouvrez l'onglet « Réseau ».
3. Ouvrez la liste déroulante « Pas de limitation » et sélectionnez « Fast 3G ».
4. Recharge la page.

Capture d'écran de la liste déroulante de limitation des demandes de Chrome DevTools, octobre 2023

Dans l'exemple ci-dessous, vous pouvez voir que :

• La page commence à s'afficher avec un arrière-plan statique avant que l'image d'arrière-plan n'apparaisse.
• Une police de secours est utilisée initialement jusqu'à ce que la police Web soit chargée.
• L'image au centre apparaît en dernier.

Enregistrement vidéo du processus de rendu d'un site Web dans DebugBear, octobre 2023

Vous pouvez également utiliser le test gratuit DebugBear pour parcourir le processus de rendu image par image. Ou téléchargez l'enregistrement au format MP4 avec un abonnement payant à DebugBear .

Enregistrement vidéo du processus de rendu d'un site Web dans DebugBear, octobre 2023

4. Concentrez-vous sur les éléments essentiels du Web plutôt que sur votre score Lighthouse

L'outil Lighthouse de Google est largement utilisé pour tester les performances des sites Web. Il est facile à exécuter et fournit un ensemble de recommandations concrètes pour améliorer votre site Web.

Cependant, le score Lighthouse Performance n’est pas un signal de classement SEO. De nombreux sites ont un score Lighthouse faible ou moyen, mais obtiennent de bons résultats dans les trois mesures Core Web Vitals dans les données utilisateur réelles qui ont un impact sur les classements.

Lighthouse est idéal pour tester votre site Web dans un environnement fixe et vous permet d'exécuter des tests avant et après sur votre site Web avant que les données utilisateur réelles mises à jour ne soient disponibles. Mais ce qui compte en fin de compte, c’est la manière dont vos visiteurs réels perçoivent votre site Web.

Capture d'écran des données Core Web Vitals d'utilisateurs réels dans PageSpeed Insights, octobre 2023

5. Optimiser les ressources bloquant le rendu

Les ressources bloquant le rendu sont des fichiers qui doivent être chargés sur votre site Web avant que les navigateurs puissent afficher du contenu à l'utilisateur. Les fichiers CSS et JavaScript de la page bloquent souvent le rendu.

Voici un exemple de cascade de requêtes montrant l'impact des fichiers bloquant le rendu sur le processus de rendu de votre site Web.

1. Le navigateur démarre avec une page vierge.
2. Le document HTML est chargé.
3. Plusieurs ressources bloquant le rendu sont chargées (nous nous concentrerons sur app.css comme fichier le plus volumineux et le plus lent).
4. Une fois app.css chargé, la page s'affiche (comme indiqué par la tâche CPU orange dans la cascade).
5. Enfin, le contenu de la page commence à devenir visible dans la vue pellicule.

Capture d'écran de la visualisation en cascade de DebugBear montrant les requêtes de blocage de rendu, octobre 2023

Le chargement de nombreuses ressources bloquant le rendu rendra le contenu de la page plus lent et nuira à votre score Largest Contentful Paint.

Améliorer le temps de réponse du serveur

Le chargement du document HTML initial est la première étape du chargement d'un site Web. La métrique Time to First Byte (TTFB) mesure la rapidité avec laquelle votre serveur Web répond à une demande pour cette ressource.

Réduisez le nombre de requêtes bloquant le rendu

La meilleure façon d’accélérer le chargement de votre site Web est de réduire le nombre de ressources qui bloquent le rendu. Si un fichier n'est pas nécessaire pour démarrer le rendu du contenu, il ne doit pas bloquer le rendu.

Par exemple, les mots-clés defer et async sur la balise script indiquent au navigateur qu'un fichier JavaScript doit être chargé mais que la page peut commencer à s'afficher avant cela.