Guide Google PageSpeed Insights - 21 moyens d'améliorer votre score

Dans le monde dynamique, rapide et en perpétuelle évolution de l’internet, des millions de sites web se disputent l’attention des visiteurs. Cette compétition féroce a mis l’accent sur l’optimisation de la vitesse et l’expérience de l’utilisateur, qui sont des facteurs critiques qui peuvent faire ou défaire votre site web.
C’est là que vous pouvez utiliser Google PageSpeed Insights (PSI) à bon escient. Dans ce guide, nous allons voir ce qu’est PageSpeed Insights et comment il peut vous aider à placer votre site web en tête des pages de résultats des moteurs de recherche.

En saisissant l’URL de votre site web, PSI évaluera les performances de votre site et décomposera les résultats en plusieurs métriques clés.
Ces résultats peuvent vous aider à comprendre ce qui ralentit votre site et ce que vous pouvez faire pour l’améliorer.

Quelle est l’importance du score Google PageSpeed Insights ?

Dans le paysage digital compétitif, avoir un site web plus rapide peut vous donner un avantage sur vos concurrents plus lents. Un site web rapide, stable, bien structuré et facile à naviguer permet d’augmenter les conversions et les ventes.

Google PageSpeed Insights compare votre site web à plusieurs indicateurs clés et attribue des scores à chacun pour comprendre facilement les performances de votre site. Un score PageSpeed Insights plus élevé peut vous aider à attirer plus de visiteurs et à positionner votre site web en tête des SERP (page de résultats des moteurs de recherche). En utilisant cet outil régulièrement, vous pouvez surveiller les performances de votre site et vous concentrer sur des domaines spécifiques qui ont besoin d’être améliorés pour rester au niveau de vos concurrents.

Néanmoins, vous ne devriez pas être obsédé par l’obtention de 100/100 pour toutes les métriques. Même les sites les plus populaires ne peuvent pas obtenir un score parfait. Augmenter votre score ne doit pas se faire au détriment de l’expérience utilisateur.

Vous devez vous efforcer d’obtenir le score le plus élevé possible, mais tant que votre site web se situe « dans le vert » pour toutes les statistiques, vous devriez avoir l’esprit tranquille. Cela est particulièrement vrai si vous avez déjà dépassé le seuil des 90 %. Essayer d’augmenter le score au-dessus de 90 n’a souvent aucun avantage pratique, et investir du temps et des ressources peut ne pas en valoir la peine.

Comparaison entre Google PageSpeed Insights et Google Lighthouse

PageSpeed Insights et Lighthouse sont des outils développés par Google qui mesurent les performances de votre site web. Cependant, ils utilisent différentes méthodes d’évaluation :

• Google PageSpeed Insights adopte une approche plus générale : l’outil obtient des données à partir de l’expérience des visiteurs en temps réel de votre site web. De plus, PSI évalue votre site web dans un environnement contrôlé, ce qui fournit des résultats que les développeurs peuvent trouver utiles. Ainsi, PageSpeed Insights brosse un tableau plus large des performances de votre site web.
• Lighthouse se concentre sur l’évaluation de votre site web sur une connexion simulée avec les mêmes conditions prédéfinies : le même réseau et les mêmes appareils prédéfinis. Il fournit plus de données techniques, ce qui est particulièrement utile pour les développeurs qui ont besoin de déboguer des sites web.

Comment mon score Google PageSpeed Insights affecte-t-il le référencement (SEO) ?

Lors du calcul de votre score de référencement, Google ne traite pas votre site web avec PageSpeed Insights. Ainsi, le score PSI n’a pas d’impact direct sur votre classement.

Cela étant dit, PageSpeed Insights mesure des statistiques, qui sont des facteurs de classement clés pour votre score de référencement. Ainsi, en utilisant PSI, vous pouvez améliorer la vitesse, l’accessibilité et l’expérience utilisateur, ce qui augmentera inévitablement votre score de référencement.

Comment utiliser l’outil Google PageSpeed Insights ?

L’utilisation de Google PageSpeed Insights est assez simple. Vous avez juste à saisir l’URL de votre page dans la barre d’adresse sur l’écran. L’outil évaluera votre site web et affichera les résultats. Vous trouverez ci-dessous des instructions détaillées.

1. Ouvrez la page PageSpeed Insights.
2. Saisissez l’URL de votre site web dans la barre d’adresse et cliquez sur Analyser.
   

   

3. PageSpeed Insights va explorer votre site web pendant quelques minutes et visualiser ses performances. Examinez les résultats des tests de vitesse pour les appareils mobiles et de bureau. Vous pouvez basculer entre Cette URL (affiche les résultats pour la page spécifique que vous avez envoyée) et Origine (affiche les résultats pour l’ensemble du domaine/site web).
   

   

4. Cliquez sur Développer la vue pour une vue détaillée des métriques de Core Web Vitals.
   

   

5. Descendez jusqu’aux résultats Lighthouse et cliquez sur l’un d’eux pour afficher les problèmes en suspens.
   

   

   PageSpeed Insights liste les problèmes liés à la métrique sélectionnée.

   

6. Faites défiler jusqu’à la section Opportunités pour voir des suggestions d’améliorations générales et des estimations du temps de chargement que chacune permettrait d’économiser si elle était appliquée.
   Consultez également la section Diagnostic, qui suggère des améliorations avancées.

   

7. Cliquez sur la flèche à côté de chaque problème pour voir son rapport détaillé.
   

   

Comprendre les résultats et les rapports PageSpeed Insights

Les scores et rapports de Google PageSpeed Insights fournissent une analyse complète des performances de votre page web, en prenant en compte diverses métriques et critères. Après avoir audité votre page web, PSI attribue un score compris entre 0 et 100 en fonction de ses performances. Ce score est classé comme suit :

• 0 à 49 (faible) – Indique que la vitesse de la page doit être sérieusement améliorée.
• 50 à 89 (moyenne) – Les performances de la page sont correctes, mais pourraient être améliorées.
• 90 à 100 (bon) – La page web est bien optimisée.

Plus le score est élevé, meilleures sont les performances de votre page web et meilleure est l’expérience utilisateur.

Évaluation des données de base sur le web (données de terrain)

Les données de terrain fournissent un aperçu des performances de votre page web à l’aide de données réelles collectées auprès d’utilisateurs réels via le rapport Chrome sur l’expérience utilisateur (CrUX). Il s’agit de First Contentful Paint (FCP), Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS).

• First Contentful Paint (FCP) – Mesure le temps écoulé entre le moment où la page commence à se charger et le moment où une partie de son contenu est affichée à l’écran.
• Largest Contentful Paint (LCP) : mesure le temps pendant lequel l’élément visuel principal de la page se charge à l’écran. C’est un bon indicateur de vitesse.
• First Input Delay (FID) – Indique le niveau d’interactivité de votre site. Plus précisément, il mesure le temps nécessaire à votre site web pour répondre à la première interaction de l’utilisateur, comme un clic sur un bouton ou un lien.
• Cumulative Layout Shift (CLS) – Représente la stabilité visuelle de vos pages web. Il mesure la fréquence à laquelle un visiteur rencontre des changements de mise en page inattendus lors du chargement de la page.
• Time to First Byte (TTFB) – Cette métrique mesure le temps nécessaire pour que le premier octet de réponse d’un site web aux demandes d’un utilisateur arrive. Le TTFB est un indicateur de la réactivité et de la vitesse d’un serveur web.
• Interaction to Next Paint (INP) – Une nouvelle mesure qui remplacera le First Input Delay (FID) en mars 2024. Elle évalue la réactivité globale d’une page web aux interactions de l’utilisateur comme les clics, les appuis et les saisies au clavier effectuées pendant la visite. Le résultat final représente l’interaction la plus longue mesurée au cours d’une seule visite.

Ces résultats illustrent l’expérience réelle des visiteurs de votre site web. PageSpeed Insights considère que votre site web passe le test Core Web Vitals pour les appareils mobiles ou les ordinateurs de bureau si vous dépassez le seuil de score de 75 %.

Données de laboratoire

Les données du laboratoire fournissent des informations sur les performances de votre page web basées sur des tests dans un environnement contrôlé . Les résultats sont générés par Google Lighthouse, qui simule une connexion sur un réseau prédéfini et une sélection d’appareils de bureau et mobiles.

Il est utile pour déboguer les problèmes de performances et offre des métriques telles que l’indice de vitesse, le temps d’interactivité et le temps total de blocage.

Opportunités, diagnostics et audits réussis

Les opportunités sont des recommandations de Google PageSpeed Insights concernant des améliorations générales de la vitesse de chargement des pages. D’autre part, la section Diagnostic fournit des informations supplémentaires sur la façon dont une page adhère aux meilleures pratiques de développement web .

Les audits réussis sont les facteurs pour lesquels votre page web excelle déjà, indiquant les aspects de votre site web qui sont bien optimisés.

21 étapes pour améliorer le score PageSpeed Insights de Google

Étape 1. Réduisez les temps de réponse du serveur (TTFB)

En réduisant le temps de réponse du serveur ou TTFB (Time to First Byte), vous pouvez améliorer les performances de votre site web et augmenter votre score Google PageSpeed Insights.

Le TTFB est le temps nécessaire au browser d’un utilisateur pour recevoir le premier octet de données de votre serveur web après qu’une requête ait été effectuée. Un TTFB élevé peut entraîner un retard dans l’affichage des pages web, causant un retard notable pour l’utilisateur. Google recommande un TTFB inférieur à 200 millisecondes.

Vous trouverez ci-dessous les stratégies les plus critiques pour réduire le temps de réponse du serveur.

• Choisissez un hébergeur fiable – Le facteur le plus crucial pour réduire le temps de réponse d’un serveur est de choisir un hébergeur fiable avec des solutions matérielles et logicielles hautes performances. SiteGround dispose de serveurs haut de gamme et de diverses solutions d’amélioration de la vitesse qui garantissent des performances optimales et une vitesse de chargement rapide à votre site web.
• Activez la mise en cache du serveur – La mise en cache du serveur stocke une version de votre site web sur le serveur, réduisant ainsi le temps de génération d’une page.
• Optimisez votre base de données – Une base de données mal optimisée peut ralentir les temps de réponse du serveur. Effacez régulièrement les données obsolètes ou inutiles et envisagez d’utiliser une solution d’indexation pour accélérer les requêtes dans la base de données.
  Les utilisateurs et utilisatrices de WordPress peuvent envisager d’utiliser des plugins qui effectuent une maintenance planifiée de la base de données, comme Speed Optimizer. Pour activer cette fonctionnalité, connectez-vous à votre tableau de bord et accédez à Speed Optimizer > Environment > Scheduled Database Maintenance. Cliquez sur le bouton Edit correspondant pour sélectionner les options de maintenance que l’extension effectuera.

  

• Utilisez un réseau de diffusion de contenu (CDN) – Les CDN peuvent mettre en cache le contenu de votre site sur des serveurs situés partout dans le monde. Cela signifie que la requête d’un utilisateur n’a pas besoin d’aller aussi loin, ce qui réduit le TTFB.
• Optimisez le code de votre application – Assurez-vous que le code de votre site web est propre, efficace et ne contient pas de tâches inutiles qui pourraient ralentir le temps de réponse.

Quelles actions spécifiques pouvez-vous entreprendre pour mettre en œuvre ces mesures ? Découvrez-le en suivant les étapes suivantes.

Étape 2. Réduisez CSS et JavaScript

Les fichiers CSS et JavaScript volumineux et volumineux peuvent considérablement ralentir votre site web et faire baisser votre score à Google PageSpeed Insights. Réduire la taille de ces fichiers peut accélérer votre site web en diminuant la quantité de données qui doivent être téléchargées, analysées et exécutées. Vous trouverez ci-dessous quelques-uns des moyens les plus efficaces d’y parvenir.

• Minification – Il s’agit du processus qui consiste à supprimer tous les caractères inutiles du code source sans en changer les fonctionnalités. Pour les sites web WordPress, pensez aux fonctionnalités Minify CSS et Minify JavaScript du plugin Speed Optimizer .
• Éliminez le code inutilisé – Au fur et à mesure que votre site web évolue, il peut y avoir des morceaux de code CSS et JavaScript qui ne sont plus nécessaires.
• Utilisez des structures de code compactes – L’utilisation de raccourcis clavier pour les propriétés CSS et l’optimisation de la structure de votre code JavaScript peuvent réduire considérablement la taille de vos fichiers. Évitez d’écrire du code long et répétitif lorsqu’une alternative plus compacte est disponible.

Apprenez des méthodes pratiques pour réduire les fichiers JavaScript et CSS dans les sections suivantes.

Étape 3. Éliminez les ressources bloquant le rendu

Les ressources qui bloquent l’affichage sont des fichiers qui empêchent une page web de s’afficher tant qu’elles n’ont pas été chargées. Il s’agit généralement de fichiers CSS et JavaScript. Éliminer ou minimiser ces ressources peut améliorer considérablement les temps de chargement et les performances globales de votre site.

Vous pouvez identifier les ressources bloquant l’affichage dans les rapports de PageSpeed Insights. Ensuite, déterminez celles qui ne sont pas essentielles et supprimez-les de la page. Cependant, gardez à l’esprit que pour le faire manuellement, vous devez être compétent en programmation.

Si votre site web est construit avec WordPress, vous pouvez utiliser une extension WordPress pour différer ces ressources. Nous recommandons l’extension Speed Optimizer, qui peut le faire d’un simple clic. Ouvrez votre tableau de bord WordPress, accédez à Speed Optimizer > Frontend > JavaScript et activez l’option Defer Render-blocking JavaScript.

Une fois que vous avez fini d’éliminer les ressources qui bloquent l’affichage, passez à l’étape suivante, qui consiste à minifier le JavaScript.

Étape 4. Minifiez JavaScript

La minification de JavaScript consiste à supprimer les caractères inutiles des fichiers JavaScript, tels que les espaces, les sauts de ligne et les commentaires. Ainsi, vous réduisez le temps de téléchargement et d’exécution de ces scripts, améliorant ainsi les performances globales de votre site.

Le faire par vous-même prendra une partie importante de votre temps. Cependant, Speed Optimizer s’avérera extrêmement utile si vous utilisez WordPress. Si vous l’avez déjà installée, accédez à votre tableau de bord et sélectionnez Speed Optimizer > Frontend > JavaScript. Activez l’option Minify JavaScript Files et l’extension minifiera les fichiers JavaScript automatiquement.

Une fois que vous avez fini de minifier les fichiers JavaScript, passez à la minification du code CSS.

Étape 5. Minifiez CSS

CSS (Cascading Style Sheets) est utilisé pour le style et la mise en page de vos pages web. Tout comme JavaScript, les fichiers CSS peuvent contenir des espaces et des caractères inutiles, ce qui les rend plus volumineux que nécessaire. Par conséquent, les browsers mettent plus de temps à les lire, ce qui affecte la vitesse de chargement des pages web.

En minifiant les feuilles de style CSS, vous comprimez le code et améliorez les performances de votre page web. Les utilisateurs et utilisatrices de WordPress peuvent utiliser l’extension Speed Optimizer pour minifier les CSS en un seul clic.

Connectez -vous à votre tableau de bord et accédez à Speed Optimizer > Frontend > CSS. Activez l’option Minify CSS Files pour minifier tous les fichiers CSS de votre site web.

En plus de minifier le code CSS, vous pouvez également supprimer le code CSS inutilisé. Découvrez comment à l’étape suivante.

Étape 6. Supprimez les CSS inutilisés

Le CSS inutilisé fait référence aux règles de style incluses dans vos fichiers CSS et qui ne sont pas utilisées pour styliser ou afficher vos pages web . Il peut s’agir de restes de designs, de styles ou de thèmes WordPress précédents appliqués à des composants qui n’existent plus sur votre site.

Ces règles de style redondantes créent un encombrement inutile, rendant vos fichiers CSS plus volumineux que nécessaire. Cela signifie plus de données à télécharger par l’utilisateur et plus à analyser par le browser, ce qui se traduit par des temps de chargement plus lents et un score inférieur à Google PageSpeed Insights.

Supprimer ce CSS inutilisé est crucial pour optimiser les performances de votre site web. Vous pouvez utiliser les outils de développement de Google Chrome ou d’autres outils en ligne pour trouver quelles règles CSS ne sont pas utilisées par votre site.

Une fois que vous avez identifié les CSS inutilisés, l’étape suivante consiste à supprimer ces règles inutiles. Si vous n’êtes pas sûr qu’une règle puisse être utilisée à l’avenir, isolez-la dans un fichier CSS séparé au lieu de la supprimer.

Après avoir apporté les modifications, testez minutieusement votre site web pour vous assurer que la suppression des CSS inutilisés n’affecte pas les fonctionnalités ou l’apparence de votre site.

Maintenant que vous avez optimisé le code de votre site web, vous devriez également envisager de mettre en œuvre des techniques d’optimisation de la vitesse. Passez aux étapes suivantes.

Étape 7. Activez la compression GZip

La compression GZip est une technique essentielle d’optimisation des performances qui peut considérablement améliorer votre score Google PageSpeed Insights.

Lorsqu’un internaute visite votre site web, une requête est effectuée sur votre serveur pour lui fournir les fichiers requis. Plus ces fichiers sont volumineux, plus il leur faut de temps pour se déplacer du serveur au browser. GZip compresse ces fichiers dans un fichier ZIP, ce qui les rend plus petits et donc plus rapides à livrer. Le browser du visiteur télécharge et décompresse les fichiers et les utilise pour afficher le site web.

Il y a plusieurs façons d’activer la compression GZip pour votre site web.

• Activez GZip sur votre serveur – Ce processus dépend de votre serveur. Pour les serveurs Apache, vous pouvez utiliser le fichier .htaccess pour activer la compression GZip. Pour les serveurs Nginx, vous devrez ajouter les directives appropriées dans votre fichier de configuration Nginx.
  Si votre site web est hébergé avec SiteGround, il utilise déjà la compression GZip. SiteGround a activé la compression GZip et Brotli sur tous les serveurs par défaut.
• Utilisez une extension – Plusieurs extensions peuvent activer la compression GZip si votre site web est réalisé avec WordPress.

Un autre moyen d’améliorer les performances de votre site web est d’ activer la mise en cache du browser. L’étape suivante couvre les méthodes les plus courantes, alors lisez la suite.

Étape 8. Activez la mise en cache du browser

La mise en cache du browser est une technique qui peut réduire considérablement les temps de chargement de votre site web pour les visiteurs connus, ce qui permet d’améliorer le score de Google PageSpeed Insights.

Lorsqu’un utilisateur visite une page web pour la première fois, le browser met en cache de nombreux éléments de la page, notamment les feuilles de style, les fichiers JavaScript, les images et le document HTML. La mise en cache implique le stockage de ces fichiers localement sur la machine de l’utilisateur. Lorsque l’utilisateur revisite la page, le browser n’a pas besoin de recharger la page entière mais peut récupérer la majorité des fichiers dans le cache, réduisant ainsi le temps de chargement de manière significative.

Voici comment activer la mise en cache du browser :

• Tirez parti de la mise en cache du browser avec .htaccess – Si votre site est sur un serveur Apache, vous pouvez activer la mise en cache du browser en ajoutant des directives à votre fichier .htaccess. Vous devrez spécifier des instructions de mise en cache pour différents types de fichiers en fonction de leur fréquence de mise à jour. Pour des instructions détaillées, lisez ce guide sur la façon de tirer parti de la mise en cache du navigateur pour les images, CSS et JS.
• Utilisez les en-têtes Cache-Control — L’en-tête HTTP Cache-Control contient les directives de mise en cache dans les requêtes et les réponses. Les directives précisent qui peut mettre en cache les réponses, dans quelles conditions et pour combien de temps.
• Utilisez une extension de mise en cache — Pour WordPress, plusieurs extensions peuvent activer la mise en cache du browser en quelques clics. Nous recommandons Speed Optimizer, qui présente diverses options de mise en cache et d’amélioration de la vitesse. Pour activer la mise en cache du browser, accédez à votre tableau de bord, ouvrez Speed Optimizer > Caching et activez l’option File-Based Caching.
  

  

En dehors de la mise en cache du browser, vous devriez aussi tirer parti des capacités de mise en cache de votre serveur. Passez à l’étape suivante pour plus d’informations.

Étape 9. Activer la mise en cache du serveur

La mise en cache du serveur est l’une des techniques les plus efficaces pour augmenter votre score sur Google PageSpeed Insights. Il stocke une copie en cache de votre site web sur le serveur et la fournit à l’utilisateur final. Ainsi, le serveur n’a plus à créer dynamiquement la même page à chaque fois qu’un visiteur y accède, ce qui réduit considérablement la charge du serveur.

En tant qu’utilisateur de SiteGround, vous pouvez augmenter la vitesse de votre site web avec SuperCacher, une solution maison avec trois couches de cache : statique, dynamique et Memcached. Découvrez son fonctionnement dans ce tutoriel SuperCacher.

L’utilisation d’un réseau de diffusion de contenu (CDN) est un autre moyen d’accélérer la vitesse de votre site. Lisez l’étape suivante pour savoir comment l’implémenter.

Étape 10. Utiliser un réseau de diffusion de contenu (CDN)

Un moyen de rendre l’expérience cohérente pour tous les utilisateurs du monde entier est d’ utiliser un réseau de diffusion de contenu (CDN). Un CDN créera des copies de votre site web sur son réseau de serveurs, et les visiteurs chargeront le site web à partir du plus proche. Cela garantira des performances et un temps de chargement stables, quelle que soit la localisation de vos visiteurs.

Les utilisateurs et utilisatrices de SiteGround peuvent bénéficier du CDN SiteGround dans le cadre de leur forfait d’hébergement. Pour en savoir plus sur le service, lisez ce guide sur le CDN de SiteGround.

Ensuite, optimisez les images de votre site web pour améliorer la vitesse de chargement. Suivez les instructions de l’étape suivante.

Étape 11. Optimisez vos images

Les images représentent souvent un pourcentage important de la taille totale d’une page web. Un encodage et une optimisation efficaces de vos images peuvent améliorer considérablement les temps de chargement et les performances globales des sites web. Cela peut à son tour avoir un impact positif sur votre score Google PageSpeed Insights.

L’optimisation des images implique de choisir le format, le niveau de compression et la résolution appropriés tout en maintenant un niveau de qualité acceptable. Voici quelques stratégies pour optimiser efficacement vos images :

• Choisissez le bon format d’image – Différents formats de fichiers image ont des forces différentes. JPEG est un bon choix pour les photographies ou les images complexes avec beaucoup de couleurs, tandis que PNG est le meilleur choix pour les images nécessitant de la transparence.
• Utiliser les formats d’image de nouvelle génération – Les formats plus récents, tels que WebP, offrent une compression supérieure et davantage de fonctionnalités que les formats plus anciens. Les images enregistrées dans ces formats sont petites alors que leur qualité est préservée.
  Si votre serveur d’hébergement prend en charge WebP, utilisez des images dans ce format pour améliorer la vitesse et les performances de votre site. SiteGround implémente WebP sur tous ses serveurs depuis longtemps.
  Si votre site web est construit avec WordPress, envisagez d’utiliser une extension pour convertir toutes les images existantes de votre bibliothèque multimédia en WebP. Speed Optimizer est un de ces extensions. De plus, il dispose d’un mécanisme de secours qui permet à votre site web d’afficher les anciennes images à la place de WebP au cas où les browsers des visiteurs ne seraient pas compatibles avec WebP.
  Pour convertir les images, ouvrez votre tableau de bord, accédez à Speed Optimizer > Media et activez Use WebP Images.

  

• Appliquer la compression – Plus les fichiers images sont petits, plus votre site web se charge rapidement. De nombreux outils de retouche d’image, extensions et services en ligne offrent des options pour compresser les images, réduisant ainsi la taille des fichiers. Faites cependant attention à trouver un équilibre entre la compression et la qualité de l’image.
  Speed Optimizer peut également être utile pour les utilisateurs de WordPress à cet égard. Il peut optimiser toutes les images existantes et fournit plusieurs paramètres de compression. Depuis votre tableau de bord, allez jusqu’à Speed Optimizer > Media et cliquez sur le bouton Edit en regard de Image Compression. Dans la fenêtre suivante, vous pouvez choisir les paramètres des nouvelles images compressées.

  

• Optimiser la résolution – Assurez-vous que vos images ne sont pas plus grandes qu’elles devraient l’être. La diffusion d’une image avec une résolution plus élevée que nécessaire entraîne des fichiers plus volumineux et des temps de chargement plus lents.
• Utiliser des images responsives – Implémenter des images responsives en utilisant les attributs HTML srcset et sizes. Cela vous permet de servir la bonne taille d’image en fonction de l’appareil de l’utilisateur et de la taille de la fenêtre d’affichage, réduisant ainsi les transferts de données inutiles.
• Tirez parti de la mise en cache du browser et d’un CDN – La mise en cache du browser et les réseaux de diffusion de contenu (CDN) peuvent également aider à réduire les temps de chargement des images. La mise en cache permet aux visiteurs récurrents de charger des images localement plutôt que de les télécharger à nouveau, tandis qu’un CDN peut servir des images à partir du serveur le plus proche de l’utilisateur.

L’optimisation des images est cruciale, mais vous pouvez encore améliorer les performances de votre site en différant les images hors écran. Lisez l’étape suivante pour savoir comment procéder.

Étape 12. Différer les images hors écran

Souvent, lorsque vous ouvrez un site web, la page entière ne peut pas tenir sur l’écran, et vous devez faire défiler vers le bas pour voir tout le contenu et les images. Ces images non visibles sont appelées images hors écran. Les browsers les téléchargent avant même que vous ne les fassiez défiler, ce qui ralentit l’affichage de la page.

Pour améliorer la vitesse de chargement, vous pouvez reporter les images hors écran. Une solution très utile est le chargement différé. En l’utilisant, les browsers chargeront en priorité le contenu « au-dessus de la ligne de flottaison » et afficheront les images hors écran une fois qu’elles apparaissent.

Speed Optimizer peut une fois de plus vous aider si vous utilisez WordPress. Allez dans Speed Optimizer > Media > Media Optimization et activez Lazy Load Media.

Sans aucun doute, les images prennent plus de temps à charger, et en prendre soin améliore considérablement les performances de votre site web. Mais il y a d’autres atouts auxquels vous devez prêter attention. Le chargement des polices web peut également avoir un impact sur l’expérience utilisateur. La section suivante traite des actions pour améliorer cet aspect.

Étape 13. Assurez-vous que le texte reste visible pendant le chargement des polices web

Les polices web personnalisées sont de plus en plus populaires dans la conception web moderne. Cependant, les polices web peuvent avoir un impact sur les performances de la page, en particulier sur la vitesse de chargement perçue de votre contenu textuel. Par défaut, les browsers masquent le texte utilisant une police web jusqu’à ce que la police soit complètement chargée, un comportement connu sous le nom de « Flash de texte invisible » (FOIT). Cela peut entraîner une mauvaise expérience utilisateur, affectant votre score Google PageSpeed Insights.

Pour fournir une expérience utilisateur fluide, assurez-vous que le texte reste visible pendant le chargement des polices web. De cette façon, le browser affichera immédiatement le texte dans une police de remplacement, puis l’utilisera avec la police web une fois le chargement terminé. Ce comportement, connu sous le nom de « Flash de texte sans style » (FOUT), est généralement une approche plus conviviale.

Voici comment s’assurer que le texte reste visible pendant le chargement des webfonts :

• Utiliser la propriété CSS font-display – Cette propriété contrôle la manière dont la police est affichée en fonction de si et quand elle est téléchargée et prête à être utilisée. La valeur font-display: swap; s’assure que le texte reste visible pendant le chargement de la police web en utilisant une police système jusqu’à ce que la police personnalisée soit prête. Ci-dessous, vous pouvez voir un exemple de code CSS incorporant la commande font-display: swap; descripteur.

   @font-face {
    font-family: ExampleFont;
    src : url(/chemin/vers/les/fonts/examplefont.woff) format('woff'),
         url(/chemin/vers/les/fonts/examplefont.eot) format('eot');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

• Héberger les polices localement – Héberger les polices sur votre serveur plutôt que sur un serveur tiers peut réduire les temps de chargement.
• Limitez le nombre de familles de polices – Bien que la variété des polices puisse améliorer votre design, elles donnent également du poids à votre page. Essayez de limiter le nombre de familles de polices, de graisses et de styles au strict nécessaire.
• Préchargement des polices web principales – Le préchargement permet au browser de télécharger les polices web au chargement de la page avant que tout le CSS ne soit analysé. Les sites web WordPress peuvent utiliser l’extension Speed Optimizer pour le préchargement des polices web.
  Pour activer cette fonctionnalité, ouvrez votre tableau de bord, allez dans Speed Optimizer > Frontend > General et activez Web Fonts Optimization. Vous pouvez aussi sélectionner les polices web à précharger dans l’option Fonts Preloading si vous en gérez plusieurs.

  

Jusqu’à présent, nous avons couvert les mesures les plus générales et les plus critiques. Cependant, vous pouvez mettre en œuvre des stratégies plus spécifiques pour améliorer davantage votre site web. Commençons par les instructions pour éviter les redirections excessives.

Étape 14. Évitez les redirections excessives

Souvent, vous devez utiliser des redirections lorsque vous déplacez ou supprimez des pages. Leur but est de rediriger les utilisateurs et les moteurs de recherche vers une URL différente de celle demandée à l’origine. Cependant, des redirections excessives ou inutiles peuvent ralentir le chargement des pages, ce qui a un impact négatif sur l’expérience utilisateur et sur votre score Google PageSpeed Insights.

Chaque redirection déclenche un cycle HTTP requête-réponse supplémentaire, augmentant le temps global de chargement d’une page. Ceci est particulièrement problématique pour les utilisateurs mobiles, qui dépendent souvent de connexions réseau moins fiables.

Voici comment éviter les redirections excessives et optimiser les performances de votre site web :

• Réduire les chaînes de redirection – Une chaîne de redirection se produit lorsqu’il y a plus d’une redirection entre l’URL d’origine et la page de destination finale. Il est important de mettre à jour tous les liens pour qu’ils pointent vers l’URL de destination finale afin de minimiser ces chaînes.
• Utilisez des liens directs – Dans la mesure du possible, veillez à utiliser des liens directs dans votre navigation, le plan du site et la structure du document.
• Vérifiez régulièrement vos redirections – Il est recommandé de vérifier régulièrement les redirections inutiles sur votre site.
• Utilisez judicieusement les redirections pour les sites mobiles – Si vous avez des sites distincts pour ordinateur et mobile, assurez-vous de rediriger correctement les utilisateurs mobiles. Évitez les redirections erronées, telles que l’envoi d’un utilisateur vers une page non pertinente ou l’utilisation d’une redirection alors qu’un lien direct serait plus approprié.

Après avoir corrigé les problèmes de redirection, vous pouvez examiner l’enchaînement des requêtes critiques. Vous trouverez plus d’informations dans la section suivante.

Étape 15. Évitez d’enchaîner les requêtes critiques

L’enchaînement se produit lorsque des ressources dépendent les unes des autres. Par exemple, un fichier JavaScript ou CSS demandé dans une autre ressource (comme un document HTML) crée une chaîne. Le browser doit attendre la réponse HTML pour découvrir la requête JavaScript ou CSS, puis attendre à nouveau pour obtenir la réponse JS ou CSS.

Plus la chaîne est longue, plus la page met de temps à s’afficher, ce qui aura un impact négatif sur votre score Google PageSpeed Insights. L’utilisation des méthodes suivantes peut vous aider à minimiser l’enchaînement des ressources.

• Minimiser le nombre de ressources critiques – N’inclut que les ressources qui sont absolument nécessaires pour le rendu initial de la page. Les fichiers JavaScript ou CSS non critiques peuvent être chargés de manière asynchrone ou différés jusqu’après le premier affichage.
  Pour WordPress, vous pouvez utiliser des plugins d’optimisation tels que Speed Optimiser, qui contiennent les fonctionnalités Minify CSS Files, Minify JavaScript Files et Defer Render-blocking JavaScript.
• Optimisez l’ordre de vos demandes – Donnez la priorité au chargement de contenu visible ou de contenu placé au-dessus de la ligne de flottaison. Cela permet de s’assurer que vos utilisateurs voient quelque chose à l’écran aussi rapidement que possible.
  Utilisez Speed Optimizer et son option Lazy Load Media si votre site web est basé sur WordPress.
• Précharger les ressources de clés – Vous pouvez utiliser le préchargement pour charger les ressources de clés plus tôt et réduire la longueur de la chaîne de requête. Par exemple, vous pouvez utiliser Web Fonts Optimization et Fonts Preloading dans Speed Optimizer pour votre site WordPress.

Pour monter d’un cran, vous pouvez améliorer la vitesse de chargement en préchargeant les requêtes de clé. Lisez la section suivante pour savoir comment procéder.

Étape 16. Précharger les requêtes de clé

Les requêtes de clé sont des requêtes critiques que la page exécute en priorité à une étape de chargement précoce. Il peut s’agir de n’importe quoi : des fichiers JavaScript, des styles CSS ou des polices web. Appliquer le préchargement aux requêtes de clé peut considérablement améliorer le temps de chargement de votre page.

Vous pouvez implémenter le préchargement des requêtes de clé avec quelques techniques :

• Identifiez les ressources clés – Il peut s’agir de fichiers JavaScript ou CSS essentiels, d’images importantes ou de polices web qui sont nécessaires au début du processus de chargement de la page.
• Utilisez la directive Preload – Ajoutez une balise link dans l’en-tête de votre document HTML avec `rel=”preload”` et href pointant vers la ressource que vous voulez précharger. Par exemple :

  <link rel="preload" href="/styles/important.css" as="style">

  L’attribut as est nécessaire pour spécifier le type de contenu à précharger.

• Précharger les polices web – Les polices web sont souvent découvertes tard dans le processus de chargement. Le préchargement des principales polices web peut les rendre disponibles plus tôt, réduisant ainsi le risque d’un « flash de texte non stylisé ». Par exemple :

  <link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin>

  Si vous gérez un site WordPress, vous pouvez utiliser une extension comme Speed Optimizer pour précharger les polices web.

• Soyez sélectif – Précharger un trop grand nombre de ressources peut nuire aux performances, car il peut en résulter le téléchargement de ressources non critiques qui entrent en concurrence avec des ressources plus importantes. Soyez sélectif sur ce que vous préchargez.
• Utiliser Preconnect ou Prefetch lorsque cela est approprié : Preconnect peut établir des connexions précoces avec des sources tierces importantes. Prefetch, d’un autre côté, peut aider à charger des ressources qui seront utilisées lors du prochain chargement de navigation/page.

À présent, nous pouvons nous concentrer sur l’optimisation du contenu animé de votre site web. L’étape suivante décrit les méthodes les plus utiles.

Étape 17. Utilisez les formats vidéo pour le contenu animé

Le contenu animé est un excellent moyen d’engager les visiteurs et d’enrichir leur expérience utilisateur. Cependant, le format que vous choisissez pour vos animations peut avoir un impact significatif sur la vitesse de chargement et les performances globales de votre site.

Traditionnellement, les animations étaient souvent créées au format GIF, mais les GIF peuvent être assez volumineux, ce qui ralentit les temps de chargement. Une meilleure alternative est d’utiliser les formats vidéo pour le contenu animé. Les formats vidéo, tels que MP4 ou WebM, sont plus efficaces au niveau de la compression et peuvent fournir une meilleure qualité avec un fichier plus petit.

Vous trouverez ci-dessous quelques astuces pour gérer le contenu animé.

• Conversion de GIF en formats vidéo – Des outils comme FFmpeg ou des convertisseurs en ligne peuvent vous aider à convertir des GIF existants aux formats MP4 ou WebM. Vous pouvez ensuite utiliser l’élément vidéo HTML5 pour les intégrer à votre site.
• Utilisez les bons paramètres de compression – Lorsque vous créez une vidéo, essayez différents paramètres de qualité et de compression pour trouver un équilibre entre la taille du fichier et la qualité visuelle.
• Lecture automatique et boucle – Vous pouvez faire en sorte que vos vidéos se comportent comme des GIF en utilisant les attributs autoplay et loop dans la balise vidéo. N’oubliez pas d’ajouter `muted` pour les vidéos en lecture automatique, en particulier sur les appareils mobiles.
• Utilisez une plateforme d’hébergement vidéo – Envisagez d’utiliser une plateforme d’hébergement vidéo comme YouTube ou Vimeo. Cela peut réduire la charge de votre serveur, offrir une bonne expérience de visionnage sur divers appareils et connexions Internet, et offrir des fonctionnalités supplémentaires comme l’analyse vidéo.

Examinons maintenant quelques pratiques de maintenance saines pour les applications CMS populaires telles que les sites WordPress.

Étape 18. Réduisez l’utilisation de code tiers

Du code tiers correspond à des scripts hébergés sur d’autres sites web, mais chargés et exécutés sur le vôtre. Il peut s’agir de scripts pour l’analyse, la publicité, le service client, les boutons de partage sur les réseaux sociaux et d’autres fonctionnalités. Ils fournissent généralement des fonctionnalités utiles, mais peuvent avoir un impact significatif sur le temps de chargement et les performances globales de votre site.

Chaque script tiers nécessite une requête HTTP supplémentaire, ce qui augmente le temps de chargement. De plus, comme ces scripts sont hébergés sur des serveurs externes, vous avez moins de contrôle sur leurs performances.

Les directives suivantes peuvent aider à réduire leur impact :

• Auditer les scripts tiers – Commencez par identifier tous les scripts tiers exécutés sur votre site web. Pour ce faire, vous pouvez utiliser l’onglet Outils de développement de Google Chrome. Évaluez la valeur fournie par chaque script par rapport à son impact sur les performances.
• Limitez le nombre de scripts tiers – N’utilisez que les scripts tiers nécessaires. Chaque script que vous supprimez améliorera le temps de chargement de votre site et les performances globales.
• Charger les scripts de manière asynchrone – Le chargement asynchrone permet au reste de la page web de continuer à se charger pendant le téléchargement du script. Appliquer ceci aux scripts tiers peut empêcher ces derniers de bloquer l’affichage de la page.
• Utiliser Lazy Loading – Pensez à utiliser le chargement différé pour le contenu tiers qui n’est pas immédiatement visible (comme les widgets ou les éléments intégrés). Cette technique retarde le chargement des ressources jusqu’à ce qu’elles soient nécessaires, comme lorsque l’internaute fait défiler la page vers le bas.
• Héberger les scripts localement : Si le fournisseur tiers le permet, envisagez d’héberger les scripts localement sur votre propre serveur. Vous aurez ainsi un meilleur contrôle sur leurs performances et vous éliminerez une recherche DNS supplémentaire.

Un autre problème souvent rencontré dans les sites web WordPress est la taille trop importante du modèle objet de document (DOM). Apprenez comment y faire face à l’étape suivante.

Étape 19. Réduire la taille du modèle objet d’un document (DOM)

Le DOM (Document Object Model) est une représentation de votre page web que les browsers utilisent pour construire l’interface visuelle. Lorsqu’une page web possède un DOM complexe ou volumineux, cela signifie qu’il y a de nombreux éléments sur la page que le browser doit traiter et gérer. Cela peut ralentir le temps de chargement de votre page, avoir un impact sur l’interaction de l’utilisateur et réduire votre score Google PageSpeed Insights.

Un DOM volumineux peut provenir d’éléments profondément imbriqués ou simplement trop d’éléments en général sur la page. Un nombre élevé d’éléments nécessite plus de ressources mémoire et processeur, et ralentit le rendu de la page.

Voici quelques stratégies pour réduire la taille de votre DOM :

• Simplifier la structure de la page – Essayez de simplifier votre structure HTML autant que possible. Réduisez la profondeur et le nombre d’éléments enfants et évitez les relations parent-enfant inutiles.
• Supprimer les éléments inutiles – Élimine les éléments qui ne contribuent pas à l’interface visuelle ou aux fonctionnalités de la page. Cela peut inclure des éléments vides ou en double.
• Diviser les grandes pages en pages plus petites – Une grande page avec beaucoup de contenu générera inévitablement un grand DOM. Pensez à diviser les grandes pages en plusieurs pages plus petites.
• Limiter les éléments de la page – En règle générale, essayez de limiter votre page web à moins de 1500 éléments. Les pages comportant plus d’éléments peuvent souvent présenter des problèmes de performance.
• Lazy load (chargement différé) – Envisagez le lazy load pour le contenu situé en dessous de la ligne de flottaison. Cela peut retarder le traitement des parties non critiques de votre page, réduisant la taille initiale du DOM.
• Utilisez des thèmes de bonne réputation – Très souvent, le coupable à l’origine d’un DOM de grande taille est un thème WordPress qui contient beaucoup de code indésirable. Utilisez des thèmes qui ont fait leurs preuves avec du code propre pour éviter de générer un gros DOM.

Enfin, assurez-vous que votre site web utilise les dernières technologies, qui améliorent généralement les performances et la sécurité. Lisez les deux dernières étapes pour plus d’informations.

Étape 20. Implémentez HTTP/2

HTTP/2, la dernière version de HTTP, offre des améliorations de performances par rapport à son prédécesseur, telles que le multiplexage et la compression d’en-tête. La mise en œuvre de HTTP/2 peut améliorer considérablement le score de votre site web.

Assurez-vous que votre serveur web est configuré pour utiliser ce protocole afin d’assurer de meilleurs temps de chargement et de meilleures performances. Les serveurs SiteGround intègrent cette fonctionnalité depuis longtemps.

Étape 21. Utilisez les dernières technologies PHP

La plupart des sites web, y compris les systèmes de gestion de contenu (CMS) populaires comme WordPress, sont construits en PHP. PHP est un langage de programmation qui subit constamment des mises à jour et des révisions qui incluent des améliorations en termes de performances et de sécurité.

Utilisez la dernière version de PHP possible pour tirer parti de toutes les mises à jour de performances et de sécurité, ce qui peut augmenter votre score PSI. SiteGround prend toujours en charge les dernières technologies, et PHP ne fait pas exception. Vous pouvez activer le PHP managé, qui définira automatiquement la dernière version stable de PHP.

De plus, nous avons développé notre propre configuration de serveur PHP, appelée Ultrafast PHP, qui peut augmenter la vitesse de votre site web jusqu’à 30 %. Pour en savoir plus, lisez ce guide sur Ultrafast PHP.

Conclusion

Google PageSpeed Insights est un outil indispensable pour tout propriétaire ou développeur de site web qui cherche à optimiser les performances de son site web. En fournissant des statistiques précieuses et des recommandations exploitables, il vous aide à identifier les domaines d’amélioration qui peuvent considérablement améliorer le temps de chargement de votre site web, sa convivialité et l’expérience utilisateur globale.

Cet article présente plusieurs stratégies pour améliorer votre score PageSpeed Insights. Nous espérons que vous les utiliserez à bon escient et réaliserez la meilleure version de votre site web.

Questions fréquemment posées sur Google PageSpeed Insights

Google PageSpeed Insights affecte-t-il le classement de mon site web ?

Non, Google ne prend pas en compte le score de PageSpeed Insights lorsqu’il formule le classement référencement de votre site web. Cependant, PSI mesure des paramètres tels que l’accessibilité et les performances qui formulent le score d’optimisation des moteurs de recherche.

Combien coûte Google PageSpeed Insights ?

Google PageSpeed Insights est un outil entièrement gratuit et Google n’a pas l’intention d’en faire un service premium.

Google est-il propriétaire de Google PageSpeed Insights ?

Oui. PageSpeed Insights et Lighthouse sont tous deux des outils développés et la propriété de Google.

Pourquoi y a-t-il une différence entre les scores de PageSpeed Insights et de Lighthouse ?

Les scores de PageSpeed Insights et Lighthouse varient en raison des approches différentes que les deux outils utilisent pour tester votre site web. PageSpeed Insights s’appuie sur des données en temps réel collectées auprès des utilisateurs qui visitent votre site web sur divers réseaux et appareils. Lighthouse teste votre site web dans un environnement contrôlé avec des conditions préfixées : le même réseau et les mêmes appareils simulés.