Passer au contenu
À partir de mai juin 2021, Core Web Vitals deviendra un facteur de classement très important, a annoncé Google en février de cette année.
En quoi Core Web Vitals est différent des mises à jour de Google ?
Fondamentalement, Core Web Vitals analyse l'expérience utilisateur des visiteurs de votre site. Cela dit, les performances de votre site Web doivent être plutôt bonnes, mais elles doivent également offrir aux visiteurs de votre site une meilleure expérience. Quelques signaux importants (déjà présents il y a quelques années) sont :
- Navigation sûre
- Convivialité mobile
- Sécurité HTTPS
- Directives interstitielles intrusives
Éléments essentiels du Web mai 2021
Premières choses à mettre en œuvre lorsque l'on souhaite améliorer le score Core Web Vitals
1. Navigation sécurisée – La sécurité des visiteurs de votre site Web ( et des clients potentiels ) doit être la préoccupation numéro un. Si vous utilisez le CMS WordPress, protégez votre site en suivant ces règles simples :
- N'installez jamais de plugins et de thèmes annulés – dans 99,999 % des cas, un malware y sera inséré et, non seulement votre site mais aussi les ordinateurs de vos visiteurs (* et les informations personnelles) peuvent être en danger.
- Gardez les fichiers principaux à jour – WordPress fournit des mises à jour régulières et gratuites. Bien sûr, il est préférable d’attendre quelques semaines jusqu’à installer la dernière version de WordPress, pour éviter d’éventuels conflits avec les plugins ou le thème installés , mais il ne faut jamais attendre longtemps pour le faire. Vous devez également mettre à jour les plugins et le thème avec les derniers paramètres. N'oubliez pas : Avant la mise à jour, faites une sauvegarde !
- Faites attention aux plugins et thèmes gratuits que vous installerez – Ce n'est un secret pour personne que certains plugins ou thèmes gratuits vendront les données de vos visiteurs. Voyez ici un cas où un plugin populaire fait ce genre de sale boulot.
2. Site Web adapté aux mobiles – Depuis la mise à jour de Google du 21 avril 2015, votre site Web DOIT être adapté aux mobiles. De nos jours, la majorité des utilisateurs de WW naviguent sur Internet via leurs appareils mobiles. Google accorde une attention particulière à la manière dont les données de votre site Web sont restituées sur les appareils mobiles de vos visiteurs. Si le site Web n'est pas adapté aux mobiles, votre site Web est pénalisé par Google.
Il y a quelques années, il était assez simple de rendre un site Web adapté aux mobiles ou d'en créer une version mobile, même avec des images ou des fichiers non compressés. Mais désormais, non seulement le site Web doit se charger sur les smartphones ( tâche facile pour un smartphone classique en 2021 ), mais il doit également fournir une version minimisée/compressée du contenu, afin d'économiser du temps et de la bande passante.
Lire la suite : FAQ sur la mise à jour adaptée aux mobiles du 21 avril
3. Certificat HTTPS – En 2021, vous pouvez obtenir un certificat SSL gratuit pour votre site Web avec un service comme Let's Encrypt. Si vous ne savez pas comment procéder, demandez simplement à votre fournisseur d'hébergement ( très probablement, le SSL est installé automatiquement, donc aucun travail supplémentaire n'est requis ).
N'oubliez pas non plus de configurer les en-têtes HTTP. De nombreux développeurs les oublient ou ne les connaissent même pas. Assurez-vous simplement de les avoir configurés.
4. Interstitiel intrusif – Comme je l'ai mentionné dans le 2ème point ci-dessus, votre site doit fournir une version minimisée/compressée du contenu. De plus, votre site Web doit éviter de montrer du contenu inutile à l’utilisateur. La publicité pop-up en est le meilleur exemple. Si John Doe recherche x informations sur votre site Web et que vous lui montrez une fenêtre contextuelle avec une annonce sans rapport ( ou même liée ), mais couvrez les informations essentielles qu'il recherche, cela peut ruiner l'expérience utilisateur de M. Doe.
Comment les Core Web Vitals sont-ils collectés ?
Les Core Web Vitals sont mesurés dans les données de terrain, plutôt que dans les données de laboratoire, car les données de terrain ont tendance à être plus précises. Pourquoi? Parce que les vrais utilisateurs (les visiteurs de votre site Web) mesureront les données via leurs appareils (mobiles, tablettes, ordinateurs portables, ordinateurs). Par exemple, Google collecte ces données via le rapport sur l'expérience utilisateur Chrome. Et il y a environ 63,63 % (selon la part de marché des navigateurs dans le monde) d'utilisateurs de Google Chrome (dont moi et très probablement vous aussi).
Cela dit, même si vous n'avez pas votre propre site Web, vous pouvez contribuer aux Core Web Vitals si vous :
- utiliser Google Chrome
- synchronisez l'historique de votre navigateur avec votre compte Google
- je n'ai pas de phrase secrète de synchronisation
- et activer les rapports sur les statistiques d'utilisation
vous contribuez à l'ensemble de données de Google.
Core Web Vitals et impact sur le score du site
Jetons un coup d'œil à ce que sont les Core Web Vitals et à leur impact sur les performances de votre WordPress.
Les Core Web Vitals ont été introduits en mai 2020 et leur objectif principal est de mesurer la façon dont les utilisateurs perçoivent la vitesse, la réactivité et la structure visuelle d'une page d'un site.
Pour être considérée comme un Core Web Vital, une métrique doit :
- être centré sur l'utilisateur
- être mesuré sur l'appareil d'un utilisateur réel
- ne chevauche pas d'autres Core Web Vitals
Définition des éléments essentiels du Web + quelques conseils d'optimisation CWV :
1. La plus grande peinture de contenu (LCP)
Le temps nécessaire au chargement du contenu principal d’une page. Une mesure LCP idéale est de 2,5 secondes ou plus.
La valeur LCP doit refléter le temps de chargement perçu de votre site Web jusqu'à la première interaction possible et inclut le temps écoulé entre l'appel et le chargement du contenu le plus volumineux sur votre page.
Cependant, cette valeur ne doit pas être confondue avec le temps de pleine charge.
La page chargée ne peut être entièrement chargée que quelques secondes plus tard en raison des scripts et de l'intégration de ressources externes.
Un élément typique pour le contenu le plus volumineux pourrait être, par exemple, une vidéo, une image ou un bloc de texte.
Comment puis-je optimiser la valeur de la plus grande peinture de contenu ?
Comme mentionné précédemment, l’élément le plus important du site Web peut être une image ou une vidéo. Il est facile de commencer ici pour optimiser cela. Cette valeur peut être grandement améliorée en compressant vos images et vidéos en conséquence.
Fondamentalement, vous devez télécharger et intégrer vos médias à l'avance dans une taille correctement dimensionnée afin d'obtenir de bons résultats.
Des techniques telles que LazyLoad ou la réduction des fichiers CSS et Javascript bloquant le rendu peuvent également être extrêmement utiles pour améliorer la valeur.
Une moyenne de 2,5 secondes est estimée pour une bonne valeur LCP.
2. Premier délai d'entrée (FID)
Le temps nécessaire à une page pour devenir interactive. Une mesure idéale est inférieure à 100 ms.
Le premier délai d'entrée décrit la valeur jusqu'à la première interaction possible de l'utilisateur. Certains devraient savoir qu'un site Web est chargé optiquement, mais une saisie dans un formulaire ou un clic sur un bouton ne fonctionne qu'avec un peu de retard.
Cependant, le premier délai de saisie ne fait pas référence à la capacité de défilement de la page et inclut uniquement des activités telles que les saisies de formulaire ou les clics sur des boutons.
Cependant, cette valeur FID ne peut être comparée et mesurée qu'avec les données utilisateur collectées (données de terrain) que Google a collectées auprès de nombreux utilisateurs. Comme alternative, il existe donc la valeur TBT, qui indique le temps entre First Contentful Paint et Time To Interactive. Cela peut donc également être utilisé comme alternative pour une optimisation sans aucun problème.
À titre indicatif pour une bonne valeur FID/TBT, moins de 100 ms peuvent être utilisées pour l'optimisation. Tout ce qui dépasse 300 ms est considéré comme mauvais.
Comment puis-je optimiser la valeur du délai de première entrée/TBT ?
Une valeur FID accrue peut également avoir différentes raisons.
Dans le cas d’un site WordPress, l’augmentation du FID proviendra probablement des plugins installés qui ajoutent du code à l’en-tête du site Web. Même si ces éléments de l'en-tête effectuent à nouveau des appels Javascript externes, ils entraînent considérablement la valeur dans la zone défectueuse.
À chaque installation, vous devez donc faire attention à la façon dont les valeurs correspondantes ont changé par la suite. Il est alors également possible d'échanger les plugins souhaités contre d'autres alternatives de plugins.
3. Changement de mise en page cumulatif (CLS)
L'ampleur des changements de mise en page inattendus du contenu visuel de la page. Une mesure idéale est inférieure à 0,1.
Avec de nombreuses pages, on remarque que certains éléments de mise en page tels que les masques de navigation ou de recherche changent soudainement et de manière inattendue leur position lors du chargement. La valeur du changement de mise en page cumulé montre donc la stabilité visuelle lors de la construction de votre site Web.
Ce comportement est considéré comme une mauvaise expérience utilisateur (UX) et fait baisser cette note.
Une valeur inférieure à 0,1 est considérée comme un bon CLS, entre 0,1 et 0,25, vous devriez déjà envisager une optimisation et à partir de 0,25, une mauvaise valeur CLS est disponible.
Comment puis-je optimiser le changement de mise en page cumulatif ?
Il existe différentes manières de provoquer un changement de disposition, mais chaque fois qu'un élément visible change sa position de départ dans la fenêtre, il est marqué comme instable.
Cela peut être dû, par exemple, à un chargement lent des ressources, ce qui signifie que les éléments de mise en page individuels s'affichent plus rapidement que les autres.
Les attributs de largeur et de hauteur manquants pour les éléments peuvent également influencer fortement cette valeur. Si les informations sont correctes, le navigateur possède déjà toutes les valeurs correctes et sait lors du chargement quel espace est prévu pour l'élément. Cela peut en principe s’appliquer à tous les médias, bannières ou autres éléments intégrés.
Même les polices Web chargées en externe peuvent entraîner un décalage de la mise en page lors de leur configuration et constituent des sources possibles de problèmes.
Selon John Mueller : « Ces signaux mesurent la manière dont les utilisateurs perçoivent l'expérience d'interaction avec une page Web et contribuent à notre travail continu visant à garantir que les utilisateurs bénéficient des expériences les plus utiles et les plus agréables sur le Web. »
Éléments essentiels du Web et du référencement
Où et comment tester votre site pour Core Web Vitals
En mai 2020, John Mu a tweeté : « Il y a une tonne d'informations à leur sujet à partir de https://web.dev/vitals/ – c'est là que j'ai tendance à aller. LCP est similaire aux vitesses de chargement des pages que vous avez probablement examinées, mais il essaie de déterminer quand les éléments principaux sont visibles, ce qui intéresse les utilisateurs.
Pour tester votre site s'il est optimisé pour les Core Web Vitals, essayez ces sites Web :
Informations Google PageSpeed
Vous pouvez savoir dans quelle mesure le PageSpeed Score de GTmetrix a été ajusté lorsque vous entrez votre URL dans l'outil Google PageSpeed Insights. Il n’est pas rare que le testeur voit ici un score complètement différent. Après les dernières mises à jour, cela diffère considérablement de GTmetrix et Pingdom et conduit généralement à un résultat pire. Mais vous ne devriez de toute façon pas prêter trop d'attention au score, quel que soit l'outil dont il s'agit, et vous concentrer beaucoup plus sur les recommandations d'optimisation de WordPress .
Les outils de test de vitesse du site fournis par Google sont :
- Rapport Core Web Vitals via la console Google Webmaster Tools.
- Web.dev
- Informations sur la vitesse de page
En utilisant les outils de test mentionnés ci-dessus, vous obtiendrez une vue claire des performances de votre site Web et s'il est optimisé pour Core Web Vitals.
GTmetrix
L'un des outils les plus populaires pour analyser les performances d'un site Web est GTmetrix.com . L'outil Web impressionne par son interface agréable et fournit des explications supplémentaires et des recommandations d'optimisation pour chaque point de contrôle. En déplaçant la souris sur les petites flèches à côté des chiffres clés, vous obtenez à titre indicatif la valeur moyenne de tous les sites Web testés. Bien que l’outil utilise 7 emplacements de serveurs différents, il n’est malheureusement pas possible de les modifier.
Test de page Web
L'outil WebPageTest n'est pas vraiment convivial, mais il offre des fonctions supplémentaires pour tester les performances des sites Web. Cela inclut le blocage de contenu, la comparaison premier appel/appel répété, les tests HTTP/2, etc. L'outil Web se démarque également par la sélection du serveur : les testeurs peuvent choisir entre 50 emplacements différents.
Pingdom
Un autre outil Web très populaire pour tester la vitesse d’un site Web est Pingdom . Semblable à GTmetrix, il répertorie toutes les ressources dans un graphique en cascade, mais avec des options de filtrage supplémentaires. Un gros avantage de cet outil est le choix de différents emplacements de serveur. Par exemple, en sélectionnant « Europe – Allemagne – Francfort » pour les sites allemands, vous obtenez des temps de chargement plus proches de la réalité.
Contrairement à GTmetrix, Pingdom ne prend malheureusement pas en charge le protocole HTTP/2.
Comment améliorer les Core Web Vitals de votre site
- Assurez-vous d'avoir déjà implémenté ces configurations sur votre site Web : allez ici
- Investissez quelques dollars supplémentaires dans un meilleur hébergement. Si vous utilisez des fournisseurs d'hébergement bon marché (la plupart sous EIG), vous devriez penser à un changement.
- Installez un thème WordPress solide (mais léger).
- En 2019, j'ai publié un article complet sur la façon d'accélérer votre site WordPress : WordPress Speed Optimization 2019 – Boostez vos performances WordPress en quelques ajustements simples – *Sauvegarde avant d'effectuer toute modification*
- Faites attention à la taille des images et configurez-les avec les bonnes tailles. Essayez également de les compresser.
- Supprimez les plugins inutilisés.
Conseils supplémentaires d’optimisation des performances du serveur WordPress :
Le serveur sur lequel se trouvent les ressources du site Web joue un rôle crucial lorsqu'il s'agit d'obtenir un bon score avec web.dev et d'autres outils de test qui reflètent les temps de chargement rapides de votre propre site Web.
HTTP/2
Avec le protocole HTTP/2, par rapport à HTTP1.1, plusieurs requêtes peuvent être traitées par le serveur en même temps. Dans le cadre de vos mesures d'optimisation, vous pouvez même renoncer à combiner les fichiers Javascript et CSS avec ce protocole. Vous pouvez découvrir pourquoi il peut toujours être judicieux de combiner les fichiers avec un protocole HTTP/2 ci-dessous dans l'article.
Un autre avantage du protocole HTTP/2 est que les fichiers sont préchargés avant d'être demandés par l'utilisateur. La conséquence en est une réactivité plus rapide du serveur.
Temps jusqu'au premier octet (TTFB)
Time To First Byte décrit le temps qui s'écoule avant que le premier octet soit transmis du serveur au client ( navigateur ). Avec certains hébergements bon marché, ce temps peut être supérieur à 2 secondes. Cela signifie que quels que soient les efforts que vous déployez pour optimiser les performances, le temps de chargement de votre site Web ne dépassera jamais 2 secondes. Vous devez absolument éviter ce goulot d’étranglement en choisissant le bon fournisseur d’hébergement.
Avec l'outil bytecheck , vous pouvez tester combien de temps il faut pour que le premier octet de votre site Web arrive dans le navigateur.
PHP version 7.4 et supérieure
Avec PHP version 7.4 et supérieure ( la dernière version de PHP est la 8, mais personnellement je la considère pourtant instable ), deux fois plus de requêtes par seconde peuvent être traitées par rapport à la version précédente (5.6).
De plus, PHP version 5.6 n'est plus activement supporté depuis décembre 2018, PHP 7.4 a également atteint l'EOL depuis juin 2020 . Vous devez donc toujours utiliser la version actuelle de PHP, pas seulement pour des raisons de performances.
Si votre thème WordPress n'est pas compatible avec la nouvelle version, vous devez contacter le développeur du thème ou même envisager de repenser votre site Web avec un nouveau thème.
