Conseils pour améliorer les éléments vitaux Web de base de votre site Web WordPress

Google a un moyen de créer une vague de panique parmi les concepteurs de sites Web et les propriétaires de sites Web. Lorsqu'ils modifient leur algorithme de recherche, les gens commencent à se démener pour rattraper leur retard. Il est facile de comprendre pourquoi. Personne ne veut que son classement SEO en pâtisse.

Ainsi, lorsque les métriques Core Web Vitals ont été annoncées, la réponse était assez prévisible. Comme ces changements sont basés sur les performances du site, notre attention s'est portée sur la rapidité des temps de chargement.

Mais ce n'est pas toujours simple. Les sites Web qui exécutent un système de gestion de contenu (CMS) tel que WordPress peuvent être particulièrement difficiles. Il y a beaucoup de facteurs en jeu. Par conséquent, l'amélioration des performances nécessite une approche à plusieurs volets.

Où commencer? Consultez notre guide pour augmenter le score Core Web Vitals de votre site Web WordPress.

Mettre en œuvre la mise en cache

L'un des moyens les plus simples d'augmenter la vitesse d'un site Web WordPress consiste à mettre en œuvre la mise en cache. Dans de nombreux cas, un site auparavant lent deviendra beaucoup plus rapide avec cette seule étape. Cela est vrai même sur un hébergement relativement bon marché.

Par défaut, les pages et publications WordPress doivent récupérer le contenu et les paramètres de la base de données du site. Cela prend du temps. Le cache, d'autre part, servira le contenu sous forme de fichiers HTML statiques, éliminant ainsi le besoin d'un appel à la base de données. Avec l'intermédiaire (c'est-à-dire la base de données) à l'écart, des temps de chargement plus rapides suivront.

Certains packs d'hébergement, en particulier l'hébergement WordPress géré, incluront un cache basé sur le serveur. C'est souvent la meilleure option, car elle nécessite très peu de la part des concepteurs de sites Web et fonctionne assez bien. Il peut être nécessaire de le vider de temps en temps. Sinon, c'est une expérience pratique. Et il peut être combiné efficacement avec un plugin pour améliorer encore la vitesse.

Même si votre hébergeur ne fournit pas de mise en cache au niveau du serveur, vous pouvez toujours optimiser les performances via un plugin. Les plugins de mise en cache varient en termes de portée, de complexité et de prix. Mais ils fournissent des résultats tangibles lorsqu'il s'agit d'améliorer les temps de chargement. Cela, à son tour, est également un coup de pouce positif pour Core Web Vitals.

Différer le chargement des scripts et des styles de blocage du rendu

Lorsque vous testez les performances de votre site Web dans Google PageSpeed ​​Insights, le sujet des ressources bloquant le rendu semble revenir souvent. Ce sont les scripts et les styles qui ne sont pas considérés comme "critiques", ce qui signifie qu'ils ne sont pas nécessaires pour afficher le contenu de la page "au-dessus de la ligne de flottaison".

Ces ressources peuvent entraver les temps de chargement plus rapides. Plus précisément, ils ont un impact sur le score "Largest Contentful Paint (LCP)" dans Core Web Vitals. Il s'agit du temps nécessaire au chargement de la zone de contenu principale d'une page. La réduction du LCP est, eh bien, vitale.

Une façon d'améliorer la situation consiste à retarder (ou différer) le chargement de divers éléments de contenu (images, vidéos, texte au niveau du bloc). Cela garantit que seuls les scripts et les styles nécessaires se chargent en premier, tandis que tout le reste arrive ensuite.

Parallèlement à la minification, de nombreux plugins de mise en cache/optimisation WordPress incluent également ce type de fonctionnalité. Cependant, cela peut prendre un peu d'expérimentation, car différer la mauvaise ressource peut être problématique.

Assurez-vous de tester toutes les modifications que vous avez apportées et vérifiez la console du navigateur pour les erreurs. Une fois que vous avez trouvé la bonne configuration, le nombre de ressources bloquant le rendu sur votre page devrait être considérablement réduit.

Optimiser les images

L'utilisation généralisée de grandes images de héros et de curseurs complexes ne fait qu'ajouter au défi de l'optimisation des performances. Ces ressources peuvent sembler intéressantes, mais peuvent facilement représenter des mégaoctets de données. Cela ne vous donnera pas une note de passage pour Core Web Vitals, en particulier sur mobile.

Heureusement, il existe plusieurs façons d'alléger la charge. Tout d'abord, débarrassez-vous des images que vous jugez inutiles. La suppression d'une seule grande image peut faire la différence.

Le reste de vos images peut être optimisé. Cela réduira la taille de leur fichier et diminuera l'impact qu'ils ont sur le temps de chargement.

La façon dont vous procédez à l'optimisation de l'image dépend de vous. Vous pouvez télécharger une copie de vos pires contrevenants et les compresser à l'aide de votre éditeur d'images préféré, puis les télécharger à nouveau sur votre site Web. Ou, vous pouvez automatiser le processus avec un plugin multimédia WordPress utile.

Images réactives

Pour les utilisateurs mobiles, WordPress inclut la possibilité de diffuser des images réactives via srcset . En fait, il fera automatiquement le sale boulot pour vous sur les images placées dans votre contenu. Ceci est extrêmement précieux, car il empêche les médias massifs de la taille d'un ordinateur de bureau de ralentir l'expérience de l'utilisateur mobile. Pour les images en dehors de la zone de contenu principale, vous devrez peut-être effectuer un travail personnalisé pour implémenter cette fonctionnalité.

Formats d'images modernes

Il vaut également la peine de regarder les formats de fichiers que vous utilisez. Par exemple, le format WebP de Google peut souvent réduire la taille des fichiers tout en maintenant la qualité de l'image. Notez que certains formats dernier cri ne sont pas pris en charge dans les anciens navigateurs (ahem, IE), des versions de secours peuvent donc être nécessaires. Les plugins peuvent également aider à cela.

Chargement paresseux de toutes les choses

La fonctionnalité de chargement différé ne charge les éléments qu'une fois qu'ils se trouvent dans la fenêtre d'affichage du navigateur. En retardant le chargement des images, des iframes et d'autres contenus tiers (tels que les widgets de médias sociaux), vous pouvez concentrer les ressources sur les éléments que les utilisateurs verront en premier.

WordPress implémente déjà le chargement paresseux natif des images basé sur un navigateur. Lorsque vous ajoutez une image à une page ou à un article, l'attribut loading="lazy" est placé dans la <img> . Autrement dit, à condition que l'image inclue les attributs de hauteur et de largeur.

C'est formidable - mais qu'en est-il des autres éléments, tels que des vidéos ou des iframes ? Ces éléments peuvent également alourdir une page lorsqu'ils sont chargés dès le départ.

Les iframes sont désormais chargées par défaut par défaut - donc pas de soucis là-bas. Certains éléments plus complexes peuvent nécessiter un code personnalisé ou un plugin pour implémenter cette fonctionnalité.

Éliminez le fouillis

Au fil du temps, même un site WordPress bien entretenu peut devenir encombré. Une base de données obstruée, des plugins inutilisés qui sont toujours actifs, un thème gonflé avec des fonctionnalités que vous n'utilisez pas - cela arrive. Et cela peut également faire glisser vos Core Web Vitals.

C'est pourquoi il est important de ranger de temps en temps. La base de données de votre site peut être optimisée manuellement ou configurée pour le faire régulièrement. Les plugins inutilisés peuvent être désactivés et supprimés. Les thèmes peuvent être allégés ou remplacés par quelque chose de mieux.

Étudiez ce qui ralentit votre site Web, trouvez les coupables et traitez-les. Vous pourriez être surpris de voir à quel point cela peut faire une différence.

Améliorez les éléments vitaux Web de base de votre site Web

Core Web Vitals complique le processus déjà délicat d'optimisation des performances du site Web WordPress. Même un site Web qui obtient de bons résultats dans d'autres mesures de performance peut encore échouer dans ce domaine. Cela transparaît surtout dans les tests mobiles.

La bonne nouvelle est qu'il existe de nombreuses petites choses que les concepteurs peuvent faire pour rattraper leur retard. La mise en œuvre du cache établit une excellente base et fournit un coup de pouce immédiat. À partir de là, il s'agit de réduire la taille des fichiers et de charger les styles et les scripts par ordre d'importance.

Pour aller encore plus loin, il est également logique d'ajuster le CSS de votre site avec Core Web Vitals à l'esprit. Cela peut aider avec le redoutable score de changement de mise en page cumulatif (CLS) et réduire les ballonnements.

En général, les choses qui sont bonnes pour les performances sont également bonnes pour Core Web Vitals. Les scores peuvent s'améliorer assez rapidement. Sachez simplement qu'il faudra des essais et des erreurs pour résoudre certaines de ces lacunes individuelles.

L'objectif principal est de s'assurer que seuls les éléments essentiels sont chargés lorsqu'un utilisateur visite votre site Web. Cela rendra les visiteurs et Google très heureux.