L'actualité du référencement est dominée par l'introduction des Core Web Vitals de Google. Faut-il craindre pour vos positions ? Que faut-il faire pour rester dans la course ? Cet article vous explique tout ce qu'il faut savoir pour passer le test haut la main.
Si l'on regarde attentivement quels sont les objectifs poursuivis par les principales mises à jour de l'algorithme de Google depuis 2010, on se rend compte que le géant de Mountain View favorise très clairement deux aspects importants du Web :
-
Le contenu : un site Web qui publie régulièrement du contenu riche, varié et pertinent attirera forcément des lecteurs. Ces contenus qualitatifs auront également plus de chance d'être indexés par les moteurs de recherche et seront ainsi, plus souvent proposés comme réponses aux requêtes des internautes.
Très logiquement, sans proposer de contenus réguliers, pertinents et de qualité, il y a très peu de chance qu'un site arrive à se positionner favorablement dans les SERPs.
L'expérience utilisateur : un site Web offrant une qualité de navigation optimale à ses visiteurs aura plus de chance de les conserver plus longtemps sur ses pages. Cela regroupe principalement la vitesse d'affichage des pages du site, la qualité d'affichage sur mobile, etc. Plus concrétement, on parle ici d'optimisation technique pour désigner la majorité des processus qui permettent de maximiser l'expérience utilisateur.
Même si nous disposons de réseaux de qualité en France, n'oubliez pas qu'un site Web est susceptible d'être vu par n'importe qui autour du monde ayant accès à Internet. Il faut donc tenir compte de ce détail même si votre contenu est exclusivement rédigé en français (il y a 140 millions de Francophones en Afrique où la 4G est encore loin d'être implantée).
Le positionnement favorable d'un site Web dans les résultats du moteur de recherche repose donc essentiellement sur ces deux grands éléments. Ainsi, si l'on cherche à plaire à Google, il faut bien sur veiller à respecter les différentes mises à jours publiées par le moteur de recherche : Penguin, Panda, etc. Mais si vous cherchez à plaire d'abord aux internautes, il faut surtout respecter ces deux points fondamentaux qui feront de votre site, un site de qualité sur la durée.
Certes, on peut naturellement être en opposition avec le Diktat imposé par Google aux éditeurs de sites Web mais si l'on se positionne en tant qu'internaute, il faut quand même reconnaitre qu'il est plus agréable de naviguer sur des sites Web sécurisés, rapides et intéressants à parcourir. Accessoirement, un site rapide est un site qui consomme moins de ressources et en ces temps d'efficience énergétique, on ne peut qu'être en accord avec cette démarche.
C'est dans cette logique que Google a imaginé les Core Web Vitals pour détecter et favoriser les sites qui priorisent l'expérience utilisateur. La bonne nouvelle est que ces signaux web essentiels ont été ajoutés à Search Console le 17 février dernier et qu'ils ne devraient être pris en compte qu'au mois de mai. Cela vous laisse donc quelques semaines pour travailler afin de réussir le test.
Les Core Web Vitals, qu'est ce que c'est ?
Les Core Web Vitals (ou signaux web essentiels en français) sont de nouveaux indicateurs qui ont pour objectif d'améliorer l’expérience utilisateur (UX) en mesurant le temps de chargement de la page (LCP), la réactivité (FID ) et la stabilité visuelle de la page (CLS).
LCP : LARGEST CONTENTFUL PAINT - mesure de la performance de la page.
L'indicateur LCP mesure les performances de chargement d’une page Web. Cet indicateur détermine le temps nécessaire de chargement de la page qu'il faut pour afficher les éléments principaux sur l’écran de l’utilisateur.
Google estime qu'il faut avoir un LCP inférieur à 2,5 secondes pour avoir une expérience utilisateur positive.
FID : FIRST INPUT DELAY - mesure l'interactivité de la page.
L'indicateur FID permet d’évaluer la réactivité du chargement d’une page Web. Cet indicateur évalue le temps nécessaire entre la première action de l’utilisateur et le moment où le navigateur sera en mesure de lui répondre.
Google recommande d'avoir un FID inférieur à 100ms pour répondre favorablement à ce critère.
CLS : CUMULATIVE LAYOUT SHIFT - mesure la stabilité de la page.
L'indicateur CLS permet de mesurer la stabilité visuelle d’une page Web. Google sera en mesure de voir quels sont les changements de mise en page subis par les internautes. Selon Google, le CLS doit être le plus proche possible de 0, en tout cas inférieur à 0,1 pour être validé.
Il existe d'autres métriques comme par exemple TTFB - Time to First Byte et FCP - First Contentful Paint qui sont deux aspects essentiels de la vitesse de chargement et qui sont utiles pour diagnostiquer les problèmes de performance (temps de réponse du serveur lent ou ressources bloquant le rendu, respectivement). On peut donc supposer que ces autre indicateurs intégreront les Core Web Vitals dans un avenir plus ou moins proche.
Même si l'ajout des Core Web Vitals va sans doute modifier l'algorithme du moteur de recherche, l'impact sur le classement des sites indexés sera relativement modéré puisque Joel Mueller a confirmé que la priorité sera toujours donnée aux contenus les plus pertinents. La qualité du contenu prime donc pour l’instant sur l’expérience utilisateur.
Comment mesurer les Core Web Vitals pour mon site Web ?
Google met à disposition des éditeurs de sites Web, plusieurs outils qui permettent de mesurer ces fameux Core Web Vitals parmi lesquels :
- PageSpeed Insight : https://developers.google.com/speed/pagespeed/insights
- Search Console : https://search.google.com/search-console/about?hl=fr
- LightHouse : https://web.dev/measure/
Il existe d'autres outils qui permettent d'afficher les scores de ces indicateurs (GT Metrix, Chrome UX Report, Web Vitals Extensions, etc) mais je vous propose de rester focus sur ces trois là qui me paraissent être les plus importants.
Vous aurez noté que ces trois outils peuvent donner des valeurs légérement différentes. Je n'ai pas trouvé d'explications à cela et si vous en avez, n'hésitez pas à me l'indiquer dans les commentaires.
Personnellement, je les ai tous utilisé pour travailler, tester, améliorer et atteindre les scores que j'affiche. J'ai également utilisé GT Metrix pour valider les résultats obtenus.
Si les résultats des mesures de votre site Web ne sont pas satisfaisant à votre goût, ne vous inquiètez pas car la suite de cet article va vous apporter les solutions pour obtenir votre validation.
Pourquoi la vitesse d'affichage de mon site Web est-elle importante ?
Il existe de très nombreux indicateurs pour mesurer la performance d'un site Web et il faut bien admettre qu'il peut être difficile d'interpréter ceux à analyser et à optimiser, à moins que vous ne soyez un.e développeur.se confirmé.e.
Les Core Web Vitals servent de référence simplifiée pour mesurer l'expérience utilisateur en termes de performances perçues, d'interactivité et de plaisir. Ce sont les points sur lesquels vous allez devoir vous concentrer lorsque vous considérez les performances de votre page.
De plus, les Core Web Vitals sont représentatifs de ce que vos visiteurs voient d'abord dans leurs navigateurs lorsqu'ils visitent votre page, c'est-à-dire le contenu au-dessus de la ligne de flottaison. Ce qu'ils voient en premier influe directement sur leur perception des performances de votre page.
En vous concentrant d'abord sur ces trois mesures, vous pouvez obtenir des gains importants en termes de performances perçues et réelles, avant de devoir approfondir d'autres optimisations techniques.
En tant que webmaster et internaute, je vois 4 raisons principales qui doivent vous encourager à faire en sorte que votre site Web ait un temps de chargement le plus court possible.
L'expérience utilisateur
D'après une infographie réalisée par kissmetrics (cf ci-dessous), 47% des internautes s’attendent à un temps de chargement inférieur de deux secondes. Si le chargement dure plus de trois secondes, 40% des visiteurs quittent le site. Ainsi, plus le temps de chargement de votre site est court, plus la durée de rétention des utilisateurs sera élevée et moins le taux de rebond sera important.
L'exploration
Un site Web qui se charge lentement sera exploré plus lentement et de manière moins intensive par Googlebot du fait du budget d'exploration limité dont dispose ce dernier. Donc, la vitesse de chargement de votre site détermine son degré d’exploration ainsi que l’actualisation des contenus dans l’index de Google.
Le facteur de classement
Pour les moteurs de recherche, une expérience utilisateur positive est un facteur déterminant pour évaluer la qualité globale d’un site Web. C’est la raison pour laquelle la vitesse d'affichage est considéré depuis 2010 comme un facteur de classement par Google. Plus votre site s'affichera rapidement, meilleures seront vos chances d’avoir un classement élevé dans les SERPs.
Le chiffre d'affaires
D'après l'étude de Kissmetrics, une augmentation du temps de chargement d’une seconde peut faire diminuer le nombre de conversions jusqu’à 7%. Ce qui paraît négligeable au premier abord mais avec un calcul très simple, vous allez voir que cela peut être très impactant. Si votre boutique en ligne génère un chiffre d'affaires quotidiens de 1 000 €, l’augmentation du temps de chargement d’une seconde peut entraîner un perte de 70 € par jour. Sur un mois, cela peut représenter jusqu'à 2 100 € de chiffre d'affaires.
En combien de temps mon site Web doit-il s'afficher ?
Compte tenu de ce que nous venons de voir, on peut affirmer qu'un site Web ne doit pas mettre plus de deux secondes à charger pour assurer une expérience utilisateur satisfaisante. D'une façon globale, plus le temps de chargement est court, mieux c’est. Si la durée de chargement de votre site Web est inférieure à une seconde, c’est parfait.
De nombreux facteurs influencent directement sur la performance et impactent le temps de chargement de votre site Web. Vous allez pouvoir en améliorer certains à l’aide de cet article, tandis que vous n’aurez aucune action possible sur d'autres comme par exemple :
- Le cache du navigateurstrong> : Lorsque le cache du navigateur de l'internaute n’a pas été vidé depuis longtemps, le chargement de la page peut être considérablement ralenti car la mémoire vive de son ordinateur n'est plus en capacité de traiter toutes les données reçues.
- La bande passante : Le temps de chargement d'un site Web est également fonction de la bande passante disponible. Par exemple, un site s'affichera plus lentement sur un smartphone disposant d'une connexion 3G qu’avec un ordinateur ayant une connexion de type fibre optique.
Par contre, vous avez la possibilité d'impacter sur ces facteurs :
- La taille de données : La taille de votre site Web détermine la vitesse à laquelle il peut être chargé. Bien sur, on pense ici aux images mais cela inclus également les fichiers du site. Globalement, plus la taille des données à transmettre au navigateur est faible, plus le site peut être afficher rapidement.
- Les connexions au serveur : Plus le nombre de connexions au serveur par demande d’un client sera élevé, plus les contenus peuvent être chargés rapidement.
En résumé, la volumétrie de données qui doit être chargée par le navigateur lors de chaque affichage d’une page est un facteur déterminant pour le temps de chargement du site. Celle-ci doit être la plus faible possible. Par conséquence, plus la bande passante disponible est faible et plus ce facteur sera important.
Core Web Vitals, comment valider le test de Google ?
Lorsque l'on parle de vitesse de chargement, cela fait généralement référence au temps nécessaire qu'il faut au navigateur pour afficher la totalité d'une page Web après que l'utilisateur ait cliqué sur un lien. Outre ce terme, il est également possible de trouver les expressions durée de chargement ou Page Speed. Sur le Web, vous trouverez donc différentes appellations pour désigner un seul et même concept.
Dans le contexte d’un chargement rapide des pages d’un site Web, le temps qui s’écoule avant qu’un client ne reçoive le premier byte de la part d’un serveur (indicateur TTFB - Time To First Byte) revêt une grande importance. En effet, depuis avril 2010, le temps de chargement d'un site web fait officiellement partie des facteurs de classement de Google. Et ce sera bientôt encore plus le cas avec l'introduction des Core Web Vitals.
Néanmoins, la vitesse de chargement n'est qu’un facteur parmi d’autres qui peuvent favoriser l'indexation d'une page et influencer sur son classement dans les SERPs. Cependant, dans l'environnement extrêmement concurrentiel qui est le nôtre, un site Web qui s'affiche rapidement pourra sans doute bénéficier d’un classement plus favorable de la part de Google.
Je vous propose maintenant de passer en revue 20 actions qui vous permettront d'améliorer tous les points nécessaires pour valider les Core Web Vitals sur votre site Web. Certaines actions sont relativement techniques tandis que d’autres consistent simplement à éliminer des contenus inutilisés et à comprimer des données. Vous n'êtes pas obligé de toutes les appliquer ni de respecter l'ordre de leur présentation. A vous de juger de leur efficacité et de les adapter / adopter en fonction du résultat obtenu.
C'est parti !
1. Utiliser une seule feuille de style CSS
Les CSS permettent de définir les marges, les espaces, les alignements, les tailles de police, les couleurs et d’autres éléments de design d'un site Web. Cependant, lorsque ces style sont consignés sous forme de commande CSS individuelle intégrée au code HTML, une demande est générée pour chaque élément et nécessite donc une durée de chargement supplémentaire.
Le simple fait de regrouper toutes les classes CSS en une seule feuille de style permet d'avoir un affichage plus rapide du site.
2. Minifier les CSS et JS
Il est possible de réduire sensiblement la taille des fichiers CSS et JavaScript en supprimant simplement les espaces inutiles, également appelés "whitespaces" des lignes de ces fichiers. De cette manière, chaque classe peut être réduite à une seule ligne, ce qui diminuera le temps de lecture.
Exemple :
.article-blog {
margin: 10px;
padding: 10px 0;
display: block;
font-size: 1.15em;
font-weight: 500;
}Une fois minifié, ce code devient:
.article-blog {margin: 10px;padding: 10px 0;display: block;font-size: 1.15em;font-weight: 500;}Si vous avez de nombreuses lignes de CSS et de JS à minifier, vous pouvez utiliser des outils en ligne tels que :
- CSS minifier pour vos fichiers CSS
- Javascript minifier pour vos fichiers JS
3. Charger les fichiers JavaScript et CSS au bon moment
Votre site web est complétement affiché uniquement lorsque toutes les données JavaScript et CSS ont été chargées. Afin d’accélérer le processus de chargement, il est préférable de charger le JavaScript en toutes fins du code HTML et d'appeler les feuilles de style CSS depuis la zone <head> du code HTML de votre site. Ainsi, même si votre serveur est un peu lent, l’affichage de la page ne sera pas perturbé dans un premier temps.
A titre d'exemple, voici comment intégrer ces appels dans le code source de la page :
<html>
<head>
[...]
<link href="css/styles.css" rel="stylesheet">
[...]
</head>
<body>
[...]
<footer class="footer">...</footer>
[...]
<script src="assets/js/main.js"></script>
<script src="assets/js/functions.js"></script>
</body>
</html>4. Utiliser les sprites CSS
Les sprites CSS désignent des fichiers images qui sont composés de plusieurs images individuelles. Schématiquement, le principe consiste à assembler plusieurs images d’un site web en une seule. Au lieu d’envoyer plusieurs requêtes séparées au serveur, le navigateur n’a plus besoin que d’une seule demande pour pouvoir afficher toutes les imagesspritées. Il ne reste plus alors qu'à définir précisément avec les CSS le cadrage de l’image et à quel endroit chaque section de l’image doit être affichée.
Grâce à la magie d'Internet, on trouve aujourd'hui des générateurs de sprites en ligne tels que css.spritegen qui vous permet d'uploader jusqu'à 20 images et qui vous générera le fichier sprite et les classes CSS correspondantes !
5. Supprimer les CSS et le JavaScript en ligne
L'aspect visuel de votre site Web est en très grande partie géré par les CSS et le JavaScript. Ces deux éléments requièrent en général une grande quantité de code qui doit être lue à chaque fois que votre site Web est consulté. Et plus ces éléments sont nombreux et volumineux, plus cela prend du temps.
Afin d'augmenter drastiquement la vitesse d'affichage de votre site Web, il est fortement recommander d'externaliser les instructions CSS et JavaScript présentes dans le code source de votre site Web. Celles-ci doivent absolument être placées dans les fichiers CSS et JS et non dans votre code HTML.
Par exemple, vous pouvez externaliser les instructions CSS de la façon suivante :
<div style="margin: 10px;padding: 10px 0;display: block;font-size: 1.15em;font-weight: 500;">[...]</div>Votre code HTML devient après externalisation :
<div class="article-blog">[...]</div>Votre code CSS devient après externalisation :
.article-blog {margin: 10px;padding: 10px 0;display: block;font-size: 1.15em;font-weight: 500;}6. Utiliser CSS3 pour vos arrière-plans
Il faut plusieurs lignes de code pour afficher une image sur votre site Web. Lorsque des internautes visitent votre site, ce code est lu ligne par ligne. Lorsque vous ajoutez des boutons, des icônes ou des arrière-plans sous forme de fichiers images, le navigateur a besoin de beaucoup de temps pour charger et afficher votre site.
Pour éviter ce temps de latence inutile, la solution consiste à générer tous ces éléments graphiques - à l’exception des photos - grâce à CSS3. De cette façon, vous pouvez réduire le code source des pages de votre site Web. Autre avantage, les fichiers peuvent ainsi être affichés en haute définition sur tous les appareils.
7. Réduire ou supprimer les requêtes HTTP
Lorsqu’un internaute visite votre site web, son navigateur envoie une requête http(s) au serveur pour chaque nouvelle source qu’il rencontre. Cela est par exemple nécessaire pour afficher une image, pour afficher un tableau, etc. Chacune de ces requêtes influence directement le temps de chargement.
Il est ici possible de réduire le nombre de ces requêtes en limitant par exemple l’intégration de données externes à travers les feuilles de style CSS ou le JavaScript. C'est le cas notamment des appels pour afficher les Font Awesome ou les polices Google.
Il est également possible de définir des budgets alloués à ces différentes ressources. Pour définir ces budgets, vous devez créer et ajoutez un fichier budget.json en suivant ce tutoriel LightHouse.
8. Optimiser toutes les images de votre site Web
Aujourd'hui, les images sont indispensables pour illustrer un site Web. Cependant, l'utilisation non raisonnée de ces fichiers représente un risque d’augmentation significatif de la taille des données de votre site et par conséquent, un probable allongement de la durée de chargement de celui-ci.
C’est pour cette raison que je vous conseille de n’utiliser que des fichiers images optimisés pour une utilisation Web en adoptant - à chaque fois que cela est possible - le format Webp. Ce format a été créé par Google en 2010 dans le but de remplacer les différents formats d’images standard : jpg, png, gif, tiff, etc. L’objectif est de conserver une qualité d’image satisfaisante tout en réduisant le poids de 25% à 30%, ceci afin d’optimiser la vitesse de chargement du site.
Voici quelques conseils simples qui vous permettront d'optimiser vos fichiers images avant de les importer dans votre site Web.
- Suppression des balises meta et les fichiers EXIF : lorsque vous affichez des images provenant de votre appareil photo ou de votre smartphone, vos fichiers contiennent un grand nombre d’informations complémentaires, telles que le lieu où elles ont été prises, le type d’appareil photo utilisé et bien d’autres données. Un outil tel que tinypng vous permet de supprimer ces informations mais également de compresser vos fichiers. Cela vous permettra de réduire très fortement le poids de vos images.
- Mentionner les dimensions des fichiers images dans le code source : lorsqu’un moteur de recherche doit calculer lui-même les dimensions des illustrations, la durée de chargement peut s’en ressentir. La taille indiquée dans le code source doit correspondre à la taille réelle de l’image déposée sur le serveur. En aucun cas, vous ne devez utiliser le code pour redimensionner vos images.
- Utilisation du format d'image le plus adapté : Nous l'avons vu précédemment, le standard à privilégier aujourd'hui pour vos fichiers images est le format Webp. Si vous avez déjà chargé de nombreuses images dans votre site Web Joomla, un plugin très malin comme DJ-Webp vous permettra de toutes les transformer au format recommandé. Les images que vous importerez ensuite seront également converties au format Webp.
Pour ce qui est des illustrations, il est de plus en plus recommandé d'utiliser - quand cela est possible - le format vectoriel des SVG.
9. Activer la compression GZip
La compression GZip vous donne la possibilité de comprimer la totalité d'un site Web. Cela signifie que le volume des données à charger est réduit et que le temps de chargement peut donc être raccourci. Le principal avantage de cette méthode d'optimisation tient dans le fait qu’elle est facile à mettre en oeuvre. Par ailleurs, la compression GZip est utilisable par tous les serveurs Web courants.
Étant donné que les sites Web utilisent majoritairement des serveurs de type Apache, l’exemple donné ci-après concerne donc Apache. Sur ce type de serveur, on utilise aujourd'hui le module mod_deflate opour activer GZip.
- mod_deflate
Rapatriez votre fichier
.htaccessdepuis votre serveur et copiez-collez ces lignes suivantes dedans :<IfModule mod_deflate.c> SetOutputFilter DEFLATE DeflateCompressionLevel 9 </IfModule> <Location /> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/x-javascript Header append Vary User-Agent env=!dont-vary </Location>Renvoyez votre fichier
.htaccesssur votre serveur.
Naturellement, si vous activer la compression GZip grâce à cette méthode en utilisant votre fichier .htaccess, vous n'avez plus besoin de l'activer depuis le panneau d'administration de Joomla.
10. Utiliser des caches générés par le serveur
Dans le cas présent, un document HTML est enregistré de manière provisoire sur le serveur. Concrétement, ce document temporaire contient les éléments principaux de votre site Web. Si cette URL est consultée une deuxième fois, les éléments ainsi enregistrés n’auront plus besoin d’être rechargés depuis le serveur mais pourront être récupérés directement dans le fichier d’enregistrement temporaire. C'est le principe de fonctionnement du cache.
Joomla possède nativement plusieurs niveaux et systèmes de caches qui, lorsqu'ils sont judicieusement combinés, apportent d'excellents résultats en matière d'optimisation. L'ajout d'une extension telle que JotCache peut également faire des merveilles en termes de résultats suivant votre configuration. Ici, je vous conseille de tester la meilleure combinaison possible en fonction des gains que vous obtiendrez.
11. Utiliser un Content Directory Network
Un Content Directory Network (autrement abrégé en CDN) est un ensemble de serveurs Webs décentralisés situés sur différents sites à travers le monde. De cette façon, un visiteur californien téléchargera les données de votre site à partir d'un serveur peut-être situé à los Angeles alors qu'un visiteur indien les chargera peut-être depuis Bangalore. Ainsi, le temps de chargement sera consodérablement réduit pour ces deux visiteurs.
Utiliser un CDN est un choix judicieux si votre site web a une audience internationale et que vous souhaitez que vos utilisateurs puissent accéder rapidement à vos contenus. Sinon, cette option ne présente que peu d'intérêt.
Naturellement, vous devez vous inscrire auprès d'un fournisseur pour utiliser un CDN. Il en existe des gratuits mais je vous recommande vivement de vérifier attentivement les conditions de gratuité des offres proposées ainsi que l'utilisation des données qui seront traitées.
Pour ce qui est des prestataires payants, le recours à ce type de service se fait moyennant une facturation établie suivant la volumétrie des données échangées mensuellement sur le réseau.
Là aussi, il existe plusieurs extensions Joomla qui vous permettront d'utiliser facilement ce type de service, parmi lesquelles CDN for Joomla de chez Regular Labs.
12. Limiter les redirections 301
Une redirection 301 est utile pour éviter les contenus en double ou pour rediriger une URL qui ne sont plus utilisée vers une nouvelle URL, par exemple. Le problème est que chaque redirection augmente mécaniquement la durée de chargement du site. Alors certes, le ralentissement engendré par chaque redirection n’est pas significatif, mais il n’en reste pas moins perceptible si vous avez défini de très nombreuses redirections.
Lorsque plusieurs redirections 301 s'enchaînent, le temps de chargement peut très vite augmenter. Gardez à l'esprit que Googlebot ne suit au maximum que trois redirections. Ainsi, l’enchaînement successif de redirections constitue un frein potentiel pour l’exploration et l'indexation de votre site Web.
Afin de limiter la présence de trop nombreuses redirections, je vous recommande de documenter la structure des URLs ou la création de nouvelles URLs pour votre site Web. Il en va de même pour les redirections 301 que vous auriez déjà mises en place via le composant Redirections. Lors de l’analyse des redirections de votre site Web, si vous trouvez plusieurs redirections consécutives, vous devez associer la première redirection au lien cible afin de supprimer les éventuelles redirections intermédiaires que vous pourriez avoir mises en place.
13. Héberger son site Web sur un serveur dédié
Aujourd'hui, la majorité des sites Web est hébergée sur des serveurs mutualisés. Cela signifie que le site Web partage son serveur avec d’autres sites Web. Selon le fournisseur, ce nombre peut rapidement atteindre et dépasser la centaine de sites. Le serveur doit ensuite traiter simultanément toutes les demandes des sites qu’il héberge. En règle générale, ce principe fonctionne uniquement au détriment de la vitesse de chargement.
Pour éviter ce problème, la seule solution est d’héberger votre site sur un serveur dédié. Ainsi, vous aurez un serveur dédié uniquement à votre site Web et la possibilité d’adapter individuellement le matériel du serveur aux besoins spécifiques de votre site. Cette solution - certes extrème - vous permettra de gagner un temps précieux en termes de durée de chargement.
14. Nettoyer votre site Web
Un site Web est constitué - entre autre - de fichiers contenant de très nombreuses lignes de code. Tous les espaces et les sauts de ligne contenus dans ces fichiers sont également lus par le navigateur de l'internaute. Un espace en trop n’aura sans doute aucun impact sur les performances du site mais vu qu'un site web peut être constitué de plusieurs centaines de milliers de lignes de code en fonction de sa taille, les espaces et les commentaires inutiles peuvent avoir un impact sur la durée de chargement.
Vérifiez régulièrement que les extensions tierces que vous avez ajouté au fil du temps vous sont toujours utiles. Avez-vous besoin de conserver sur votre site Web certaines extensions natives que vous n'utilisez pas ? Chaque extension inutilisée représente un poids inutile qui vient surcharger votre site. Certaines d'entres elles peuvent également représenter des risques en termes de sécurité. Faites donc le ménage régulièrement pour ne conserver que ce qui vous est réellement nécessaire.
Le nettoyage de votre site Web doit également inclure la gestion régulière des corbeilles des articles, des modules, des menus, des catégories, etc. Sauf cas exceptionnel, vous n'avez pas réellement besoin de conserver des données devenues obsolètes ou inutiles car elles encombrent votre base de données.
Pour éviter d'avoir un code source inutilement trop long, je vous recommande d’intégrer systématiquement vos textes dans votre site Web directement au format HTML en d’utilisant l’éditeur CodeMirror de Joomla. Si vous n'êtes pas familier du langage HTML, vous avez la possibilité d’intégrer vos textes sous forme de texte brut aet de les formater ensuite avec l'éditeur de texte par défaut.
15. Limiter les scripts externes
Qu’il s’agisse de fontes, de librairies ou de codes de suivis, vous pouvez intégrer des scripts externes dans votre site web selon différentes méthodes. Néanmoins, vous devez savoir que ces codes risquent de ralentir le temps de chargement de votre site. C’est la raison pour laquelle je vous conseille de n’ajouter uniquement les scripts dont vous avez réellement besoin.
Dans la mesure du possible, essayez également de limiter le nombre de codes de suivi au minimum. Et si possible, n'utilisez que des codes de suivi de type asynchrones car ceux-ci sont uniquement chargés une fois que la page a été ouverte et ne perturbent donc pas le chargement de la page.
Quand cela est possible, évitez au maximum d'utiliser des iframes dans le code de vos pages.
16. Adopter le format AMP
AMP est l'acronyme de Accelerated Mobile Pages, un projet soutenu par Google qui offre aux éditeurs de sites Web la possibilité de charger leurs sites au format mobile quasiment sans délai. Pour cela, les sites Web doivent remplir plusieurs conditions techniques préalables afin de pouvoir être affichés sur les appareils mobiles dans ce format dépouillé.
Joomla, comme de nombreux CMS, permet l’utilisation de la technologie AMP grâce à l’utilisation d'extensions tierces telles que wbAMP de Yannick Gaultier. Jusqu’ici, le format AMP est plutôt destiné aux sites de contenus de type blog, news, magazine, etc. et il est envisagé que ce format soit également étendu aux boutiques en ligne.
17. Miser sur le cache du navigateur
La mise en mémoire cache des données du site dans les navigateurs permet d’enregistrer temporairement certains éléments de votre site Web dans le cache du navigateur des internautes. Concrétement, lorsque votre visiteur demande à afficher une nouvelle URL ce votre site, cela n’entraîne pas le renouvellement complet de tous les éléments qui le composent et cela améliore donc la vitesse de chargement.
La mise en mémoire cache sur les navigateurs peut être activée dans Joomla à l’aide du plugin natif Système - Cache de page.
En complément de l'activation de ce plugin, je vous recommande également d'ajouter l'un de ces deux modules dans votre fichier .htaccess :
- mod_headers
<FilesMatch "\.(css|js|gif|pdf|jpg|jpeg|png)$"> Header set Cache-Control "max-age=2592000, public" </FilesMatch>
Les parenthèses se rapportent aux formats de fichiers déposés dans le cache. Par ailleurs, la durée du cache est indiquée grâce à la mention "max-age". L’unité de mesure retenue est la seconde. Dans l’exemple ci-dessus, le cache doit être conservé par le navigateur pour une durée d'environ 30 jours.
- mod_expires
## Cache Expiration ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType text/html "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 1 month" </IfModule> ## Cache Expiration
Grâce à ce module, vous avez la possibilité de déterminer séparément une durée différente de mise en cache pour chaque type de fichier.
18. Réduire les délais de réponse du serveur
Ce point sera sans doute celui qui vous demandera le plus de travail car vous n'avez aucune influence directe sur ces délais à part vous adresser à l'hébergeur de votre site Web. Néanmoins, vous allez voir qu'il est quand même possible d'améliorer un délai de réponse moyen en évitant quelques erreurs. Pour rappel, Google estime qu'un délai de réponse inférieur à 200 millisecondes est considéré comme satisfaisant.
- Les extensions
Commencez par vérifier que votre site est correctement installé et si certaines extensions ne présentent pas d'éventuels problèmes. Dans certains cas, certaines extensions tierces peuvent avoir une influence négative sur le délai de réponse du serveur.
- Les requêtes de la base de données
S’il y a une ou des erreurs dans la connexion entre le site Web et sa base de données, cela peut avoir des conséquences néfastes sur le délai de réponse du serveur et augmenter considérablement le temps de chargement du site Web.
- La structure du CMS
Votre CMS lui-même peut ralentir la vitesse de chargement globale et rallonger le délai de réponse du serveur. C’est notamment le cas lorsque vous ajoutez de nouvelles extensions volumineuses à votre CMS. N'installez que ce que vous avez réellement besoin et n'utilisez pas un marteau-piqueur pour enfoncer une épingle.
- Un serveur basique
Il peut être tentant de privilégier un hébergement bon marché mais cela est souvent au détriment de la qualité. Les pics de trafic des autres sites Web hébergés sur le même serveur que le vôtre peuvent entraîner de forts ralentissements.
Si votre site se traine littéralement malgré tous vos efforts, il faudra sans doute envisager de changer d'hébergeur pour bénéficier de services de qualité.
19. Eliminer les Bad Request
Lorsqu'un navigateur Web accède à votre site Web, des requêtes sont adressées au serveur pour chaque ressource afin de pouvoir afficher les données à l'internaute. L’impossibilité de trouver ces ressources - images, fichiers JavaScript, etc - sur le serveur entraîne une réaction en chaîne qui allonge le temps de chargement.
Pour éviter les Bad Request facilement, il suffit de corriger les fichiers erronés et en indiquant le chemin d’accès correct ou en ayant affichant un nouveau fichier.
20. Liste des extensions Joomla utilisées sur ce site
Cette liste qui suit est fournie à titre indicatif et aucune rétribution ne m'a été versée par un développeur pour être cité dans cet article. Chacune de ces extensions est disponible en version gratuite et certaines proposent une version payante si vous avez besoin de fonctionnalités supplémentaires ou d'un support personnalisé de la part du développeur.
Vous avez besoin d'aide pour valider les Core Web Vitals de Google ?
Il n'est malheureusement pas possible de fournir une recette miracle qui soit applicable à tout le monde. Votre serveur, votre template, vos extensions sont probablement différents des miens. Si vous avez besoin d'aide ou tout simplement pas le temps d'optimiser votre site Joomla pour qu'il soit conforme aux Core Web Vitals de Google, n'hésitez pas à me contacter par mail.
En conclusion
Voilà, j'espère que cet article vous aura plu et qu'il vous permettra de valider les Core Web Vitals de Google haut la main. N'oubliez pas que si votre score est excellent, il peut se passer jusqu'à 28 jours avant que votre Search Console ne soit mise à jour. Mon conseil est qu'il ne faut surtout pas tarder pour valider ces Core Web Vitals.
Les scores que j'obtiens sont la combinaison de trois facteurs :
- Le temps passé : Entre la copie de mon site, la réinstallation, les tests, les mesures et les sauvegardes, j'estime qu'il m'a fallut une bonne dizaine d'heures pour arriver à ce résultat que je qualifie de satisfaisant.
- L'expérience professionnelle : Ce sont des années de travail - et parfois d'échecs - qui permettent de comprendre ce qu'il faut faire pour arriver à de tels scores. J'ai conscience que rien de ceci n'aurait été possible sans les réponses qui m'ont été apportées depuis des années par les membres de la communauté Joomla.
- Les extensions utilisées : Sans ces extensions, je n'aurais pas pu passer et valider les Core Web Vitals. Aussi, je tiens à remercier très sincérement leurs développeurs pour leur travail et pour le temps qu'ils ont consacré à développer ces extensions qui nous permettent d'avoir des sites Web encore plus performants.
J'espère que cet article vous aura aidé à comprendre quels sont les points importants à prendre en compte pour valider les Core Web Vitals. Cela peut sembler parfois compliqué ou même impossible mais avec un peu de patience, de bon sens et de courage, je ne doute pas que vous y parviendrez également.
Au delà du référencement de votre site et du score que vous obtiendrez, je pense qu'il est plus important de cultiver un vrai esprit de l'optimisation. L'avenir du Web sera de plus en plus soumis à des contraintes environnementales et nous devons apprendre et appliquer les bonnes pratiques et les méthodes vertueuses en la matière.
