Comment faire passer votre site Web par Google Core Web Vitals

Dans cet article, nous verrons comment optimiser votre site Web pour obtenir un bon score sur le rapport Core Web Vitals de Google. Google privilégie les sites Web avec des temps de chargement rapides et de bonnes performances de site Web. Tant que vous connaissez les meilleures étapes à suivre, vous pouvez également vous classer plus haut dans les résultats de recherche.

Dans le monde trépidant d'aujourd'hui, tout le monde veut des sites Web interactifs avec des temps de chargement rapides.

Googlerapports les pages Web mobiles se chargent en 22 secondes en moyenne. Cependant, 53 % des mobinautes quittent une page dont le chargement prend plus de trois secondes.

Ces chiffres prouvent que l'optimisation de votre site pour maximiser les performances doit être une priorité absolue. À ce titre, Google a annoncé la création de Core Web Vitals, qui comprend trois métriques : Largest Contentful Paint (LCP), First Input Delay (FID) et Cumulative Layout Shift (CLS).

Depuis la mi-juin 2021, cette mise à jour de l'expérience de la page Google est un facteur de classement dans les moteurs de recherche.

Comment pouvez-vous faire en sorte que votre site Web passe les Core Web Vitals de Google ?

Pour commencer, nous aborderons les sujets suivants dans cet article :

• Quelles sont les métriques Core Web Vitals de Google
• Comment mesurer les Core Web Vitals
• Quel bon score pour Google Core Web Vitals est
• Comment améliorer votre score pour Core Web Vitals
• Outils pour améliorer Core Web Vitals

Que sont les métriques Core Web Vitals de Google ?

Voici la principale chose que vous devez savoir sur les Core Web Vitals :

• La plus grande peinture de contenu (LCP) . Il s'agit d'un Core Web Vital qui mesure le temps nécessaire pour rendre le contenu principal ou le plus grand élément de contenu visible sur la page.
• Premier affichage d'entrée (FID) . Cela mesure la rapidité avec laquelle une page répond aux actions d'un utilisateur.
• Décalage de mise en page cumulé (CLS) . Cela mesure le mouvement inattendu du contenu lors de la visualisation d'une page.

Pour une plongée plus approfondie, vous pouvez consulter notreguide sur les Core Web Vitals.

Comment mesurer les Core Web Vitals Metrics ?

La mesure de Core Web Vitals est simple et rapide avec Google PageSpeed ​​Insights.

Placez simplement l'URL de votre site entier dans la zone de texte, cliquez sur leAnalyseret laissez l'outil faire le reste.

Les Core Web Vitals se trouvent sous leDonnées de terrainetDonnées de laboratoire.

Les données de champ font référence à des rapports historiques sur les performances d'une page Web basés sur des rapports anonymisés d'utilisateurs de Chrome. Pendant ce temps, Lab Data utilise une page de chargement simulée avec des conditions de réseau spécifiques pour évaluer un site.

Google PageSpeed ​​Insights utilise une connexion réseau plus lente pour le test de laboratoire afin de tenir compte des utilisateurs dont la vitesse Internet est lente.

Dans l'exemple illustré ci-dessus, les données LCP sur le terrain sont de 1,7 seconde, tandis que le LCP de laboratoire est de 3,4 secondes. Pendant ce temps, le FID est de 19 ms, tandis que le décalage de disposition cumulé est de 0.

Qu'est-ce qu'un bon score pour les Core Web Vitals de Google ?

Examinons maintenant les scores que vous devriez viser pour réussir le rapport d'expérience utilisateur Chrome. Décomposons-le :

• PCL: un bon score LCP est autour2,5 secondes ou moins. Les sites Web qui se chargent en 2,6 à 4 secondes doivent être améliorés, tandis que ceux dont le temps de chargement est supérieur à quatre secondes ont un LCP médiocre.
• DIF : un bon seuil pour le score FID nécessiterait un délai inférieur à 100ms. Cependant, dépasser 300 ms dénote une mauvaise expérience utilisateur.
• CLS: un score CLS inférieur à 0,1 est considéré comme bon, mais tout ce qui est supérieur à 0,25 est considéré comme mauvais.

Optimiser votre site Web semble être un défi, surtout si votre page de destination comporte de nombreux éléments. La bonne nouvelle est que c'est possible – tant que vous appliquez les meilleures pratiques suivantes pour améliorer votre score pour les Core Web Vitals de Google.

Techniques spécifiques pour améliorer la plus grande peinture de contenu

Jetons un coup d'œil à quelques tactiques populaires pour améliorer votre score LCP.

Compression d'images

La compression d'image consiste à minimiser ou à regrouper des parties d'un fichier image afin qu'il occupe moins d'espace. Malgré la réduction de la taille de l'image, ce processus n'a pas d'impact significatif sur la qualité globale d'une image dans la plupart des cas.

Les meilleurs outils de compression d'image incluentEzgif,Optimiseur JPEG,Minuscule PNGetCompresseur . L'utilisation de formats d'image tels que JPEG et WebP permet également aux images d'être rendues plus rapidement.

Utiliser un réseau de distribution de contenu (CDN)

Un CDN peut réduire la distance entre l'utilisateur et le serveur, ce qui entraîne un temps de chargement de page plus rapide et un meilleur LCP. Même si votre serveur est basé en Amérique, un utilisateur de France ou d'Australie peut profiter d'une expérience de page positive et de temps de téléchargement rapides, quel que soit son emplacement.

Comment choisir le meilleur CDN pour votre entreprise ?Comparaison CDNvous permet de comparer les fonctionnalités de chaque fournisseur CDN en fonction des prix, des fonctionnalités principales, de la sécurité et de l'assistance.

Obtenez un hébergeur fiable

Un fournisseur d'hébergement peut faire ou défaire votre expérience de chargement de site Web.

Un plan d'hébergement bon marché ou faible ne vous aidera pas à obtenir un score LCP de passage, même si vous essayez de nombreuses tactiques pour accélérer votre temps de chargement.

Vous pouvez consulter notre guide sur lemeilleurs fournisseurs d'hébergement Webpour découvrir les acteurs les plus en vue de l'industrie.

Rendu côté client

Le rendu côté client permet aux développeurs de créer un site Web traité via JavaScript.

Avec le recul, cela peut augmenter les temps de chargement. Au fil du temps, cependant, l'ajout de fichiers JavaScript plus volumineux pourrait ralentir votre site, en particulier s'il n'est pas correctement optimisé.

La réduction des codes et la compression peuvent vous permettre d'éviter ces répercussions. Alternativement, côté serveur est une autre option afin que LCP soit traité sur le serveur, ce qui augmente le score LCP.

Supprimer les plugins inutilisés

Les plugins peuvent améliorer les performances de votre site, mais trop de bonnes choses peuvent avoir un impact sur votre facteur de classement.

Avoir plus de plugins obligera les navigateurs à effectuer des tâches supplémentaires et des requêtes HTTP avant de pouvoir afficher la page de destination.

Un bon conseil est de désencombrer et de supprimer les plugins obsolètes et inutilisés. Essayez de répertorier tous les plugins de votre site Web et évaluez s'ils sont toujours utiles pour votre boutique en ligne.

Vous pouvez également utiliser des outils commeGTmetrixpour déterminer quels fichiers ou plugins prennent du temps à se charger.

Placez simplement votre URL WordPress dans la barre de recherche. Vous pourrez alors identifier les plugins à chargement lent qui ont un impact important sur la vitesse de votre site.

Techniques spécifiques pour améliorer le premier délai d'entrée

Maintenant, voici quelques astuces pour améliorer votre score FID.

Réduire le temps d'exécution de JavaScript

Les moteurs de recherche sont censés analyser le contenu des pages Web en quelques millisecondes. Malheureusement, les scripts et les feuilles de style qui prennent beaucoup de temps à s'exécuter peuvent ralentir les performances de votre page.

Heureusement, Google Lighthouse peut trouver des fichiers JavaScript dont le chargement prend plus de deux secondes. Une fois que vous connaissez les principaux contributeurs au temps d'exécution, vous pouvez asynchroniser, différer ou supprimer le JavaScript non essentiel.

Utiliser les travailleurs Web

Les travailleurs Web peuvent exécuter des scripts sur des threads d'arrière-plan et réduire la charge du thread principal. Un bon conseil consiste à déléguer des opérations non liées à l'interface utilisateur ou du code JavaScript au thread de travail. Bien fait, il y aura moins de retard d'entrée.

Minifier les fichiers de code

Certains développeurs ont l'habitude d'ajouter des espaces, des caractères et des commentaires dans les fichiers de code. Bien que ces modules complémentaires puissent améliorer la clarté du code lorsque vous travaillez avec des équipes, les moteurs de recherche auront besoin de plus de temps pour analyser et exécuter le code.

Tout comme la compression d'image, la réduction des fichiers de code réduira les temps de chargement des pages. Les sociétés d'hébergement et les CDN peuvent réduire automatiquement les fichiers de code. Si cette fonctionnalité n'est pas disponible par défaut, vous pouvez également utiliser des outils gratuits commeCompilateur de fermeture,Compresseur Yuri,cssnanoetCSSOpour minifier les fichiers JavaScript et CSS.

Évaluer les scripts tiers

Des scripts tiers non critiques peuvent bloquer le thread principal, ce qui peut avoir un impact sur le premier délai d'entrée.

Certains scripts tiers essentiels doivent être exécutés en un instant pour suivre le trafic Web, mais d'autres n'ont pas besoin d'être priorisés immédiatement. Prenez, par exemple, les pop-ups pour les inscriptions et les abonnements, qui peuvent également apparaître après quelques minutes sans aucun mal.

Cela dit, réfléchissez aux scripts qui devraient figurer en haut de votre liste et exécutez-les immédiatement. S'ils ne sont pas essentiels, retardez-les ou supprimez-les.

Techniques spécifiques pour améliorer le décalage de mise en page cumulé

Au fur et à mesure que la page Web se charge, vous constaterez parfois un changement de mise en page inattendu à mesure que d'autres éléments sont ajoutés à la page. Pour résoudre ce problème, voici quelques astuces pour rendre votre page visuellement stable.

Inclure les attributs de largeur et de hauteur pour la stabilité visuelle

Placer des attributs de largeur et de hauteur pour les images et les vidéos peut les empêcher de se déplacer sur la page. Vous pouvez également leur consacrer de l'espace avec des boîtes de rapport d'aspect CSS. Cette stratégie garantit que les éléments, tels que les titres ou les paragraphes, ne bougeront pas une fois les images chargées sur la page.

Espace réservé pour l'espace publicitaire

Les tailles d'annonces dynamiques peuvent entraîner des changements de mise en page. Cela se produit lorsqu'un site insère l'annonce ou lorsque la bibliothèque de tags d'emplacement publicitaire charge et redimensionne le conteneur.

La bonne nouvelle : vous pouvez éliminer ce phénomène en réservant de l'espace pour l'espace publicitaire.

Source de la capture d'écran

Il existe plusieurs façons d'y parvenir :

• Définissez une hauteur et une largeur spécifiques pour l'espace publicitaire à l'aide d'un
  élément.
• Réservez de l'espace pour la taille la plus grande et la plus petite possible pour l'espace publicitaire.
• Examinez les données historiques pour identifier la taille la plus probable de l'espace publicitaire.
• Évitez le placement d'annonces en haut de la fenêtre d'affichage, car cela déplacera plus d'éléments dans les sections inférieures de la page. Les annonces au milieu ne déplaceront pas autant d'éléments.

Ajouter du contenu dynamiquement pour la stabilité visuelle

Vous avez probablement déjà rencontré des changements de mise en page dus à des pop-ins tels que des bannières et des formulaires. Pendant que le site commence à se charger, des éléments supplémentaires peuvent décaler et déplacer le contenu de la page.

Tout comme les publicités, vous pouvez réserver de l'espace pour différents types de contenu pour une stabilité visuelle. Alternativement, vous pouvez également ajouter du contenu de manière dynamique.

Donnez aux utilisateurs la possibilité de charger le contenu en interagissant avec la page. Si vous avez plus de produits à afficher, intégrez une option "Charger plus" afin que les utilisateurs ne soient pas surpris par le changement. Essayez d'éviter de charger automatiquement du nouveau contenu, sauf si cela résulte d'une entrée ou d'une interaction de l'utilisateur.

Une autre bonne astuce consiste à remplacer l'ancien contenu par un nouveau qui peut tenir sur un conteneur de taille fixe. N'oubliez pas de désactiver les liens pendant le chargement pour éviter les interactions accidentelles de l'utilisateur.

Il existe de nombreux outils disponibles pour augmenter la vitesse et les performances du site. Voici un aperçu des meilleurs outils que nous recommandons.

NitroPack

NitroPack est un package tout-en-un pour accélérer votre site Web. L'outil dispose de la mise en cache, de l'optimisation des images, du CSS critique, de l'optimisation du code, du chargement des ressources et de la fonctionnalité d'exécution JavaScript qui peuvent améliorer votre score LCP.

Pour plus de facilité d'utilisation, il est livré avec une configuration prédéfinie afin que vous puissiez affiner votre site Web de manière transparente.

Leurs principaux modes de configuration incluent les éléments suivants :

• Standard . Cette configuration de base vous permet de configurer votre site sans prioriser la vitesse des pages.
• Moyen . Avec ce niveau d'optimisation, votre site est assuré de fonctionner à une vitesse modérée.
• Fort . Utilise des fonctionnalités de configuration premium telles que la modification de la définition des polices, le chargement différé des images et le chargeur de ressources, qui contribuent à de meilleurs scores LCP.
• Ridicule . Idéal pour atteindre le score de vitesse le plus élevé possible. Notez que ce type d'optimisation peut être médiocre pour les sites Web reposant sur JavaScript.
• Manuel . Utilisez-le pour optimiser manuellement les aspects techniques nécessaires aux améliorations LCP.

Pour commencer, vous pouvez essayer leur plan gratuit ou consulter leur plan premium quià partir de 17,50 $par mois.

GTMetrix

GTMetrix vous permet de tester les performances de votre page Web.

Voici quelques fonctionnalités principales de l'outil :

• Testez la page sur un appareil Android ou sur des appareils mobiles simulés pour mesurer les performances de vitesse du site mobile.
• Tirez parti de Google Lighthouse pour obtenir des informations exploitables pour l'optimisation des performances.
• Consultez les performances du site sur différents navigateurs, pays et vitesses de connexion.
• Son rapport Core Web Vitals offre un résumé des performances de votre site Web. Vous pouvez obtenir des jalons pour la plus grande peinture de contenu, le temps de blocage total et le changement de mise en page cumulé.

GTMetrix a un plan gratuit pour toujours avec des fonctionnalités de base et des plans payantsà partir de 10 $ par mois.

Booster Core Web Vitals

Le Core Web Vitals Booster de Shopify est une application qui peut optimiser automatiquement vos performances sur les appareils de bureau ou les appareils mobiles.

Voici quelques-unes de ses principales fonctionnalités :

• Prioriser les ressources de vitrine et différer tout le reste
• Optimisation de la vitesse de Google Analytics et de Tag Manager
• Optimisation de la vitesse Klaviyo
• Prioriser les ressources pour la vitrine Shopify et différer tout le reste
• Assistance 24h/24 et 7j/7

L'outil est disponible pour9 $/mois sur l'App Store de Shopify.

Conclusion

Construire et concevoir des pages Web qui satisfont les Core Web Vitals de Google peut sembler un défi.

Heureusement, il existe de nombreux trucs et astuces que vous pouvez utiliser pour améliorer votre score et accélérer le temps de chargement de votre site Web. Si vous ne souhaitez pas peaufiner votre site Web par vous-même, vous pouvez également essayer des outils qui optimiseront automatiquement votre site Web ou amélioreront la convivialité mobile.

En espérant que cet article vous a aidé à améliorer les performances de votre site Web.