Google PageSpeed ​​Insights: un guide débutant pour équilibrer les scores avec la fonctionnalité du site

Chaque seconde compte en ligne, et la vitesse de votre page Web affecte directement les performances du référencement, le trafic et les conversions. La façon la plus simple d'obtenir une image claire des performances de votre site est de la tester sur Google Pagespeed Insights (Google PSI).

Il s'agit d'un outil d'analyse des performances Web gratuit qui fournit un score global (sur 100) et des conseils exploitables pour augmenter vos performances. Et la cerise sur le gâteau est que vous obtenez les résultats en quelques secondes!

Mythe commun: "Je dois marquer 100/100 sur PSI pour avoir un site Web rapide."

C'est une idée fausse commune. Bien que les scores élevés soient bien, ce qui compte le plus, c'est de passer l'évaluation de base du Web Vitals (CWV) sur Google PSI.

Mais pourquoi?

Core Web Vitals est un ensemble de trois mesures créées par Google pour mesurer une véritable expérience utilisateur sur une page. Ces mesures ont fait partie du système de classement de base de Google, affectant directement votre visibilité sur les moteurs de recherche.

Ce guide vous aidera à trouver le bon équilibre entre l'application des meilleures pratiques Web et le maintien des fonctionnalités et de la conception qui comptent à vos visiteurs.

Qu'est-ce que Google PagesPeed Insights?

PageSpeed ​​Insights (PSI) est un outil gratuit créé par Google qui analyse les performances d'une page Web et fournit des suggestions de béton d'amélioration. Il fournit un score de performance avec des commentaires détaillés basés sur les métriques du phare. Lighthouse est un outil open-source (également développé par Google) conçu pour améliorer la qualité et l'expérience utilisateur des pages Web.

Voici un exemple de la partition globale et de quelques mesures importantes que vous pouvez trouver sur Google PSI:

Mesures clés du phare utilisées dans Google Pagespeed Insights

Google PSI utilise un phare pour calculer les scores de performances. Ces scores sont basés principalement sur les vitaux du Web de base et d'autres mesures importantes qui aident à évaluer l'expérience des utilisateurs et le comportement de chargement.

Pour chaque KPI, voici les couleurs de score à suivre:

• 0 à 49 (rouge): pauvre

• 50 à 89 (orange): Besoin d'amélioration

• 90 à 100 (vert): bon

Et voici les métriques.

1. La plus grande peinture contente (LCP) vous indique à quelle vitesse le contenu principal se charge.

Exemple: lorsque l'image et le titre du héros d'un article de blog apparaissent clairement à l'écran.

2. L'interaction à la peinture suivante (INP) indique la rapidité avec laquelle votre site réagit lorsque quelqu'un clique ou tape.

Exemple: vous appuyez sur «Ajouter au panier» et le bouton répond instantanément ou il pourrait y avoir un petit décalage.

3. Shift de disposition cumulative (CLS) Mesure à quel point la page est stable lors du chargement.

Exemple: vous êtes sur le point de cliquer sur un lien lorsque la disposition se déplace (comme une annonce), et vous appuyez accidentellement autre chose.

4. First Contentful Paint (FCP) calcule l'heure jusqu'à l'apparition du premier bit de contenu.

Exemple: un logo apparaît peu de temps après avoir atterri sur la page.

5. Temps de premier octet (TTFB) Indique combien de temps il faut pour que le serveur réponde.

Exemple: vous cliquez sur un lien, et il y a une pause avant que tout ne commence à se charger.

6. Le temps de blocage total (TBT) analyse combien de temps le navigateur prend pour répondre aux entrées.

Exemple: la page semble chargée mais ne réagit pas immédiatement à votre parchemin ou cliquez.

7. L'indice de vitesse (SI) vous indique à quelle vitesse tout sur la page semble visuellement complet.

Exemple: le contenu se remplit en douceur au lieu de charger en morceaux.

Pourquoi l'évaluation de base du Web Vitals est plus importante que le score de performance

Les Core Web Vitals (CWV) font partie des signaux de classement de Google, ce qui signifie qu'ils peuvent influencer votre référencement et comment votre site Web se classe sur Google. Tout effort pour obtenir un «bon» score sur l'évaluation CWV signifie que votre site offre une expérience rapide, stable et réactive pour vos visiteurs, et que les moteurs de recherche vous récompenseront pour cela.

L'optimisation de base du Web Vitals est également importante pour les agences WordPress; La plupart d'entre eux s'engagent à livrer des sites qui marquent dans le vert. C'est le cas, par exemple, avec Agence Kn à Lyon. Son fondateur, Thomas Baudry, explique:

Les principaux vitaux du Web sont au cœur de notre approche de qualité: nous les testons régulièrement pendant le développement pour garantir les performances et l'expérience utilisateur en douceur. Juste avant de passer en direct, nous activons WP Rocket pour maximiser les résultats. Nous partageons toujours les scores PagesPeed Insights avec nos clients, ainsi qu'une garantie de performance: un score de 90+ en performance et accessibilité et 100 dans les meilleures pratiques et SEO.

Section de diagnostics: Conseils exploitables pour augmenter les performances de votre site

PageSpeed ​​Insights fournit une section de diagnostic détaillée répertoriant des actions spécifiques pour améliorer les performances de votre site. Il signale les problèmes, explique pourquoi ils comptent et suggère ce que vous devez faire pour les résoudre. PSI détecte lorsque votre site est construit sur WordPress et vous recommande parfois d'utiliser un plugin pour résoudre facilement certains problèmes de l'audit.

Voici un exemple de la section de diagnostic de performances Web avec une liste de choses qui devraient être faites, comme réduire le JavaScript inutilisé, éliminer les ressources de blocage des rendements et permettre la compression de texte.

Une fois que vous aurez résolu le problème, il sera déplacé vers la section d'audit adopté et deviendra vert.

Lire Google Psi via une lentille équilibrée

Google PageSpeed ​​Insights vous aide à identifier les éléments qui affectent les performances et comment les réparer, et non les supprimer.

Par exemple, des fonctionnalités fonctionnelles telles que les widgets de chat, les curseurs et les vidéos intégrées ajoutent de la valeur à votre site, mais elles sont souvent lourdes de ressources et peuvent nuire aux performances si elles ne sont pas correctement optimisées.

Imaginez que PSI signale votre curseur de page d'accueil.

Il pourrait mettre en évidence des problèmes tels que:

• Les images ne sont pas compressées ou correctement optimisées

• Les images ne sont pas servies au format de nouvelle génération (comme WebP ou AVIF)

• CSS inutilisé augmente le temps de chargement
  

PSI ne vous suggère pas de supprimer le curseur. Au lieu de cela, il souligne que les images doivent être mieux préparées pour le Web: le bon format, la bonne taille et bien compressés.

Le CSS inutilisé peut être nettoyé à l'aide d'outils en ligne ou de plugins WordPress spécialement conçus pour supprimer le code inutile. Une fois ces optimisations de performances Web terminées, exécutez à nouveau le test; Vous verrez probablement le problème résolu ou amélioré.

Nicolas Richer, expert WordPress chez WPCHEF.FR, dit:

Obtenir un 70 ou 80 sur Google PSI est déjà un bon signe: vous savez que vous avez assez bien fait votre travail! Le fait est qu'il existe une réelle différence entre les données de laboratoire et la façon dont les utilisateurs vivent réellement votre site. Gardez à l'esprit que frapper une partition verte peut être beaucoup plus difficile pour certains sites, comme une boutique WooCommerce complexe ou un site chargé du constructeur de pages, par rapport à un simple site de brochure. Donc, si votre score est dans l'orange, ne paniquez pas. Mettre les choses en contexte; Cela peut toujours signifier que votre site n'est pas mal optimisé. Et une dernière chose: les performances mobiles comptent le plus, alors assurez-vous d'exécuter votre test à partir de l'onglet mobile. Le bureau est secondaire.

Ce qui affecte votre score Google PSI

Ces 5 problèmes courants nuisent souvent à votre score Google PSI et ont le plus grand impact sur vos résultats globaux de performance:

1. Manque de mise en cache et de compression

Sans la mise en cache et la compression de texte appropriées, votre site doit tout recharger à partir de zéro à chaque fois, augmentant la charge du serveur et ralentissant la livraison de la page.

Exemple : un site sans mise en cache de navigateur fait que chaque visiteur renvoie redécouvre l'ensemble des fichiers CSS et JS, même s'ils n'ont pas changé. Cela ralentit votre site, et Google PSI identifie la place à l'amélioration en conséquence.

2. Code non optimisé (CSS et JS)

Les fichiers CSS et JavaScript gonflés ou inutilisés peuvent retarder la rapidité avec laquelle votre contenu principal apparaît.

Exemple : une page d'accueil chargeant 600 Ko de retards JavaScript inutilisées, ce qui rend le contenu visible de plusieurs secondes sur mobile. Google PSI vous demandera probablement d'optimiser votre JS et de hiérarchiser les scripts essentiels à la place.

3. Grandes images et vidéos

Les fichiers multimédias lourds prennent plus de temps à charger, en particulier sur les connexions plus lentes, affectant à la fois la vitesse et la stabilité visuelle.

Exemple : une image de héros de 3 Mo au format JPG fait charger le plus grand contenu, échouant à la plus grande métrique de peinture de contenu (LCP). Google PSI peut vous suggérer de compresser cette image et de la convertir en un format plus léger comme WebP ou AVIF.

4. Trop de demandes HTTP externes (y compris les scripts tiers)

Chaque demande externe ajoute plus de travail au navigateur, surtout si les fichiers sont hébergés sur des serveurs lents ou distants.

Exemple : plusieurs scripts tiers comme les publicités, les widgets de chat et les flux sociaux bloquent le rendu et entraînent votre score Google PSI.

5. Plugins excessifs ou mal gérés

Trop de plugins, en particulier des plugins ou inefficaces, peuvent faire gonfler votre code et se mettre en conflit les uns avec les autres, en réduisant les performances.

Exemple : un magasin WooCommerce avec plus de 20 plugins actifs comprend des scripts et des styles redondants qui ralentissent chaque charge de page. Google PSI peut vous demander de réduire votre code inutilisé ou de minimiser les travaux du fil principal.

Optimisations pratiques de Google Psi en anglais simple

Google PageSpeed ​​Insights vous lance souvent des termes techniques, mais voici ce qu'ils signifient vraiment et comment les réparer facilement avec deux plugins WordPress: WP Rocket et Imagify. Ces outils fonctionnent ensemble pour résoudre la plupart des problèmes signalés par PSI et vous aident à atteindre plus facilement les scores verts.

WP Rocket est le plugin de performance le plus puissant mais le plus facile pour WordPress qui peut améliorer instantanément vos principaux vitaux Web. Il applique 80% des performances Web les meilleures pratiques lors de l'activation, comme la mise en cache, la compression, la minification et le chargement paresseux. Vous n'avez pas besoin de toucher une seule ligne de code. Pour les ajustements avancés, vous pouvez simplement activer les fonctionnalités de performance telles que le chargement JavaScript différé ou la suppression des CSS inutilisés en un seul clic.

Imagify est le plugin d'optimisation d'image le plus facile pour WordPress. Il comprime vos images sans perte de qualité et les convertit automatiquement en formats de nouvelle génération comme WebP et AVIF. Le résultat: des fichiers d'image plus petits, des temps de chargement plus rapides et une expérience utilisateur plus lisse, sans soulever un doigt.

Maintenant que vous en savez plus sur les deux outils, voyons comment ils peuvent aider à corriger et à optimiser certaines des recommandations PSI.

1. Mettre en œuvre la mise en cache

Avertissement de performance dans Google PSI: servez des actifs statiques avec une politique de cache efficace.

Ce que cela signifie: enregistrez les versions des pages de votre site Web afin qu'elles se chargent plus rapidement pour les visiteurs répétés.

WP Rocket le fait automatiquement . La mise en cache est activée sur le bureau et le mobile hors de la boîte lorsque vous activez le plugin.

2. Activer la compression

Avertissement de performances dans Google PSI: activer la compression du texte.

Ce que cela signifie: réduire les fichiers comme HTML, CSS et JavaScript avant de les envoyer au navigateur.

WP Rocket permet automatiquement la compression GZIP pour réduire la taille du fichier et le temps de chargement.

3. Minification de code

Avertissements de performances dans Google PSI: Minify CSS et JS.

Ce que cela signifie: supprimez des caractères inutiles (comme des espaces ou des commentaires) dans le code pour le rendre plus léger.

WP Rocket minifie automatiquement les fichiers CSS et JavaScript.

4. Éliminer les ressources de blocage des rendements

Avertissement de performances dans Google PSI: éliminer les ressources de blocage des rendements.

Ce que cela signifie: empêcher certains scripts ou styles de retarder la partie visible de votre site Web.

WP Rocket s'attaque à ce problème de performance avec les options «Load JS différé», «Delay JS Exécution» et «Supprimer le CSS inutilisé».

5. Implémentez le chargement paresseux

Avertissement de performances dans Google PSI: différez-vous des images hors écran.

Ce que cela signifie: Chargez des images, des vidéos et des iframes que lorsque les utilisateurs leur font défiler.

WP Rocket comprend une fonctionnalité de chargement Lazy que vous pouvez activer en un seul clic. Il améliore la vitesse de chargement en reportant le chargement d'éléments hors écran, y compris les images, les images d'arrière-plan CSS, les vidéos et les iframes, jusqu'à ce que les utilisateurs leur font défiler.

6. Servir les images dans les formats de nouvelle génération

Avertissement de performances dans Google PSI: servez des images dans des formats de nouvelle génération.

Ce que cela signifie: utilisez des formats modernes comme WebP ou AVIF au lieu de plus anciens et plus lourds comme JPG ou PNG.

Imagify convertit automatiquement vos images en webp et vous donne également la possibilité de les convertir en avif. Le plugin utilise le mode de compression intelligente qui compresse les images tout en gardant la qualité visuelle intacte.

Comment utiliser Google PSI pour votre site Web

Suivez ces 6 étapes pour vous préparer correctement, gardez un œil critique et adoptez une approche étape par étape pour améliorer les performances de votre site Web:

1. Comprenez vos besoins et votre type de site Web

Commencez par l'objectif de votre site: est-il lourd de contenu, axé sur l'image, le commerce électronique ou un blog simple? Les attentes et les exigences sont très différentes. Un blog personnel avec quelques articles n'a pas les mêmes besoins qu'une plate-forme immobilière avec des listes, des intégrations de cartes et du contenu généré par les utilisateurs. Gardez ce contexte à l'esprit avant de plonger dans les rapports de performance.

2. Allez sur Google PSI et entrez votre URL

Rendez-vous sur Pagespeed Insights et collez l'URL de votre site pour démarrer l'audit:

3. Interpréter soigneusement les résultats

Utilisez PSI pour identifier les domaines à améliorer, mais ne supprimez pas aveuglément des fonctionnalités essentielles à votre entreprise.

Exemple: Si vous exécutez un site immobilier et que PSI signale votre intégration de carte en tant que JavaScript-lourde, cela ne signifie pas que vous devez le supprimer. Il en va de même pour les plugins de chat ou les images de haute qualité de maisons à vendre. Optimisez ces fonctionnalités au lieu de les retirer .

4. Agissez et commencez à optimiser

Avec les bons outils et les bons plugins, l'amélioration des vitaux du Web et la résolution des problèmes PSI devient beaucoup plus facile.

Si votre rapport montre des problèmes d'image tels que «servir des images dans des formats de nouvelle génération» ou «codent efficacement les images» ou «minifant JS», «servir des actifs statiques avec une politique de cache efficace», essayez d'utiliser Imagify et WP Rocket pour les réparer.

Répétez les étapes pour chaque problème signalé par Pagespeed Insights, et vos principaux vitaux Web s'amélioreront sûrement.

5. Surveillez vos modifications

Après quelques jours ou semaines, effectuez un autre test PSI pour suivre les améliorations. Vous pouvez également suivre votre progression de référencement - cochez si vos classements se sont améliorés car vos principaux vitaux Web sont devenus verts.

6. Tester avec de vrais utilisateurs

Aller au-delà des chiffres. Demandez à vos visiteurs ou clients sur leur expérience:

• Y a-t-il trop de pop-ups?

• Le processus d'achat est-il fluide?

• Le site se sent-il rapide?

Une fois que votre site a rassemblé suffisamment de trafic, PSI commencera également à afficher les données sur le terrain, ce qui signifie des mesures de performances réelles en fonction du comportement réel de l'utilisateur.

N'hésitez pas à enregistrer cette feuille de triche pour plus tard afin de savoir quoi faire lorsque vous décidez d'exécuter votre premier audit:

Outils alternatifs pour aller au-delà des tests Google PSI

Bien que Google Pagespeed Insights soit un excellent point de départ, deux autres outils de performances Web se distinguent pour des tests de performances plus profonds: GTMetrix et WebPageTest. Les deux offrent des données plus granulaires et des options de personnalisation qui vont au-delà de ce que PSI fournit en termes de surveillance des performances Web.

Tester les performances avec gtmetrix

GTMetrix est un outil de freemium également propulsé par le phare. Il est idéal pour comprendre comment chaque ressource a un impact sur les performances et comment le site se comporte dans différentes conditions. Comme Google PSI, il affiche toutes les mesures clés des performances Web - y compris les vitaux du Web de base, mais cela va plus loin.

GTMetrix fournit des informations détaillées telles que le temps entièrement chargé en secondes, le poids total de la page avec une ventilation des types de contenu (JavaScript, images, CSS, etc.), et un graphique en cascade visuelle qui vous permet de voir exactement quand et comment chaque élément se charge. Vous pouvez également tester plusieurs URL côte à côte pour comparer les résultats et simuler plus de 40 périphériques mobiles et de bureau et plusieurs types de connexions (4G, LTE etc.).

Tester les performances avec WebPageTest

WebPageTest est un outil gratuit qui offre des fonctionnalités avancées pour une analyse approfondie et est un favori parmi les développeurs pour sa flexibilité et ses informations détaillées. Il fournit des graphiques en cascade et une ventilation complète de contenu pour vous aider à comprendre exactement comment votre page se charge.

Vous pouvez comparer visuellement plusieurs URL et même l'exportation de rapports de performances, ce qui le rend idéal pour une analyse plus approfondie ou le partage avec les clients. WebPageTest prend en charge 300 tests gratuits par mois et vous donne accès à plus de 30 emplacements de tests mondiaux. Il vous permet également de tester tous les principaux navigateurs et vitesses de connexion pour simuler plus précisément les conditions du monde réel (similaire à GTMetrix).

Limitations Google PSI

Pour résumer, Google PSI a trois limitations majeures couvertes par GTmetrix et WebPageTest:

1. Spécificité de l'appareil: vous ne pouvez pas sélectionner un appareil exact (par exemple iPhone 12) pour les tests.

2. Contrôle de l'emplacement: Vous ne pouvez pas choisir un emplacement spécifique pour simuler l'expérience d'un utilisateur (par exemple Paris).

3. Les KPI manquants: PSI ne montrent pas de temps entièrement chargé, le poids total de la page avec une panne de contenu ou ne fournit pas un graphique de cascade visuelle.

Voici un tableau de résumé qui compare les trois outils:

Google PageSpeed ​​Insights FAQs

Comment fonctionne Google PSI?

Google PageSpeed ​​Insights est un outil gratuit qui évalue à quelle vitesse et stable votre page Web est sur le mobile et le bureau. Il exécute un test de performance à l'aide de la technologie du phare et vous donne un score global sur 100, en fonction des mesures de performances clés telles que la vitesse de chargement et la stabilité visuelle. Il fournit également des diagnostics et des suggestions détaillés pour vous aider à comprendre ce qui ralentit les choses et comment le réparer.

Comment puis-je tirer parti de Google PSI pour l'optimisation mobile?

La meilleure façon d'utiliser Google PSI pour l'optimisation mobile est de simplement cliquer sur l'onglet mobile lors de l'exécution de votre test PSI. Il simule comment votre site fonctionne dans des conditions mobiles du monde réel, y compris des connexions plus lentes et une puissance réduite de l'appareil. C'est la meilleure façon de voir ce que les visiteurs mobiles vivent vraiment - et où optimiser d'abord.

Comment puis-je améliorer mon score Google PSI?

Concentrez-vous sur les zones de grande impact: mise en cache du navigateur, minimisation JavaScript inutilisée et CSS, compresser et redimensionner les images et réduire les scripts tiers. Des outils comme WP Rocket et Imagify facilitent la résolution des problèmes les plus courants, sans toucher au code.

Comment télécharger un rapport Pagespeed Insights?

Il n'y a pas de bouton de téléchargement en un clic sur l'interface PSI. Mais si vous êtes un peu averti, vous pouvez utiliser l'API PageSpeed ​​Insights pour récupérer vos résultats au format JSON pour le rapport ou l'intégration dans vos outils. Pour les utilisateurs de tous les jours, votre meilleur pari est de prendre une capture d'écran ou de copier les résultats manuellement.

Pourquoi mes scores PSI mobiles et de bureau sont-ils différents?

PageSpeed ​​Insights teste les mobiles et le bureau séparément, et les résultats diffèrent souvent. Les scores mobiles sont généralement plus bas en raison des appareils plus lents et de la limitation du réseau qui simule les conditions du monde réel. Les vues mobiles peuvent également charger différentes règles CSS, impactant la vitesse et la disposition.

Comment le score de performance est-il mesuré?

PageSpeed ​​Insights calcule votre score de performance de la page Web sur 100 sur la base de plusieurs mesures clés du phare, y compris la première peinture contente, l'indice de vitesse, la plus grande peinture contente, le temps de blocage total et le décalage de disposition cumulatif. Chacun d'eux joue un rôle différent dans la note finale. La calculatrice de notation des phares de Google indique quel KPI a le plus de poids dans la note finale.

Quelle est la différence entre les données de laboratoire et les données sur le terrain dans Google Pagespeed Insights?

Les données de laboratoire sont générées dans un environnement de test contrôlé avec des conditions fixes (périphérique, réseau), ce qui les rend utiles pour le débogage et le repérage des problèmes de performances. Les données sur le terrain, en revanche, reflètent de véritables expériences utilisateur au cours des 28 derniers jours, donnant une vue plus précise de la façon dont votre site fonctionne dans le monde réel.

Pourquoi Google PSI affiche-t-il différents scores dans les données de laboratoire et de terrain?

Étant donné que les données de laboratoire simulent le chargement sur un appareil prédéfini et une connexion, bien que les données sur le terrain soient basées sur des visites réelles avec des appareils, des emplacements et des réseaux variés, votre score PSI peut différer entre les deux, selon la façon dont les utilisateurs interagissent réellement avec votre site.

Quel est le plus important: données de laboratoire ou données sur le terrain?

Les données sur le terrain sont généralement plus précieuses car elles sont basées sur une véritable expérience utilisateur. Cependant, les données de laboratoire sont toujours essentielles pour tester et résoudre les problèmes de performances pendant le développement. Idéalement, utilisez les deux pour guider les améliorations.

Emballage

Google PageSpeed ​​Insights (PSI) est l'un des outils gratuits les plus fiables pour mesurer les performances de votre site Web et identifier ce qui affecte la vitesse et l'expérience utilisateur. Il se concentre sur les mesures de performances Web clés et les vitaux de base du Web, qui sont directement liés à votre référencement et à votre classement.

Cet article aurait dû vous aider à mieux comprendre le fonctionnement du PSI, comment lire ses rapports et les étapes pratiques que vous pouvez prendre pour améliorer vos scores, sans sacrifier votre conception ou votre fonctionnalité.

Il est maintenant temps de passer à l'action:
Exécutez votre audit sur Google Pagespeed Insights et optimisez vos principaux vitaux Web avec WP Rocket - aucun risque pris grâce à la garantie de remboursement de 14 jours!