Comment augmenter le score Google PageSpeed ​​Insights pour WordPress

La vitesse de chargement d'un site Web peut faire ou défaire son succès. Si vous comparez deux pages identiques, la page plus rapide obtient un traitement préférentiel à partir de moteurs de recherche comme Google. Heureusement, il existe un moyen de tester la vitesse de votre site Web et d'obtenir des conseils pour l'améliorer. Cela s'appelle Google PagesPeed Insights - voici ce qu'il est et comment vous pouvez l'utiliser.

Qu'est-ce que Google PagesPeed Insights?

Google PageSpeed ​​Insights (PSI) est un outil en ligne gratuit développé par Google qui analyse la vitesse et divers éléments de l'expérience utilisateur des pages Web sur les appareils mobiles et de bureau. Il analyse la page et donne des scores et des recommandations pour aider les propriétaires de sites Web à améliorer les performances de leur site. Tout le monde peut exécuter un rapport sur n'importe quelle page Web - c'est un excellent moyen de voir dans quelle mesure vos propres sites et concurrents sont en cours d'exécution.

Voici une démo en direct d'un site Web construit avec notre thème Divi WordPress où vous cliquez sur un bouton pour exécuter un rapport de PagesPeed rapide si vous ne l'avez pas déjà fait.

L'équipe Chrome de Google a introduit Core Web Vitals (CWV) en 2020 pour normaliser les mesures pour déterminer la bonne vitesse du site et l'expérience utilisateur. PageSpeed ​​Insights est simplement l'outil qui analyse et rapporte ces mesures. C'est pourquoi il est crucial pour les propriétaires de sites de comprendre les mesures CWV et comment affecter le référencement de votre page.

Core Web Vitals: Que signifient et mesurent ces acronymes?

Votre score PageSpeed ​​est mesuré à travers cinq mesures de base (bien que seulement trois soient vraiment considérées comme «noyau», les deux autres étant appelés «notables».

Voici une explication rapide des acronymes LCP, INP, CLS, FCP et TTFB:

• LCP (la plus grande peinture de contenu) mesure combien de temps il faut pour le plus grand élément de contenu (image, vidéo, bloc de texte) visible dans la fenêtre à rendre à l'écran. Il représente la rapidité avec laquelle le contenu principal de la page est visible pour l'utilisateur. Visez 2,5 secondes ou moins pour une bonne expérience utilisateur.
• L'INP (l'interaction à la peinture suivante) mesure la réactivité d'une page aux interactions utilisateur. Il examine la latence de toutes les interactions de clics, de robinet et de clavier lors de la visite d'un utilisateur sur une page et rapporte une seule valeur représentant la latence typique de la page. Un bon INP est de 200 millisecondes ou moins. Ceci était appelé délai d'entrée .
• CLS (décalage de disposition cumulatif) mesure la stabilité visuelle d'une page. Il quantifie la quantité de mouvement du contenu visible dans la fenêtre. Les décalages de mise en page inattendus peuvent frustrer les utilisateurs (par exemple, si un bouton se déplace lorsqu'ils essaient de cliquer dessus). Visez un score CLS de 0,1 ou moins.
• FCP (First Contentful Paint) mesure le temps à partir duquel la page commence à se charger pour que tout contenu (texte, image, etc.) soit d'abord peint à l'écran. Il indique à quelle vitesse l'utilisateur obtient des commentaires visuels que la page charge. Visez 1,8 seconde ou moins.
• TTFB (le temps de premier octet) mesure le temps nécessaire au navigateur pour recevoir le premier octet de données du serveur après avoir demandé une page. C'est une métrique clé pour la réactivité du serveur. Visez 800 millisecondes ou moins.

Pourquoi prioriser la vitesse de la page mobile?

Avec l'avènement des smartphones et le fait que la plupart des recherches se produisent maintenant à partir d'appareils mobiles, Google et d'autres moteurs de recherche ont commencé à hiérarchiser l'expérience mobile des sites Web et des pages Web. Ainsi, lorsque vous exécutez une évaluation PagesPeed Insight, vous verrez qu'il vous donne un score pour le bureau et le mobile.

D'après mon expérience, de nos jours, obtenir un score de 95 ou plus sur un bureau est très facile mais beaucoup plus difficile avec une version mobile. C'est pour plusieurs raisons:

1. De nombreux concepteurs de sites Web conçoivent toujours leurs sites Web principalement à partir de l'expérience de bureau. La conception mobile est une réflexion après coup.
2. Le test de vitesse mobile suppose les vitesses Internet à l'aide de données cellulaires, tandis que les bureaux ont tendance à utiliser des connexions Internet à domicile ou à haut débit stables et à grande vitesse. En raison de cette disparité, les expériences mobiles ont tendance à être plus lentes.
3. Sur la base du n ° 1 ci-dessus, les concepteurs Web optimisent également leurs sites Web en pensant à des ordinateurs de bureau, ce qui signifie que bon nombre des meilleures optimisations ne sont pas adaptées à l'expérience mobile.

Compte tenu de cela, assurez-vous que votre expérience mobile est au moins aussi bonne que votre bureau. Mais de toute façon, les expériences de bureau et mobiles sont jugées par les mêmes critères et vous devriez être bien conscient de ces mesures.

Comment améliorer les vitaux du Web de base pour de meilleurs scores de pages

D'accord, il y a beaucoup de choses que vous pourriez faire , mais cela aide à le réduire. J'ai collecté des suggestions prioritaires et exploitables pour que les propriétaires de sites améliorent chacun des principaux vitaux du Web. Vous trouverez mes recommandations en fonction des problèmes auxquels vous êtes confronté.

LCP (plus grande peinture contente)

Pour LCP, vous voudrez vous concentrer sur le «plus grand élément» comme décrit par le rapport. Avec un mauvais score pour cela, les utilisateurs voient un contenu de page moins important avant de voir le contenu principal.

Concentrez-vous sur ces trois choses:

1. Optimiser l'élément LCP: Identifiez le plus grand élément de la fenêtre initiale (souvent une image ou un texte de héros). Optimiser d'abord cet élément:
   • Images: Compress Images utilisant des formats modernes comme WebP. Utilisez le dimensionnement approprié (ne servez pas d'images plus grandes que nécessaire). Utilisez des attributs SRCSET et Tailles pour les images réactives. Envisagez d'utiliser un CDN pour la livraison d'images.
   • Blocs de texte: Assurez-vous que les polices Web sont chargées efficacement (à l'aide de Font-Display: Swap est bon). Évitez les grands blocs de JavaScript en blocage des rendus ou CSS qui retardent le rendu du texte.
2. Optimiser le contenu ci-dessus: hiérarchisez le contenu de chargement au-dessus du pli (la partie de la page visible sans défiler) rapidement. Déférer le chargement des ressources non critiques sous le pli.
3. Améliorer les temps de réponse du serveur (TTFB): un TTFB plus rapide a un impact direct sur LCP. Voir les suggestions TTFB ci-dessous.

INP (interaction à la peinture suivante)

INP se concentre sur la façon dont votre page réagit à l'interaction utilisateur (par exemple, les clics du bouton). C'est l'une des mesures les plus axées sur les développeurs et peut être beaucoup plus difficile à régler pour les non-développeurs.

Mais vous devriez vous concentrer sur ces tâches si vous pensez que vous êtes prêt à cela:

1. Minimiser les tâches longues : identifier et décomposer les tâches JavaScript à long terme (tout ce qui bloque le fil principal pendant 50 ms ou plus). Utilisez le fractionnement du code et différez JavaScript non critique.
2. Optimiser les gestionnaires d'événements : Assurez-vous que les gestionnaires d'événements (comme les événements de clic ou de robinet) sont efficaces et ne provoquent pas de longs retards. Évitez les calculs complexes ou les manipulations DOM au sein des gestionnaires d'événements.
3. Évitez la mise en place de la disposition : évitez de forcer les dispositions synchrones (où JavaScript oblige le navigateur à recalculer la disposition plusieurs fois dans une courte période). Cela se produit souvent lors de la lecture, puis de l'écriture immédiatement des styles.

CLS (décalage de disposition cumulatif)

Pour améliorer les CL, travaillez dur pour prévenir les changements de disposition inattendus. Lorsque cela se produit, des éléments et des styles importants se chargent à des moments inattendus, ce qui fait sauter les choses à l'écran.

Essayez de vous concentrer sur ces choses:

1. Définissez la largeur et la hauteur explicites sur les images et les vidéos : incluez toujours la largeur et les attributs de hauteur (ou utilisez le rapport d'aspect CSS) pour les images et les vidéos pour réserver de l'espace pour eux pendant le chargement. Cela empêche le contenu de sauter.
2. Réservez l'espace pour les annonces et le contenu intégré : si vous utilisez des annonces ou des intégres qui pourraient changer la taille, réservez suffisamment d'espace pour eux en utilisant des espaces réservés ou des chargeurs squelettes.
3. Évitez d'insérer du contenu au-dessus du contenu existant : n'injectez pas dynamiquement le contenu au-dessus du contenu existant à moins qu'il ne soit en réponse à l'interaction utilisateur.

FCP (première peinture contente)

Les mauvais scores FCP se produisent lorsque le contenu n'est pas visible très rapidement. Cela donne l'impression que la page peut ne pas se charger.

Concentrez-vous sur ces éléments pour résoudre les problèmes FCP:

1. Éliminez les ressources de blocage des rendements : minimiser ou éliminer les CSS et JavaScript qui bloquent le rendu. Minify et comprimer les fichiers CSS et JavaScript. CSS critique en ligne (le CSS nécessaire pour rendre le contenu supérieur à la fois) et différer le CSS non critique. Déférer JavaScript non critique à l'aide des attributs de différence ou asynchrones.
2. Optimiser le temps de réponse du serveur : un TTFB plus rapide améliore directement FCP. Voir les suggestions TTFB ci-dessous.
3. Optimiser l'ordre de chargement des ressources : hiérarchisez le chargement des ressources critiques (comme CSS et les polices nécessaires pour le contenu supérieur) tôt).

TTFB (temps de premier octet)

Semblable à ce qui précède, les utilisateurs attendent un chargement d'une page. Cependant, TTFB est davantage sur la configuration de votre serveur que sur la façon dont une page individuelle se charge. TTFB afficherait la réactivité de votre serveur affichant n'importe quelle page sur votre site.

Creusez vraiment dans ces éléments pour aborder les temps de réponse du serveur:

1. Optimiser les performances du serveur : c'est souvent le facteur le plus percutant.
   1. Mise à niveau de votre plan d'hébergement vers un serveur plus puissant (ou mise à jour vers un fournisseur d'hébergement plus puissant).
   2. Utilisation d'un réseau de livraison de contenu (CDN) pour mettre en cache des actifs statiques plus près des utilisateurs.
   3. Optimisation de vos requêtes de code et de base de données côté serveur.
2. Utilisez la mise en cache : implémentez les mécanismes de mise en cache appropriés (GZIP, mise en cache du navigateur, cache côté serveur, mise en cache d'objet) pour réduire la charge sur votre serveur.
3. Utilisez un fournisseur DNS avec des temps de recherche rapides : un fournisseur DNS rapide peut réduire le temps nécessaire pour résoudre votre nom de domaine à une adresse IP.

Comment corriger la vitesse de la page pour le site Web WordPress

WordPress est une excellente plate-forme pour vous permettre d'optimiser votre site de toutes les manières dont vous avez besoin. Les constructeurs de sites Web comme Wix et Squarespace gèrent cela pour vous, mais ces coûts sont cuits dans votre abonnement. Vous êtes enfermé s'ils choisissent d'accélérer les performances ou d'augmenter les prix. Si cela se produit avec un fournisseur d'hébergement ou un plugin (lorsque vous utilisez WordPress), vous pouvez facilement changer de fournisseur pour conserver les performances à la tarification souhaitée.

Voici les plates-formes, services et plugins de base que je vous recommande d'utiliser pour améliorer les vitaux du Web de base, comme indiqué dans votre rapport Pagespeed Insights. Les CWV sont interpénétrants, donc la fixation parfois de l'une améliore les autres. Vous remarquerez que certaines de nos recommandations peuvent aider plusieurs mesures.

Comment améliorer TTFB

TTFB mesure la réactivité de votre serveur. Un TTFB plus rapide signifie que votre site Web commence à se charger plus tôt. Pour résoudre ce problème, vous devez faire un certain travail côté serveur.

Hébergement de sites

L'hébergement fiable avec des configurations de serveur optimisé est crucial pour un TTFB rapide. Siteground offre d'excellentes performances et fonctionnalités optimisées pour WordPress.

Obtenez le site

Cloudflare CDN

Un réseau de livraison de contenu (CDN) comme CloudFlare cache les actifs statiques de votre site Web sur les serveurs dans le monde, réduisant les données de données de distance et améliorant le TTFB pour les utilisateurs dans le monde. La version gratuite offre des avantages importants.

Obtenez CloudFlare

Comment améliorer FCP, CLS et LCP

Ces CWV sont fortement influencés par la rapidité avec laquelle votre contenu se charge et la stabilité de votre mise en page pendant le chargement. La mise en cache et l'optimisation de l'image sont essentielles.

Nitropack

Nitropack maximise l'efficacité du site Web avec une mise en cache intelligente, la livraison optimisée des ressources et les techniques avancées d'optimisation d'image, telles que le chargement paresseux et la conversion WebP. Je veux mentionner celui-ci car il gère la mise en cache et propose un redimensionnement CDN et d'image (selon le plan). Cela signifie qu'il s'agit d'un guichet unique pour les trois principales choses dont vous aurez besoin (mise en cache, optimisation d'image et CDN).

Obtenez Nitropack

Cache totale W3

W3 Total Cache est un plugin de mise en cache WordPress de longue date qui offre une suite complète d'options pour améliorer les temps de chargement, y compris la mise en cache de page, la minification et la mise en cache du navigateur.

Obtenez le cache total W3

Fusée WP

WP Rocket est un plugin de mise en cache convivial qui simplifie l'optimisation avec des fonctionnalités telles que la mise en cache de page, la précharge et la modification des fichiers. Il a une suite rave et est assez facile à utiliser. Il a des modules complémentaires pour un CDN ou il fonctionne bien avec des tonnes de configurations différentes.

Obtenez WP Rocket

Optimiseur d'image ewww

EWWW Image Optimizer optimise automatiquement vos images, réduisant la taille des fichiers sans perte de qualité notable. Cela améliore les temps de chargement et empêche les CL. Il aide à la dimensionnement d'images ainsi qu'à la fourniture de formats d'images de nouvelle génération qui se chargent mieux pour le Web moderne.

Obtenez l'optimiseur d'image ewww

Comment améliorer LCP et INP

Craquer le code pour LCP et INP signifie que votre site doit afficher rapidement du contenu, que ce soit sur le premier chargement de la page ou de toute activité ultérieure. Un thème WordPress performant peut aider à y arriver.

Thème divi

Divi est conçu pour minimiser la quantité de CSS et JavaScript chargés sur chaque page, même avant la modification. Lorsque vous utilisez un module Divi, vous pouvez croire qu'il est bien codé et qu'il n'imposera pas votre serveur. Pour obtenir encore plus de performances de Divi, utilisez Global Design Presets pour réduire davantage la quantité de CSS nécessaire pour une page. Tout cela se réunit pour vous permettre de créer de meilleures pages qui semblent bien et que vous pouvez faire confiance pour bien fonctionner. En savoir plus sur l'optimisation entièrement divi.

Obtenez Divi Pro

Mettre tout cela ensemble

L'optimisation de votre site Web pour Core Web Vitals (CWVS) est un investissement dans votre succès en ligne. Je sais que c'est beaucoup, mais en se concentrant sur LCP, INP, CLS, FCP et TTFB, vous améliorez directement l'expérience utilisateur, rendant votre site Web plus agréable et engageant. Cela se traduit par des taux de rebond plus bas, une augmentation du temps sur le site et, finalement, plus de conversions.

De plus, Google considère ces mesures importantes, donc l'amélioration de vos principaux vitaux Web peut améliorer la visibilité de votre moteur de recherche. Bien que ces mesures ne soient pas des facteurs de classement, ils aident les types de choses qui sont des facteurs de classement. J'espère que vous voyez que ces améliorations stimulent encore plus de trafic organique vers votre site.

Créez un site WordPress à haut score aujourd'hui

Si vous n'avez pas encore construit votre site Web, voici sur quoi je me concentrerais dans cet ordre:

1. Obtenez un hébergement fiable (nous recommandons Siteground)
2. Choisissez un thème comme Divi, construit en utilisant les meilleures pratiques pour offrir des performances incroyables.
3. Terminez-le avec un bon plugin de mise en cache et CDN.

Test Divi Page (démo en direct)

Obtenez Divi aujourd'hui

Questions fréquemment posées