Selon les derniers rapports de Chrome, plus de 50,1% des sites web ont d\u00e9j\u00e0 de bons scores de Core Web Vitals. Ce nombre continue d’ailleurs de cro\u00eetre sans arr\u00eat. Cela indique que davantage de propri\u00e9taires de sites se sensibilisent \u00e0 l’importance des performances.<\/p>\n\n\n\n
Si vous ne faites pas encore partie de ces 50 %, vous risquez de voir votre classement en souffrir dans les r\u00e9sultats Google, en plus de d\u00e9cevoir vos visiteurs.<\/p>\n\n\n\n
Voil\u00e0 pourquoi nous avons r\u00e9dig\u00e9 cet article, visant \u00e0 vous aider \u00e0 am\u00e9liorer les performances de votre site web. <\/p>\n\n\n\n
Vous pourrez ainsi am\u00e9liorer son r\u00e9f\u00e9rencement et son exp\u00e9rience utilisateur, tout en augmentant vos taux de conversion et diminuant vos taux de rebonds. <\/p>\n\n\n\n
Quels sont les \u00e9l\u00e9ments cl\u00e9s des performances d’un site web?<\/h2>\n\n\n\n
Google a con\u00e7u les Core Web Vitals pour \u00eatre des indicateurs cl\u00e9s en mati\u00e8re de performances. En ce sens, elle joue un r\u00f4le similaire \u00e0 des notes sur un bulletin scolaire, pour votre site web.<\/p>\n\n\n\n
Google utilise ces mesures parmi d’autres pour \u00e9valuer la qualit\u00e9 et la convivialit\u00e9 de votre site. Il mesure ainsi la vitesse de chargement de votre site web, sa r\u00e9activit\u00e9 et sa stabilit\u00e9 visuelle, afin d’\u00e9valuer l’exp\u00e9rience utilisateur.<\/p>\n\n\n\n
Il existe de nombreuses donn\u00e9es pouvant permettre d’\u00e9valuer les performances d’un site web. Google a toutefois choisi de n’en retenir que trois, consid\u00e9r\u00e9es comme plus importantes.<\/p>\n\n\n\n
Les trois mesures de base des performances d’un site web :<\/h3>\n\n\n\n\n- Plus grande peinture contenue (Largest Contentful Paint<\/em> ou LCP)<\/li>\n\n\n\n
- D\u00e9calage de disposition cumulatif (Cumulative Layout Shift<\/em> ou CLS)<\/li>\n\n\n\n
- Interaction avec la peinture suivante (Interaction to Next Paint<\/em> ou INP)<\/li>\n<\/ul>\n\n\n\n
Ces \u00e9l\u00e9ments peuvent ne pas avoir de sens pour le moment \u2014 Essayons de les comprendre s\u00e9par\u00e9ment.<\/p>\n\n\n\n
Plus grande peinture contenue (Largest Contentful Paint<\/em> ou LCP)<\/h3>\n\n\n\nCette premi\u00e8re donn\u00e9e mesure la vitesse \u00e0 laquelle le plus grand \u00e9l\u00e9ment de contenu (l\u2019image principale, une grande vid\u00e9o ou un gros morceau de texte) est enti\u00e8rement charg\u00e9 sur votre page.<\/p>\n\n\n\n
Selon l’\u00e9tude de Chrome cit\u00e9e pr\u00e9c\u00e9demment, 64,8% des sites Web auraient d\u00e9j\u00e0 des scores LCP acceptables. <\/p>\n\n\n\n
Pour les rejoindre, votre LCP doit atteindre un temps de chargement de 2,5 secondes ou moins. Au-del\u00e0 de quatre secondes, votre score sera consid\u00e9r\u00e9 mauvais, et pourrais diminuer votre taux de conversion. <\/p>\n\n\n\n
D\u00e9calage de disposition cumulatif (CLS)<\/h3>\n\n\n\n
De nos jours, plus de la moiti\u00e9 des internautes utilise des appareils mobiles pour naviguer sur le web. Les sites web doivent donc \u00eatre capable de s’adapter facilement \u00e0 tout type d’\u00e9cran. <\/p>\n\n\n\n
L’indicateur suivant mesure la r\u00e9activit\u00e9 de votre contenu. Il mesure la quantit\u00e9 de d\u00e9calage au cours du chargement, entre la mise en page pr\u00e9vue et celle qui s’affiche r\u00e9ellement. <\/p>\n\n\n\n
Un score CLS faible signifie que votre mise en page reste stable au cours du processus de chargement. Id\u00e9alement, il devrait \u00eatre de z\u00e9ro en version mobile et pc.<\/p>\n\n\n\n
En septembre 2024, 78,2 % des sites web obtiendraient de bons scores CLS, selon Google. Offrir une exp\u00e9rience utilisateur fluide et sans d\u00e9calage est donc une priorit\u00e9 de plus en plus r\u00e9pandu.<\/p>\n\n\n\n
En r\u00e8gle g\u00e9n\u00e9ral, vous devriez viser un score CLS de 0,1 ou moins. Toute note au-dessus de 0,25 peut nuire \u00e0 vos r\u00e9sultats aupr\u00e8s des utilisateurs mobiles.<\/p>\n\n\n\n
Interaction avec la peinture suivante (INP)<\/h3>\n\n\n\n
Depuis le 12 mars 2024, le 3e param\u00e8tres vital du Web est l’INP, ou Interaction to Next Paint. Cette mesure remplace le d\u00e9lai de premi\u00e8re entr\u00e9e (First Input Delay ou FID) au sein des Core Web Vitals. <\/p>\n\n\n\n
Le FID ne mesurait que la premi\u00e8re interaction possible pour l\u2019utilisateur. L\u2019INP va d\u00e9sormais plus loin, et examine toutes les interactions possibles sur une page web.<\/p>\n\n\n\n
Les donn\u00e9es de l’\u00e9tude de Chrome indiquent que 85% des sites web obtiennent d\u00e9j\u00e0 de bons scores INP. Il est d’ailleurs fort probable que si vous optimisez votre site pour les deux scores pr\u00e9c\u00e9dents, votre INP s’am\u00e9liorera \u00e9galement.<\/p>\n\n\n\n
Pour am\u00e9liorer l’exp\u00e9rience de vos utilisateurs, visez un INP de 200 millisecondes ou moins. Un score entre 200 et 500 millisecondes est tol\u00e9rable, mais indique que vous avez du travail \u00e0 faire.<\/p>\n\n\n\n
Tout r\u00e9sultat qui d\u00e9passe 500 millisecondes nuit s\u00e9rieusement \u00e0 l’exp\u00e9rience utilisateur.<\/p>\n\n\n\n
Comment mesurer les signes vitaux du noyau<\/h2>\n\n\n\n
Avant de commencer \u00e0 am\u00e9liorer vos scores de Core Web Vitals, il est sage d\u2019avoir une id\u00e9e de l\u2019\u00e9tat actuel de votre site. <\/p>\n\n\n\n
De cette fa\u00e7on, vous serez en mesure de mesurer vos progr\u00e8s. L\u2019\u00e9valuation r\u00e9guli\u00e8re de vos scores peut \u00eatre une partie pr\u00e9cieuse de la maintenance de votre site web.<\/p>\n\n\n\n
Examinons quelques fa\u00e7ons de mesurer les performances de votre site web.<\/p>\n\n\n\n
PageSpeed Insights<\/h3>\n\n\n\n
Il existe une poign\u00e9e d\u2019outils en ligne que vous pouvez utiliser pour mesurer les Core Web Vitals, y compris Pingdom<\/a> et GTmetrix<\/a>. Nous recommandons toutefois d\u2019utiliser Google PageSpeed Insights<\/a>.<\/p>\n\n\n\nPour commencer, rendez-vous sur le site et entrez l\u2019URL de votre site web. Cliquez ensuite simplement sur le bouton Analyser.<\/p>\n\n\n\n
Une fois l\u2019analyse de votre site termin\u00e9e, l’outil vous fournira un r\u00e9sum\u00e9 de certaines des donn\u00e9es cl\u00e9s et des donn\u00e9es de base sur les Core Web Vitals.<\/p>\n\n\n\n
\u00c0 titre d’exemple, nous avons test\u00e9 le site web Google.com, pour voir si l’entreprise r\u00e9ussi son propre test. Voici les r\u00e9sultats:<\/p>\n\n\n\n\n![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2024\/10\/pagespeeggoogle.jpg\")
<\/figure>\n<\/figure>\n\n\n\nComme vous pouvez le voir dans la capture d’\u00e9cran ci-dessus, Google ne donne pas toujours le meilleur exemple, et peine parfois \u00e0 respecter ses propres r\u00e8gles.<\/p>\n\n\n\n
Le site de Google.com a donc \u00e9chou\u00e9 le test, en atteignant seulement deux objectifs sur trois:<\/p>\n\n\n\n
\n- LCP : 1,2 secondes – r\u00e9ussi!<\/li>\n\n\n\n
- INP : 259 millisecondes – \u00e9chou\u00e9! d\u00e9passe 250 ms <\/li>\n\n\n\n
- CLS : 0,04 – r\u00e9ussi!<\/li>\n<\/ul>\n\n\n\n
PageSpeed Insights teste les scores des appareils mobiles et des ordinateurs en m\u00eame temps. Vous pouvez basculer d’une s\u00e9rie de r\u00e9sultats \u00e0 l’autre \u00e0 l’aide des onglets destin\u00e9s \u00e0 cet effet.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2024\/10\/pagespeedoptions.jpg\")
<\/figure>\n<\/div>\n\n\nSi vous faites d\u00e9filer la page de r\u00e9sultats, vous trouverez \u00e9galement des diagnostics et des suggestions d\u2019am\u00e9liorations. <\/p>\n\n\n\n
PageSpeed Insights vous proposera une s\u00e9rie de recommandations que vous pouvez utiliser pour augmenter votre score et am\u00e9liorer les performances de votre site. Cette liste sera plus ou moins longue, en fonction de vos r\u00e9sultats.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2024\/10\/pagespeeggoogle2.jpg\")
<\/figure>\n\n\n\nRapport sur l\u2019exp\u00e9rience utilisateur de Chrome<\/h3>\n\n\n\n
Vous pouvez \u00e9galement acc\u00e9der \u00e0 vos Core Web Vitals via votre rapport d\u2019exp\u00e9rience utilisateur Chrome. Cela peut \u00eatre particuli\u00e8rement utile pour les d\u00e9veloppeurs et les webmasters.<\/p>\n\n\n\n
Ce rapport est disponible via un autre outil appel\u00e9 la Google Search Console. Il vous fournit des donn\u00e9es r\u00e9elles et des informations sur vos visiteurs et leur activit\u00e9. <\/p>\n\n\n\n
Ce rapport vous aide ainsi \u00e0 comprendre comment vos utilisateurs utilisent le web et interagissent avec votre site.<\/p>\n\n\n\n
Pour y acc\u00e9der, vous devez vous connecter au tableau de bord de l’outil Google Search Console. Vous devez ensuite acc\u00e9der \u00e0 la section Core Web Vitals, qui se trouve dans la section \u00ab Experience \u00bb.<\/p>\n\n\n\n
L’extension Chrome Core Web Vitals<\/h3>\n\n\n\n
Un autre outil pratique peut vous aider \u00e0 \u00e9valuer les score de Core Web Vitals des sites web que vous visitez.<\/p>\n\n\n\n
Si vous utilisez le navigateur Google Chrome, vous pouvez utiliser l\u2019extension Web Vitals pour \u00e9valuer vos param\u00e8tres vitaux de base sur n\u2019importe quel site Web.<\/p>\n\n\n\n![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2024\/10\/webvitalsapp-1024x410.jpg\")
<\/figure>\n\n\n\nIl suffit d\u2019ajouter l\u2019extension \u00e0 Chrome pour y avoir acc\u00e8s. Il faut toutefois \u00e9viter de confondre avec l’application Core Web Vitals. <\/p>\n\n\n\n
Bien que celle-ci soit mieux \u00e9valu\u00e9e par les utilisateurs, Google \u00e9met un avertissement \u00e0 son sujet. L’application risque d’ailleurs de bient\u00f4t devenir inaccessible, alors il vaut mieux choisir l’outil recommand\u00e9. <\/p>\n\n\n\n![\"\"](\"https:\/\/www.ex2.com\/tutoriels\/wp-content\/uploads\/2024\/10\/webvitalsapp2-1024x275.jpg\")
<\/figure>\n\n\n\nGr\u00e2ce \u00e0 cet outil, chaque fois que vous vous connectez \u00e0 un site web, vous pourrez cliquez sur l\u2019ic\u00f4ne de l\u2019extension dans la barre du navigateur pour y acc\u00e9der. Vous verrez alors le score des Core Web Vitals pour la page web affich\u00e9e.<\/p>\n\n\n\n
Les scores LCP, CLS et INP seront ainsi accessibles en un coup d\u2019\u0153il. Vous n’aurez plus \u00e0 consulter la page de PageSpeed Insight pour les conna\u00eetre.<\/p>\n\n\n\n
Comment am\u00e9liorer les performances de votre site web?<\/h2>\n\n\n\n
Jusqu’\u00e0 maintenant, nous avons abord\u00e9 les bases des performances d’un site web. Il est d\u00e9sormais temps de vous donner quelques conseils pour am\u00e9liorer vos scores de Core Web Vitals. <\/p>\n\n\n\n
L’objectif n’est pas seulement d\u2019impressionner Google. Cette optimisation permet de cr\u00e9er un site web rapide et fluide que les internautes aimeront utiliser.<\/p>\n\n\n\n
1. Utilisez les formats d\u2019image modernes<\/h3>\n\n\n\n
Les humains sont d’abord et avant tout attir\u00e9s par le contenu visuel. Il est donc naturel d’utiliser des \u00e9l\u00e9ments multim\u00e9dias pour tenter de se d\u00e9marquer de ses comp\u00e9titeurs.<\/p>\n\n\n\n
Des vid\u00e9os ou des belles images \u00e0 haute r\u00e9solution peuvent toutefois nuire aux performances d’un site si elles ne sont pas correctement compress\u00e9es.<\/p>\n\n\n\n
Il est g\u00e9n\u00e9ralement pr\u00e9f\u00e9rable d’optimiser les fichiers avant de les t\u00e9l\u00e9verser sur votre site web plut\u00f4t que d\u2019utiliser des solutions c\u00f4t\u00e9 serveur.<\/p>\n\n\n\n
Google a d’ailleurs cr\u00e9er un type d’images sp\u00e9cifiquement optimis\u00e9 pour internet, soit le format WebP. Il permet de conserver la r\u00e9solution des images \u00e0 un niveau presque identique, tout en r\u00e9duisant consid\u00e9rablement la taille des fichiers.<\/p>\n\n\n\n
WebP est ainsi devenu le format de r\u00e9f\u00e9rence pour les photographies et les images complexes. Il offre une nettement meilleure compression que des formats comme JPG ou PNG. Il permet donc des fichiers moins volumineux, sans sacrifier la qualit\u00e9 des images.<\/p>\n\n\n\n
Les fichiers d’images WebP sont environ 30 % moins volumineux que leurs \u00e9quivalents en version JPG. Ils permettent donc de r\u00e9duire les besoins de bande passante et le temps n\u00e9cessaire au chargement.<\/p>\n\n\n\n
Plusieurs outils peuvent vous permettre d’optimiser facilement vos images. Notamment, l’application Squoosh<\/a> vous offre de convertir des images en WebP ou de simplement les compresser pour \u00e9conomiser de l\u2019espace.<\/p>\n\n\n\nVoici quelques plugins d\u2019optimisation d\u2019image qui m\u00e9rite aussi d’\u00eatre pris en compte :<\/h4>\n\n\n\n\n- ShortPixel Image Optimizer<\/li>\n\n\n\n
- Optimiseur d\u2019image EWWW<\/li>\n\n\n\n
- Imagifier<\/li>\n\n\n\n
- Smush<\/li>\n<\/ul>\n\n\n\n
Mis \u00e0 part le format WebP, nous recommandons aussi d\u2019utiliser SVG pour les ic\u00f4nes, logos et illustrations.<\/p>\n\n\n\n
Le format SVG est l’acronyme de Scalable Vector Graphics. Il ne s’agit pas d’images enregistr\u00e9es sous forme de pixels, comme les formats d\u2019image classiques tel que JPEG, PNG, WebP, etc.<\/p>\n\n\n\n
Les SVGs sont un langage de balisage bas\u00e9 sur le XML qui d\u00e9crit l\u2019image sur un plan g\u00e9om\u00e9trique 2D. En d’autres termes, les images prennent la forme de formules math\u00e9matiques. <\/p>\n\n\n\n
Celles-ci sont converties par le navigateur des utilisateurs. Les images sont alors \u00ab\u00a0reconstruites\u00a0\u00bb en selon les instructions du balisage SVG complet.<\/p>\n\n\n\n
Cette technique de programmation rend les SVG extr\u00eamement l\u00e9gers, puisque les fichiers sont essentiellement des petits blocs de texte.<\/p>\n\n\n\n
Le fait que les images SVG soient cr\u00e9\u00e9es \u00e0 partir de calculs pr\u00e9sente aussi d’autres avantages. Elles peuvent \u00eatre mises \u00e0 l\u2019\u00e9chelle sans la moindre perte de qualit\u00e9 et elles ont un aspect net sur n\u2019importe quel type d’\u00e9cran.<\/p>\n\n\n\n
Vous pouvez donc zoomer autant que vous voulez, l’image elle ne pixellisera pas. <\/p>\n\n\n\n
2. Optimisez les polices de votre site web pour les performances<\/h3>\n\n\n\n
Les polices de caract\u00e8res que vous choisissez peuvent aider ou nuire \u00e0 votre site web. Quand il est question d\u2019optimiser les performances de votre site web, un moins grand nombre de polices est g\u00e9n\u00e9ralement recommand\u00e9.<\/p>\n\n\n\n
Voici quelques conseils pour optimiser les polices de votre site web :<\/h4>\n\n\n\n\n- Limitez le nombre de polices<\/strong> : N’utilisez pas plus de deux polices principales sur votre site web. Cela signifie une police pour les titres et une autre pour le corps du texte. Vous r\u00e9duirez ainsi le nombre de requ\u00eates HTTP en simplifiant votre design. Faites \u00e9galement attention au poids des polices, et n\u2019incluez que celles dont vous avez r\u00e9ellement besoin.<\/li>\n\n\n\n
- Si possible, utilisez les m\u00eames polices que le syst\u00e8me<\/strong> : Les syst\u00e8mes informatiques ont tous des polices de caract\u00e8res d’inclus et pr\u00e9install\u00e9es. On peut penser \u00e0 des options comme Arial, Helvetica ou Georgia. Ces polices se chargent instantan\u00e9ment, en plus de vous \u00e9viter de trouver des solutions suppl\u00e9mentaires.<\/li>\n\n\n\n
- Pr\u00e9chargez les polices critiques<\/strong> : Un lien de pr\u00e9chargement ajout\u00e9 dans votre HTML peut indiquer au navigateur d\u2019obtenir vos polices principales au d\u00e9but du processus de chargement. Cette solution peut am\u00e9liorer consid\u00e9rablement les temps de chargement du contenu textuel.<\/li>\n\n\n\n
- Optimisez vos polices personnalis\u00e9es pour \u00e9viter les d\u00e9calages<\/strong> : Les navigateurs ne connaissent pas les dimensions exactes des caract\u00e8res des polices personnalis\u00e9es avant des les t\u00e9l\u00e9charger. Cette r\u00e9alit\u00e9 peut parfois entra\u00eener des d\u00e9calages entre la mise en page pr\u00e9vue et celle qui s’affiche r\u00e9ellement. Ce d\u00e9calage mesur\u00e9 par le CLS, ou Cumulative Layer Shift. De nombreux outils peuvent vous aider \u00e0 g\u00e9n\u00e9rer des CSS pour r\u00e9duire le d\u00e9calage.<\/li>\n\n\n\n
- R\u00e9duisez l’\u00e9tendu de vos polices<\/strong> : Supprimez les caract\u00e8res non utilis\u00e9s de vos fichiers de polices, comme les caract\u00e8res non latins si votre site ne les utilise pas. Cela r\u00e9duit la taille des fichiers et acc\u00e9l\u00e8re les temps de chargement.<\/li>\n<\/ul>\n\n\n\n
Il existe quelques strat\u00e9gies avanc\u00e9es d\u2019optimisation des polices de caract\u00e8res. Cette liste de conseils devrait toutefois vous aider \u00e0 \u00e9viter que les polices ne nuisent trop aux performances de votre site web.<\/p>\n\n\n\n
3. Pensez-y bien avant d\u2019utiliser Google Tag Manager<\/h3>\n\n\n\n
Google Tag Manager est un outil pratique qui accomplit parfaitement ses objectifs. Il peut vous aider \u00e0 choisir des mots-cl\u00e9s \u00e0 viser pour am\u00e9liorer votre r\u00e9f\u00e9rencement SEO.<\/p>\n\n\n\n
C\u2019est un outil complet permettant de g\u00e9rer plusieurs balises de mots-cl\u00e9s sans utiliser de code. Il pr\u00e9sente toutefois \u00e0 la fois des avantages et des inconv\u00e9nients en ce qui concerne les Core Web Vitals.<\/p>\n\n\n\n
Google Tag Manager est excellent pour la gestion de vos mots-cl\u00e9s. Il peut cependant ralentir votre site s\u2019il n\u2019est pas utilis\u00e9 judicieusement. <\/p>\n\n\n\n
Chaque balise ajoute quelques millisecondes au temps de chargement. Si vous en utilisez un trop grand nombre, elle s’additionnent pour retarder cumulativement le chargement de mani\u00e8re significative.<\/p>\n\n\n\n
Chacune des balises se d\u00e9clenche \u00e0 chaque chargement de page. Il vaut donc mieux utiliser Google Tag Manager uniquement pour les balises essentielles et \u00e0 l\u2019\u00e9chelle du site uniquement. Il est pr\u00e9f\u00e9rable de tester manuellement les balises moins critiques ou sp\u00e9cifiques aux pages.<\/p>\n\n\n\n
4. Utilisez la mise en cache pour am\u00e9liorer les performances de votre site web<\/h3>\n\n\n\n
La mise en cache est un peu comme un \u00ab\u00a0souvenir\u00a0\u00bb r\u00e9cent de votre site web. <\/p>\n\n\n\n
Sans cache, le contenu de chaque page web est enti\u00e8rement depuis le serveur pour chaque visiteur. Au contraire, la mise en cache stocke une copie de la page et la pr\u00e9sente aux visiteurs sans devoir la charger.<\/p>\n\n\n\n
L’utilisation de la mise en cache peut ainsi am\u00e9liorer consid\u00e9rablement les temps de chargements, et particuli\u00e8rement le LCP. L’impact est d’autant plus important pour les sites web dynamiques ou riches en contenu multim\u00e9dias. Il existe diff\u00e9rents niveaux de mise en cache que vous pouvez envisager :<\/p>\n\n\n\n
\n- Cache du navigateur<\/strong> : Indique aux navigateurs de stocker certains fichiers localement.<\/li>\n\n\n\n
- Mise en cache c\u00f4t\u00e9 serveur<\/strong> : Stocke les pages g\u00e9n\u00e9r\u00e9es ou les requ\u00eates de base de donn\u00e9es.<\/li>\n\n\n\n
- Objet en cache<\/strong> : cache des \u00e9l\u00e9ments individuels comme les widgets ou les menus.<\/li>\n<\/ul>\n\n\n\n
En fonction de votre h\u00e9bergeur web, vous \u00eates peut-\u00eatre en mesure de tirer parti de la mise en cache au niveau du serveur.<\/p>\n\n\n\n
Par exemple, les plans d’h\u00e9bergement web d’Ex2 vous offrent l’acc\u00e8s \u00e0 des serveurs compatibles avec la technologie de mise en cache Litespeed.<\/p>\n\n\n\n
Si vous utilisez WordPress comme CMS pour votre site web, le plugin LS Cache peut vous aider \u00e0 mettre en place des couches de mise en cache. Il offre diverses options de caches de navigateur et d\u2019objets permettant d’am\u00e9liorer la vitesse de chargement de votre site.<\/p>\n\n\n\n
5. \u00c9liminer les ressources de blocage du rendu<\/h3>\n\n\n\n
Les \u00e9l\u00e9ments de blocage de rendu font r\u00e9f\u00e9rence aux fichiers HTML, CSS et JavaScript statiques n\u00e9cessaires pour livrer une page de votre site.<\/p>\n\n\n\n
Chacun de ces fichiers contient des scripts qui peuvent emp\u00eacher vos utilisateurs d\u2019afficher du contenu. G\u00e9n\u00e9ralement, ils sont cr\u00e9\u00e9s \u00e0 partir de plugins et d\u2019outils tiers.<\/p>\n\n\n\n
Pour \u00e9viter que ces scripts ne nuisent \u00e0 votre exp\u00e9rience utilisateur, vous pouvez \u00e9liminer les ressources de blocage du rendu et r\u00e9duire ou supprimer tous les \u00e9l\u00e9ments inutilis\u00e9s.<\/p>\n\n\n\n
Il existe plusieurs techniques que vous pouvez utiliser pour faire cela.<\/p>\n\n\n\n
Vous pouvez tout d’abord r\u00e9duire votre JavaScript et CSS manuellement. Cela implique notamment d’\u00e9liminer les espaces blancs ou les commentaires inutiles.<\/p>\n\n\n\n
Cette t\u00e2che peut \u00eatre simplifi\u00e9e en utilisant un outil comme CSS Minifier pour faciliter les choses.<\/p>\n\n\n\n
Il vous suffit alors d’entrer votre CSS et s\u00e9lectionnez le bouton Minify. Vous pouvez copier et coller la version optimis\u00e9e pour remplacer votre code pr\u00e9c\u00e9dent.<\/p>\n\n\n\n
Une autre m\u00e9thode consiste \u00e0 condenser votre JavaScript et CSS en combinant les fichiers. Pour ce faire, vous pouvez notamment utiliser un outil d\u2019optimisation de fichiers, comme celui du plugin WP Rocket.<\/p>\n\n\n\n
6. Reporter le chargement de JavaScript<\/h3>\n\n\n\n
Pour am\u00e9liorer vos scores FID en particulier, vous pouvez utiliser une technique connue sous le nom de chargement diff\u00e9r\u00e9 ou retard\u00e9. Il s’agit en fait de diff\u00e9rer le chargement de JavaScript. Cette approche permet d\u2019\u00e9liminer les \u00e9l\u00e9ments bloquant le rendu.<\/p>\n\n\n\n
Le chargement diff\u00e9r\u00e9 permet de commencer charge d\u2019autres contenus sur la page d\u00e8s qu\u2019un visiteur arrive, plut\u00f4t que d\u2019attendre que tous les fichiers JavaScript finissent de charger.<\/p>\n\n\n\n
Au contraire, ce seront vos fichiers que se trouveront forc\u00e9s d\u2019attendre que le reste de votre page web soit charg\u00e9.<\/p>\n\n\n\n
Vous pouvez aussi choisir que le CSS critique charge \u00ab le contenu au-dessus du pli \u00bb plus rapidement. \u00ab Au-dessus du pli \u00bb d\u00e9signe les \u00e9l\u00e9ments de la page web qui apparaissent en premier.<\/p>\n\n\n\n
7. Utiliser un r\u00e9seau de diffusion de contenu (CDN)<\/h3>\n\n\n\n
Imaginez que votre site web ait un clone de lui-m\u00eame dans chaque grande ville du monde. C\u2019est essentiellement ce qu\u2019un r\u00e9seau de diffusion de contenu (CDN) fait.<\/p>\n\n\n\n
Il distribue des copies de vos actifs statiques (comme les images, CSS et fichiers JavaScript) sur des serveurs du monde entier, afin que vos visiteurs puissent les t\u00e9l\u00e9charger \u00e0 partir de l\u2019emplacement le plus proche.<\/p>\n\n\n\n
Le r\u00e9sultat? Des temps de chargement plus rapides, des scores LCP am\u00e9lior\u00e9s et une meilleure exp\u00e9rience utilisateur pour votre public mondial. Il peut \u00e9galement aider \u00e0 minimiser le temps au premier octet (TTFB).<\/p>\n\n\n\n
Il existe plusieurs outils tiers que vous pouvez utiliser pour votre site WordPress. L\u2019une des options les plus populaires est Cloudflare.<\/p>\n\n\n\n
8. Optimisez les formats des images de votre site web pour les performances<\/h3>\n\n\n\n
Plus une image est grande, plus le fichier qui la compose est volumineux. Par cons\u00e9quent, il est sage d’\u00e9viter d\u2019utiliser des images trop grandes un peu partout. <\/p>\n\n\n\n
Par exemple, il n\u2019y a aucune raison d\u2019utiliser de grandes images HD pour vos miniatures. Vous devriez plut\u00f4t choisir des images plus petites et \u00e0 faible r\u00e9solution.<\/p>\n\n\n\n
Pour optimiser davantage vos images, vous pouvez utiliser l\u2019attribut srcset<\/em> dans votre code HTML. Cette balise vous permet de sp\u00e9cifier les emplacements des images de diff\u00e9rentes tailles. <\/p>\n\n\n\nLes navigateurs peuvent alors automatiquement servir des images de la bonne taille, en fonction de la r\u00e9solution du p\u00e9riph\u00e9rique. Ce proc\u00e9d\u00e9 am\u00e9liore les performances, particuli\u00e8rement le score LCP.<\/p>\n\n\n\n
Vous pouvez \u00e9galement sp\u00e9cifier les attributs de largeur et de hauteur pour vos balises d\u2019image. Une autre solution est de r\u00e9server l\u2019espace n\u00e9cessaire avec le ratio d\u2019aspect CSS. Cela assure que l\u2019utilisateur voit automatiquement des images plus petites.<\/p>\n\n\n\n
Vous pouvez le faire en prenant le contenu du fichier CSS principal et l\u2019inlining dans votre code. Le contenu chargera ainsi plus rapidement, ce qui am\u00e9liorera l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n
Certains plugins de mise en cache (comme WP Rocket) offrent aussi une fonctionnalit\u00e9 d\u2019optimisation CSS qui peut \u00eatre servir \u00e0 cet effet.<\/p>\n\n\n\n
9. Utilisez le chargement paresseux (Lazy Loading)<\/h3>\n\n\n\n
Nous vous recommandons aussi de tirer profit du chargement paresseux ou lazy loading. Cette technique permet d’\u00e9viter que vos images soient charg\u00e9es en m\u00eame temps que tout le reste sur la page. Elles chargent plut\u00f4t au moment pr\u00e9cis o\u00f9 les utilisateurs acc\u00e8dent \u00e0 la section de la page web dans laquelle elles sont incluses.<\/p>\n\n\n\n
Les images \u00e0 chargement diff\u00e9r\u00e9 peuvent aider \u00e0 am\u00e9liorer votre score LCP et la vitesse de chargement. Elles sont aussi plut\u00f4t faciles \u00e0 utiliser.<\/p>\n\n\n\n
Les navigateurs modernes prennent en charge le chargement lent natif. Il suffit d’inclure l\u2019attribut loading=\u201dlazy\u201d sur les balises .<\/p>\n\n\n\n
Pour les utilisateurs de WordPress, vous avez juste besoin d\u2019un plugin (comme Smush) pour activer le lazy loading.<\/p>\n\n\n\n
10. Am\u00e9liorez votre h\u00e9bergement web<\/h3>\n\n\n\n
Il peut arriver que vous aillez tout fait correctement, mais que vos scores de Core Web Vitals restent bas. Si c’est ce cas, c’est peut-\u00eatre que les besoins de votre site d\u00e9passent les ressources auxquelles il a acc\u00e8s.<\/p>\n\n\n\n
\u00c0 ce stade, il est logique d’envisager de mettre \u00e0 niveau de votre plan d\u2019h\u00e9bergement web. Vous pourrez ainsi augmenter les ressources accessibles \u00e0 votre site.<\/p>\n\n\n\n
La mise \u00e0 niveau de votre h\u00e9bergement web est le moyen le plus rapide pour acc\u00e9l\u00e9rer votre site Web. Ce n’est toutefois pas une solution miracle, si vous n’avez pas rempli les \u00e9tapes pr\u00e9c\u00e9dentes.<\/p>\n\n\n\n
De plus, cette solution n’est pas gratuite. Chaque fois que vous passez \u00e0 un plan sup\u00e9rieur, vous augmentez les frais d’op\u00e9rations de votre site web. C’est pourquoi nous avons plac\u00e9 ce conseil \u00e0 la toute fin de notre liste.<\/p>\n\n\n\n
Pour conclure nos conseils pour am\u00e9liorer les performances de votre site web <\/h2>\n\n\n\n
Les performances de votre site web peuvent jouer un r\u00f4le majeur dans le succ\u00e8s ou l’\u00e9chec de votre site web. Il est donc important de vous assurer que votre site est conforme aux Core Web Vitals de Google. <\/p>\n\n\n\n
Ce sont des indicateurs cl\u00e9s de la vitesse de chargement, qui jouent \u00e9galement un r\u00f4le important dans le r\u00e9f\u00e9rencement SEO.<\/p>\n\n\n\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 am\u00e9liorer les performances de votre site web. Si c\u2019est le cas, nous vous invitons \u00e0 consulter nos autres autres articles et tutoriels<\/a>.<\/p>\n\n\n\n
Ces \u00e9l\u00e9ments peuvent ne pas avoir de sens pour le moment \u2014 Essayons de les comprendre s\u00e9par\u00e9ment.<\/p>\n\n\n\n
Plus grande peinture contenue (Largest Contentful Paint<\/em> ou LCP)<\/h3>\n\n\n\nCette premi\u00e8re donn\u00e9e mesure la vitesse \u00e0 laquelle le plus grand \u00e9l\u00e9ment de contenu (l\u2019image principale, une grande vid\u00e9o ou un gros morceau de texte) est enti\u00e8rement charg\u00e9 sur votre page.<\/p>\n\n\n\n
Selon l’\u00e9tude de Chrome cit\u00e9e pr\u00e9c\u00e9demment, 64,8% des sites Web auraient d\u00e9j\u00e0 des scores LCP acceptables. <\/p>\n\n\n\n
Pour les rejoindre, votre LCP doit atteindre un temps de chargement de 2,5 secondes ou moins. Au-del\u00e0 de quatre secondes, votre score sera consid\u00e9r\u00e9 mauvais, et pourrais diminuer votre taux de conversion. <\/p>\n\n\n\n
D\u00e9calage de disposition cumulatif (CLS)<\/h3>\n\n\n\n
De nos jours, plus de la moiti\u00e9 des internautes utilise des appareils mobiles pour naviguer sur le web. Les sites web doivent donc \u00eatre capable de s’adapter facilement \u00e0 tout type d’\u00e9cran. <\/p>\n\n\n\n
L’indicateur suivant mesure la r\u00e9activit\u00e9 de votre contenu. Il mesure la quantit\u00e9 de d\u00e9calage au cours du chargement, entre la mise en page pr\u00e9vue et celle qui s’affiche r\u00e9ellement. <\/p>\n\n\n\n
Un score CLS faible signifie que votre mise en page reste stable au cours du processus de chargement. Id\u00e9alement, il devrait \u00eatre de z\u00e9ro en version mobile et pc.<\/p>\n\n\n\n
En septembre 2024, 78,2 % des sites web obtiendraient de bons scores CLS, selon Google. Offrir une exp\u00e9rience utilisateur fluide et sans d\u00e9calage est donc une priorit\u00e9 de plus en plus r\u00e9pandu.<\/p>\n\n\n\n
En r\u00e8gle g\u00e9n\u00e9ral, vous devriez viser un score CLS de 0,1 ou moins. Toute note au-dessus de 0,25 peut nuire \u00e0 vos r\u00e9sultats aupr\u00e8s des utilisateurs mobiles.<\/p>\n\n\n\n
Interaction avec la peinture suivante (INP)<\/h3>\n\n\n\n
Depuis le 12 mars 2024, le 3e param\u00e8tres vital du Web est l’INP, ou Interaction to Next Paint. Cette mesure remplace le d\u00e9lai de premi\u00e8re entr\u00e9e (First Input Delay ou FID) au sein des Core Web Vitals. <\/p>\n\n\n\n
Le FID ne mesurait que la premi\u00e8re interaction possible pour l\u2019utilisateur. L\u2019INP va d\u00e9sormais plus loin, et examine toutes les interactions possibles sur une page web.<\/p>\n\n\n\n
Les donn\u00e9es de l’\u00e9tude de Chrome indiquent que 85% des sites web obtiennent d\u00e9j\u00e0 de bons scores INP. Il est d’ailleurs fort probable que si vous optimisez votre site pour les deux scores pr\u00e9c\u00e9dents, votre INP s’am\u00e9liorera \u00e9galement.<\/p>\n\n\n\n
Pour am\u00e9liorer l’exp\u00e9rience de vos utilisateurs, visez un INP de 200 millisecondes ou moins. Un score entre 200 et 500 millisecondes est tol\u00e9rable, mais indique que vous avez du travail \u00e0 faire.<\/p>\n\n\n\n
Tout r\u00e9sultat qui d\u00e9passe 500 millisecondes nuit s\u00e9rieusement \u00e0 l’exp\u00e9rience utilisateur.<\/p>\n\n\n\n
Comment mesurer les signes vitaux du noyau<\/h2>\n\n\n\n
Avant de commencer \u00e0 am\u00e9liorer vos scores de Core Web Vitals, il est sage d\u2019avoir une id\u00e9e de l\u2019\u00e9tat actuel de votre site. <\/p>\n\n\n\n
De cette fa\u00e7on, vous serez en mesure de mesurer vos progr\u00e8s. L\u2019\u00e9valuation r\u00e9guli\u00e8re de vos scores peut \u00eatre une partie pr\u00e9cieuse de la maintenance de votre site web.<\/p>\n\n\n\n
Examinons quelques fa\u00e7ons de mesurer les performances de votre site web.<\/p>\n\n\n\n
PageSpeed Insights<\/h3>\n\n\n\n
Il existe une poign\u00e9e d\u2019outils en ligne que vous pouvez utiliser pour mesurer les Core Web Vitals, y compris Pingdom<\/a> et GTmetrix<\/a>. Nous recommandons toutefois d\u2019utiliser Google PageSpeed Insights<\/a>.<\/p>\n\n\n\nPour commencer, rendez-vous sur le site et entrez l\u2019URL de votre site web. Cliquez ensuite simplement sur le bouton Analyser.<\/p>\n\n\n\n
Une fois l\u2019analyse de votre site termin\u00e9e, l’outil vous fournira un r\u00e9sum\u00e9 de certaines des donn\u00e9es cl\u00e9s et des donn\u00e9es de base sur les Core Web Vitals.<\/p>\n\n\n\n
\u00c0 titre d’exemple, nous avons test\u00e9 le site web Google.com, pour voir si l’entreprise r\u00e9ussi son propre test. Voici les r\u00e9sultats:<\/p>\n\n\n\n\n<\/figure>\n<\/figure>\n\n\n\nComme vous pouvez le voir dans la capture d’\u00e9cran ci-dessus, Google ne donne pas toujours le meilleur exemple, et peine parfois \u00e0 respecter ses propres r\u00e8gles.<\/p>\n\n\n\n
Le site de Google.com a donc \u00e9chou\u00e9 le test, en atteignant seulement deux objectifs sur trois:<\/p>\n\n\n\n
\n- LCP : 1,2 secondes – r\u00e9ussi!<\/li>\n\n\n\n
- INP : 259 millisecondes – \u00e9chou\u00e9! d\u00e9passe 250 ms <\/li>\n\n\n\n
- CLS : 0,04 – r\u00e9ussi!<\/li>\n<\/ul>\n\n\n\n
PageSpeed Insights teste les scores des appareils mobiles et des ordinateurs en m\u00eame temps. Vous pouvez basculer d’une s\u00e9rie de r\u00e9sultats \u00e0 l’autre \u00e0 l’aide des onglets destin\u00e9s \u00e0 cet effet.<\/p>\n\n\n
\n<\/figure>\n<\/div>\n\n\nSi vous faites d\u00e9filer la page de r\u00e9sultats, vous trouverez \u00e9galement des diagnostics et des suggestions d\u2019am\u00e9liorations. <\/p>\n\n\n\n
PageSpeed Insights vous proposera une s\u00e9rie de recommandations que vous pouvez utiliser pour augmenter votre score et am\u00e9liorer les performances de votre site. Cette liste sera plus ou moins longue, en fonction de vos r\u00e9sultats.<\/p>\n\n\n\n<\/figure>\n\n\n\nRapport sur l\u2019exp\u00e9rience utilisateur de Chrome<\/h3>\n\n\n\n
Vous pouvez \u00e9galement acc\u00e9der \u00e0 vos Core Web Vitals via votre rapport d\u2019exp\u00e9rience utilisateur Chrome. Cela peut \u00eatre particuli\u00e8rement utile pour les d\u00e9veloppeurs et les webmasters.<\/p>\n\n\n\n
Ce rapport est disponible via un autre outil appel\u00e9 la Google Search Console. Il vous fournit des donn\u00e9es r\u00e9elles et des informations sur vos visiteurs et leur activit\u00e9. <\/p>\n\n\n\n
Ce rapport vous aide ainsi \u00e0 comprendre comment vos utilisateurs utilisent le web et interagissent avec votre site.<\/p>\n\n\n\n
Pour y acc\u00e9der, vous devez vous connecter au tableau de bord de l’outil Google Search Console. Vous devez ensuite acc\u00e9der \u00e0 la section Core Web Vitals, qui se trouve dans la section \u00ab Experience \u00bb.<\/p>\n\n\n\n
L’extension Chrome Core Web Vitals<\/h3>\n\n\n\n
Un autre outil pratique peut vous aider \u00e0 \u00e9valuer les score de Core Web Vitals des sites web que vous visitez.<\/p>\n\n\n\n
Si vous utilisez le navigateur Google Chrome, vous pouvez utiliser l\u2019extension Web Vitals pour \u00e9valuer vos param\u00e8tres vitaux de base sur n\u2019importe quel site Web.<\/p>\n\n\n\n<\/figure>\n\n\n\nIl suffit d\u2019ajouter l\u2019extension \u00e0 Chrome pour y avoir acc\u00e8s. Il faut toutefois \u00e9viter de confondre avec l’application Core Web Vitals. <\/p>\n\n\n\n
Bien que celle-ci soit mieux \u00e9valu\u00e9e par les utilisateurs, Google \u00e9met un avertissement \u00e0 son sujet. L’application risque d’ailleurs de bient\u00f4t devenir inaccessible, alors il vaut mieux choisir l’outil recommand\u00e9. <\/p>\n\n\n\n<\/figure>\n\n\n\nGr\u00e2ce \u00e0 cet outil, chaque fois que vous vous connectez \u00e0 un site web, vous pourrez cliquez sur l\u2019ic\u00f4ne de l\u2019extension dans la barre du navigateur pour y acc\u00e9der. Vous verrez alors le score des Core Web Vitals pour la page web affich\u00e9e.<\/p>\n\n\n\n
Les scores LCP, CLS et INP seront ainsi accessibles en un coup d\u2019\u0153il. Vous n’aurez plus \u00e0 consulter la page de PageSpeed Insight pour les conna\u00eetre.<\/p>\n\n\n\n
Comment am\u00e9liorer les performances de votre site web?<\/h2>\n\n\n\n
Jusqu’\u00e0 maintenant, nous avons abord\u00e9 les bases des performances d’un site web. Il est d\u00e9sormais temps de vous donner quelques conseils pour am\u00e9liorer vos scores de Core Web Vitals. <\/p>\n\n\n\n
L’objectif n’est pas seulement d\u2019impressionner Google. Cette optimisation permet de cr\u00e9er un site web rapide et fluide que les internautes aimeront utiliser.<\/p>\n\n\n\n
1. Utilisez les formats d\u2019image modernes<\/h3>\n\n\n\n
Les humains sont d’abord et avant tout attir\u00e9s par le contenu visuel. Il est donc naturel d’utiliser des \u00e9l\u00e9ments multim\u00e9dias pour tenter de se d\u00e9marquer de ses comp\u00e9titeurs.<\/p>\n\n\n\n
Des vid\u00e9os ou des belles images \u00e0 haute r\u00e9solution peuvent toutefois nuire aux performances d’un site si elles ne sont pas correctement compress\u00e9es.<\/p>\n\n\n\n
Il est g\u00e9n\u00e9ralement pr\u00e9f\u00e9rable d’optimiser les fichiers avant de les t\u00e9l\u00e9verser sur votre site web plut\u00f4t que d\u2019utiliser des solutions c\u00f4t\u00e9 serveur.<\/p>\n\n\n\n
Google a d’ailleurs cr\u00e9er un type d’images sp\u00e9cifiquement optimis\u00e9 pour internet, soit le format WebP. Il permet de conserver la r\u00e9solution des images \u00e0 un niveau presque identique, tout en r\u00e9duisant consid\u00e9rablement la taille des fichiers.<\/p>\n\n\n\n
WebP est ainsi devenu le format de r\u00e9f\u00e9rence pour les photographies et les images complexes. Il offre une nettement meilleure compression que des formats comme JPG ou PNG. Il permet donc des fichiers moins volumineux, sans sacrifier la qualit\u00e9 des images.<\/p>\n\n\n\n
Les fichiers d’images WebP sont environ 30 % moins volumineux que leurs \u00e9quivalents en version JPG. Ils permettent donc de r\u00e9duire les besoins de bande passante et le temps n\u00e9cessaire au chargement.<\/p>\n\n\n\n
Plusieurs outils peuvent vous permettre d’optimiser facilement vos images. Notamment, l’application Squoosh<\/a> vous offre de convertir des images en WebP ou de simplement les compresser pour \u00e9conomiser de l\u2019espace.<\/p>\n\n\n\nVoici quelques plugins d\u2019optimisation d\u2019image qui m\u00e9rite aussi d’\u00eatre pris en compte :<\/h4>\n\n\n\n\n- ShortPixel Image Optimizer<\/li>\n\n\n\n
- Optimiseur d\u2019image EWWW<\/li>\n\n\n\n
- Imagifier<\/li>\n\n\n\n
- Smush<\/li>\n<\/ul>\n\n\n\n
Mis \u00e0 part le format WebP, nous recommandons aussi d\u2019utiliser SVG pour les ic\u00f4nes, logos et illustrations.<\/p>\n\n\n\n
Le format SVG est l’acronyme de Scalable Vector Graphics. Il ne s’agit pas d’images enregistr\u00e9es sous forme de pixels, comme les formats d\u2019image classiques tel que JPEG, PNG, WebP, etc.<\/p>\n\n\n\n
Les SVGs sont un langage de balisage bas\u00e9 sur le XML qui d\u00e9crit l\u2019image sur un plan g\u00e9om\u00e9trique 2D. En d’autres termes, les images prennent la forme de formules math\u00e9matiques. <\/p>\n\n\n\n
Celles-ci sont converties par le navigateur des utilisateurs. Les images sont alors \u00ab\u00a0reconstruites\u00a0\u00bb en selon les instructions du balisage SVG complet.<\/p>\n\n\n\n
Cette technique de programmation rend les SVG extr\u00eamement l\u00e9gers, puisque les fichiers sont essentiellement des petits blocs de texte.<\/p>\n\n\n\n
Le fait que les images SVG soient cr\u00e9\u00e9es \u00e0 partir de calculs pr\u00e9sente aussi d’autres avantages. Elles peuvent \u00eatre mises \u00e0 l\u2019\u00e9chelle sans la moindre perte de qualit\u00e9 et elles ont un aspect net sur n\u2019importe quel type d’\u00e9cran.<\/p>\n\n\n\n
Vous pouvez donc zoomer autant que vous voulez, l’image elle ne pixellisera pas. <\/p>\n\n\n\n
2. Optimisez les polices de votre site web pour les performances<\/h3>\n\n\n\n
Les polices de caract\u00e8res que vous choisissez peuvent aider ou nuire \u00e0 votre site web. Quand il est question d\u2019optimiser les performances de votre site web, un moins grand nombre de polices est g\u00e9n\u00e9ralement recommand\u00e9.<\/p>\n\n\n\n
Voici quelques conseils pour optimiser les polices de votre site web :<\/h4>\n\n\n\n\n- Limitez le nombre de polices<\/strong> : N’utilisez pas plus de deux polices principales sur votre site web. Cela signifie une police pour les titres et une autre pour le corps du texte. Vous r\u00e9duirez ainsi le nombre de requ\u00eates HTTP en simplifiant votre design. Faites \u00e9galement attention au poids des polices, et n\u2019incluez que celles dont vous avez r\u00e9ellement besoin.<\/li>\n\n\n\n
- Si possible, utilisez les m\u00eames polices que le syst\u00e8me<\/strong> : Les syst\u00e8mes informatiques ont tous des polices de caract\u00e8res d’inclus et pr\u00e9install\u00e9es. On peut penser \u00e0 des options comme Arial, Helvetica ou Georgia. Ces polices se chargent instantan\u00e9ment, en plus de vous \u00e9viter de trouver des solutions suppl\u00e9mentaires.<\/li>\n\n\n\n
- Pr\u00e9chargez les polices critiques<\/strong> : Un lien de pr\u00e9chargement ajout\u00e9 dans votre HTML peut indiquer au navigateur d\u2019obtenir vos polices principales au d\u00e9but du processus de chargement. Cette solution peut am\u00e9liorer consid\u00e9rablement les temps de chargement du contenu textuel.<\/li>\n\n\n\n
- Optimisez vos polices personnalis\u00e9es pour \u00e9viter les d\u00e9calages<\/strong> : Les navigateurs ne connaissent pas les dimensions exactes des caract\u00e8res des polices personnalis\u00e9es avant des les t\u00e9l\u00e9charger. Cette r\u00e9alit\u00e9 peut parfois entra\u00eener des d\u00e9calages entre la mise en page pr\u00e9vue et celle qui s’affiche r\u00e9ellement. Ce d\u00e9calage mesur\u00e9 par le CLS, ou Cumulative Layer Shift. De nombreux outils peuvent vous aider \u00e0 g\u00e9n\u00e9rer des CSS pour r\u00e9duire le d\u00e9calage.<\/li>\n\n\n\n
- R\u00e9duisez l’\u00e9tendu de vos polices<\/strong> : Supprimez les caract\u00e8res non utilis\u00e9s de vos fichiers de polices, comme les caract\u00e8res non latins si votre site ne les utilise pas. Cela r\u00e9duit la taille des fichiers et acc\u00e9l\u00e8re les temps de chargement.<\/li>\n<\/ul>\n\n\n\n
Il existe quelques strat\u00e9gies avanc\u00e9es d\u2019optimisation des polices de caract\u00e8res. Cette liste de conseils devrait toutefois vous aider \u00e0 \u00e9viter que les polices ne nuisent trop aux performances de votre site web.<\/p>\n\n\n\n
3. Pensez-y bien avant d\u2019utiliser Google Tag Manager<\/h3>\n\n\n\n
Google Tag Manager est un outil pratique qui accomplit parfaitement ses objectifs. Il peut vous aider \u00e0 choisir des mots-cl\u00e9s \u00e0 viser pour am\u00e9liorer votre r\u00e9f\u00e9rencement SEO.<\/p>\n\n\n\n
C\u2019est un outil complet permettant de g\u00e9rer plusieurs balises de mots-cl\u00e9s sans utiliser de code. Il pr\u00e9sente toutefois \u00e0 la fois des avantages et des inconv\u00e9nients en ce qui concerne les Core Web Vitals.<\/p>\n\n\n\n
Google Tag Manager est excellent pour la gestion de vos mots-cl\u00e9s. Il peut cependant ralentir votre site s\u2019il n\u2019est pas utilis\u00e9 judicieusement. <\/p>\n\n\n\n
Chaque balise ajoute quelques millisecondes au temps de chargement. Si vous en utilisez un trop grand nombre, elle s’additionnent pour retarder cumulativement le chargement de mani\u00e8re significative.<\/p>\n\n\n\n
Chacune des balises se d\u00e9clenche \u00e0 chaque chargement de page. Il vaut donc mieux utiliser Google Tag Manager uniquement pour les balises essentielles et \u00e0 l\u2019\u00e9chelle du site uniquement. Il est pr\u00e9f\u00e9rable de tester manuellement les balises moins critiques ou sp\u00e9cifiques aux pages.<\/p>\n\n\n\n
4. Utilisez la mise en cache pour am\u00e9liorer les performances de votre site web<\/h3>\n\n\n\n
La mise en cache est un peu comme un \u00ab\u00a0souvenir\u00a0\u00bb r\u00e9cent de votre site web. <\/p>\n\n\n\n
Sans cache, le contenu de chaque page web est enti\u00e8rement depuis le serveur pour chaque visiteur. Au contraire, la mise en cache stocke une copie de la page et la pr\u00e9sente aux visiteurs sans devoir la charger.<\/p>\n\n\n\n
L’utilisation de la mise en cache peut ainsi am\u00e9liorer consid\u00e9rablement les temps de chargements, et particuli\u00e8rement le LCP. L’impact est d’autant plus important pour les sites web dynamiques ou riches en contenu multim\u00e9dias. Il existe diff\u00e9rents niveaux de mise en cache que vous pouvez envisager :<\/p>\n\n\n\n
\n- Cache du navigateur<\/strong> : Indique aux navigateurs de stocker certains fichiers localement.<\/li>\n\n\n\n
- Mise en cache c\u00f4t\u00e9 serveur<\/strong> : Stocke les pages g\u00e9n\u00e9r\u00e9es ou les requ\u00eates de base de donn\u00e9es.<\/li>\n\n\n\n
- Objet en cache<\/strong> : cache des \u00e9l\u00e9ments individuels comme les widgets ou les menus.<\/li>\n<\/ul>\n\n\n\n
En fonction de votre h\u00e9bergeur web, vous \u00eates peut-\u00eatre en mesure de tirer parti de la mise en cache au niveau du serveur.<\/p>\n\n\n\n
Par exemple, les plans d’h\u00e9bergement web d’Ex2 vous offrent l’acc\u00e8s \u00e0 des serveurs compatibles avec la technologie de mise en cache Litespeed.<\/p>\n\n\n\n
Si vous utilisez WordPress comme CMS pour votre site web, le plugin LS Cache peut vous aider \u00e0 mettre en place des couches de mise en cache. Il offre diverses options de caches de navigateur et d\u2019objets permettant d’am\u00e9liorer la vitesse de chargement de votre site.<\/p>\n\n\n\n
5. \u00c9liminer les ressources de blocage du rendu<\/h3>\n\n\n\n
Les \u00e9l\u00e9ments de blocage de rendu font r\u00e9f\u00e9rence aux fichiers HTML, CSS et JavaScript statiques n\u00e9cessaires pour livrer une page de votre site.<\/p>\n\n\n\n
Chacun de ces fichiers contient des scripts qui peuvent emp\u00eacher vos utilisateurs d\u2019afficher du contenu. G\u00e9n\u00e9ralement, ils sont cr\u00e9\u00e9s \u00e0 partir de plugins et d\u2019outils tiers.<\/p>\n\n\n\n
Pour \u00e9viter que ces scripts ne nuisent \u00e0 votre exp\u00e9rience utilisateur, vous pouvez \u00e9liminer les ressources de blocage du rendu et r\u00e9duire ou supprimer tous les \u00e9l\u00e9ments inutilis\u00e9s.<\/p>\n\n\n\n
Il existe plusieurs techniques que vous pouvez utiliser pour faire cela.<\/p>\n\n\n\n
Vous pouvez tout d’abord r\u00e9duire votre JavaScript et CSS manuellement. Cela implique notamment d’\u00e9liminer les espaces blancs ou les commentaires inutiles.<\/p>\n\n\n\n
Cette t\u00e2che peut \u00eatre simplifi\u00e9e en utilisant un outil comme CSS Minifier pour faciliter les choses.<\/p>\n\n\n\n
Il vous suffit alors d’entrer votre CSS et s\u00e9lectionnez le bouton Minify. Vous pouvez copier et coller la version optimis\u00e9e pour remplacer votre code pr\u00e9c\u00e9dent.<\/p>\n\n\n\n
Une autre m\u00e9thode consiste \u00e0 condenser votre JavaScript et CSS en combinant les fichiers. Pour ce faire, vous pouvez notamment utiliser un outil d\u2019optimisation de fichiers, comme celui du plugin WP Rocket.<\/p>\n\n\n\n
6. Reporter le chargement de JavaScript<\/h3>\n\n\n\n
Pour am\u00e9liorer vos scores FID en particulier, vous pouvez utiliser une technique connue sous le nom de chargement diff\u00e9r\u00e9 ou retard\u00e9. Il s’agit en fait de diff\u00e9rer le chargement de JavaScript. Cette approche permet d\u2019\u00e9liminer les \u00e9l\u00e9ments bloquant le rendu.<\/p>\n\n\n\n
Le chargement diff\u00e9r\u00e9 permet de commencer charge d\u2019autres contenus sur la page d\u00e8s qu\u2019un visiteur arrive, plut\u00f4t que d\u2019attendre que tous les fichiers JavaScript finissent de charger.<\/p>\n\n\n\n
Au contraire, ce seront vos fichiers que se trouveront forc\u00e9s d\u2019attendre que le reste de votre page web soit charg\u00e9.<\/p>\n\n\n\n
Vous pouvez aussi choisir que le CSS critique charge \u00ab le contenu au-dessus du pli \u00bb plus rapidement. \u00ab Au-dessus du pli \u00bb d\u00e9signe les \u00e9l\u00e9ments de la page web qui apparaissent en premier.<\/p>\n\n\n\n
7. Utiliser un r\u00e9seau de diffusion de contenu (CDN)<\/h3>\n\n\n\n
Imaginez que votre site web ait un clone de lui-m\u00eame dans chaque grande ville du monde. C\u2019est essentiellement ce qu\u2019un r\u00e9seau de diffusion de contenu (CDN) fait.<\/p>\n\n\n\n
Il distribue des copies de vos actifs statiques (comme les images, CSS et fichiers JavaScript) sur des serveurs du monde entier, afin que vos visiteurs puissent les t\u00e9l\u00e9charger \u00e0 partir de l\u2019emplacement le plus proche.<\/p>\n\n\n\n
Le r\u00e9sultat? Des temps de chargement plus rapides, des scores LCP am\u00e9lior\u00e9s et une meilleure exp\u00e9rience utilisateur pour votre public mondial. Il peut \u00e9galement aider \u00e0 minimiser le temps au premier octet (TTFB).<\/p>\n\n\n\n
Il existe plusieurs outils tiers que vous pouvez utiliser pour votre site WordPress. L\u2019une des options les plus populaires est Cloudflare.<\/p>\n\n\n\n
8. Optimisez les formats des images de votre site web pour les performances<\/h3>\n\n\n\n
Plus une image est grande, plus le fichier qui la compose est volumineux. Par cons\u00e9quent, il est sage d’\u00e9viter d\u2019utiliser des images trop grandes un peu partout. <\/p>\n\n\n\n
Par exemple, il n\u2019y a aucune raison d\u2019utiliser de grandes images HD pour vos miniatures. Vous devriez plut\u00f4t choisir des images plus petites et \u00e0 faible r\u00e9solution.<\/p>\n\n\n\n
Pour optimiser davantage vos images, vous pouvez utiliser l\u2019attribut srcset<\/em> dans votre code HTML. Cette balise vous permet de sp\u00e9cifier les emplacements des images de diff\u00e9rentes tailles. <\/p>\n\n\n\nLes navigateurs peuvent alors automatiquement servir des images de la bonne taille, en fonction de la r\u00e9solution du p\u00e9riph\u00e9rique. Ce proc\u00e9d\u00e9 am\u00e9liore les performances, particuli\u00e8rement le score LCP.<\/p>\n\n\n\n
Vous pouvez \u00e9galement sp\u00e9cifier les attributs de largeur et de hauteur pour vos balises d\u2019image. Une autre solution est de r\u00e9server l\u2019espace n\u00e9cessaire avec le ratio d\u2019aspect CSS. Cela assure que l\u2019utilisateur voit automatiquement des images plus petites.<\/p>\n\n\n\n
Vous pouvez le faire en prenant le contenu du fichier CSS principal et l\u2019inlining dans votre code. Le contenu chargera ainsi plus rapidement, ce qui am\u00e9liorera l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n
Certains plugins de mise en cache (comme WP Rocket) offrent aussi une fonctionnalit\u00e9 d\u2019optimisation CSS qui peut \u00eatre servir \u00e0 cet effet.<\/p>\n\n\n\n
9. Utilisez le chargement paresseux (Lazy Loading)<\/h3>\n\n\n\n
Nous vous recommandons aussi de tirer profit du chargement paresseux ou lazy loading. Cette technique permet d’\u00e9viter que vos images soient charg\u00e9es en m\u00eame temps que tout le reste sur la page. Elles chargent plut\u00f4t au moment pr\u00e9cis o\u00f9 les utilisateurs acc\u00e8dent \u00e0 la section de la page web dans laquelle elles sont incluses.<\/p>\n\n\n\n
Les images \u00e0 chargement diff\u00e9r\u00e9 peuvent aider \u00e0 am\u00e9liorer votre score LCP et la vitesse de chargement. Elles sont aussi plut\u00f4t faciles \u00e0 utiliser.<\/p>\n\n\n\n
Les navigateurs modernes prennent en charge le chargement lent natif. Il suffit d’inclure l\u2019attribut loading=\u201dlazy\u201d sur les balises .<\/p>\n\n\n\n
Pour les utilisateurs de WordPress, vous avez juste besoin d\u2019un plugin (comme Smush) pour activer le lazy loading.<\/p>\n\n\n\n
10. Am\u00e9liorez votre h\u00e9bergement web<\/h3>\n\n\n\n
Il peut arriver que vous aillez tout fait correctement, mais que vos scores de Core Web Vitals restent bas. Si c’est ce cas, c’est peut-\u00eatre que les besoins de votre site d\u00e9passent les ressources auxquelles il a acc\u00e8s.<\/p>\n\n\n\n
\u00c0 ce stade, il est logique d’envisager de mettre \u00e0 niveau de votre plan d\u2019h\u00e9bergement web. Vous pourrez ainsi augmenter les ressources accessibles \u00e0 votre site.<\/p>\n\n\n\n
La mise \u00e0 niveau de votre h\u00e9bergement web est le moyen le plus rapide pour acc\u00e9l\u00e9rer votre site Web. Ce n’est toutefois pas une solution miracle, si vous n’avez pas rempli les \u00e9tapes pr\u00e9c\u00e9dentes.<\/p>\n\n\n\n
De plus, cette solution n’est pas gratuite. Chaque fois que vous passez \u00e0 un plan sup\u00e9rieur, vous augmentez les frais d’op\u00e9rations de votre site web. C’est pourquoi nous avons plac\u00e9 ce conseil \u00e0 la toute fin de notre liste.<\/p>\n\n\n\n
Pour conclure nos conseils pour am\u00e9liorer les performances de votre site web <\/h2>\n\n\n\n
Les performances de votre site web peuvent jouer un r\u00f4le majeur dans le succ\u00e8s ou l’\u00e9chec de votre site web. Il est donc important de vous assurer que votre site est conforme aux Core Web Vitals de Google. <\/p>\n\n\n\n
Ce sont des indicateurs cl\u00e9s de la vitesse de chargement, qui jouent \u00e9galement un r\u00f4le important dans le r\u00e9f\u00e9rencement SEO.<\/p>\n\n\n\n
Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 am\u00e9liorer les performances de votre site web. Si c\u2019est le cas, nous vous invitons \u00e0 consulter nos autres autres articles et tutoriels<\/a>.<\/p>\n\n\n\n
Pour commencer, rendez-vous sur le site et entrez l\u2019URL de votre site web. Cliquez ensuite simplement sur le bouton Analyser.<\/p>\n\n\n\n
Une fois l\u2019analyse de votre site termin\u00e9e, l’outil vous fournira un r\u00e9sum\u00e9 de certaines des donn\u00e9es cl\u00e9s et des donn\u00e9es de base sur les Core Web Vitals.<\/p>\n\n\n\n
\u00c0 titre d’exemple, nous avons test\u00e9 le site web Google.com, pour voir si l’entreprise r\u00e9ussi son propre test. Voici les r\u00e9sultats:<\/p>\n\n\n\n Comme vous pouvez le voir dans la capture d’\u00e9cran ci-dessus, Google ne donne pas toujours le meilleur exemple, et peine parfois \u00e0 respecter ses propres r\u00e8gles.<\/p>\n\n\n\n Le site de Google.com a donc \u00e9chou\u00e9 le test, en atteignant seulement deux objectifs sur trois:<\/p>\n\n\n\n PageSpeed Insights teste les scores des appareils mobiles et des ordinateurs en m\u00eame temps. Vous pouvez basculer d’une s\u00e9rie de r\u00e9sultats \u00e0 l’autre \u00e0 l’aide des onglets destin\u00e9s \u00e0 cet effet.<\/p>\n\n\n Si vous faites d\u00e9filer la page de r\u00e9sultats, vous trouverez \u00e9galement des diagnostics et des suggestions d\u2019am\u00e9liorations. <\/p>\n\n\n\n PageSpeed Insights vous proposera une s\u00e9rie de recommandations que vous pouvez utiliser pour augmenter votre score et am\u00e9liorer les performances de votre site. Cette liste sera plus ou moins longue, en fonction de vos r\u00e9sultats.<\/p>\n\n\n\n Vous pouvez \u00e9galement acc\u00e9der \u00e0 vos Core Web Vitals via votre rapport d\u2019exp\u00e9rience utilisateur Chrome. Cela peut \u00eatre particuli\u00e8rement utile pour les d\u00e9veloppeurs et les webmasters.<\/p>\n\n\n\n Ce rapport est disponible via un autre outil appel\u00e9 la Google Search Console. Il vous fournit des donn\u00e9es r\u00e9elles et des informations sur vos visiteurs et leur activit\u00e9. <\/p>\n\n\n\n Ce rapport vous aide ainsi \u00e0 comprendre comment vos utilisateurs utilisent le web et interagissent avec votre site.<\/p>\n\n\n\n Pour y acc\u00e9der, vous devez vous connecter au tableau de bord de l’outil Google Search Console. Vous devez ensuite acc\u00e9der \u00e0 la section Core Web Vitals, qui se trouve dans la section \u00ab Experience \u00bb.<\/p>\n\n\n\n Un autre outil pratique peut vous aider \u00e0 \u00e9valuer les score de Core Web Vitals des sites web que vous visitez.<\/p>\n\n\n\n Si vous utilisez le navigateur Google Chrome, vous pouvez utiliser l\u2019extension Web Vitals pour \u00e9valuer vos param\u00e8tres vitaux de base sur n\u2019importe quel site Web.<\/p>\n\n\n\n Il suffit d\u2019ajouter l\u2019extension \u00e0 Chrome pour y avoir acc\u00e8s. Il faut toutefois \u00e9viter de confondre avec l’application Core Web Vitals. <\/p>\n\n\n\n Bien que celle-ci soit mieux \u00e9valu\u00e9e par les utilisateurs, Google \u00e9met un avertissement \u00e0 son sujet. L’application risque d’ailleurs de bient\u00f4t devenir inaccessible, alors il vaut mieux choisir l’outil recommand\u00e9. <\/p>\n\n\n\n Gr\u00e2ce \u00e0 cet outil, chaque fois que vous vous connectez \u00e0 un site web, vous pourrez cliquez sur l\u2019ic\u00f4ne de l\u2019extension dans la barre du navigateur pour y acc\u00e9der. Vous verrez alors le score des Core Web Vitals pour la page web affich\u00e9e.<\/p>\n\n\n\n Les scores LCP, CLS et INP seront ainsi accessibles en un coup d\u2019\u0153il. Vous n’aurez plus \u00e0 consulter la page de PageSpeed Insight pour les conna\u00eetre.<\/p>\n\n\n\n Jusqu’\u00e0 maintenant, nous avons abord\u00e9 les bases des performances d’un site web. Il est d\u00e9sormais temps de vous donner quelques conseils pour am\u00e9liorer vos scores de Core Web Vitals. <\/p>\n\n\n\n L’objectif n’est pas seulement d\u2019impressionner Google. Cette optimisation permet de cr\u00e9er un site web rapide et fluide que les internautes aimeront utiliser.<\/p>\n\n\n\n Les humains sont d’abord et avant tout attir\u00e9s par le contenu visuel. Il est donc naturel d’utiliser des \u00e9l\u00e9ments multim\u00e9dias pour tenter de se d\u00e9marquer de ses comp\u00e9titeurs.<\/p>\n\n\n\n Des vid\u00e9os ou des belles images \u00e0 haute r\u00e9solution peuvent toutefois nuire aux performances d’un site si elles ne sont pas correctement compress\u00e9es.<\/p>\n\n\n\n Il est g\u00e9n\u00e9ralement pr\u00e9f\u00e9rable d’optimiser les fichiers avant de les t\u00e9l\u00e9verser sur votre site web plut\u00f4t que d\u2019utiliser des solutions c\u00f4t\u00e9 serveur.<\/p>\n\n\n\n Google a d’ailleurs cr\u00e9er un type d’images sp\u00e9cifiquement optimis\u00e9 pour internet, soit le format WebP. Il permet de conserver la r\u00e9solution des images \u00e0 un niveau presque identique, tout en r\u00e9duisant consid\u00e9rablement la taille des fichiers.<\/p>\n\n\n\n WebP est ainsi devenu le format de r\u00e9f\u00e9rence pour les photographies et les images complexes. Il offre une nettement meilleure compression que des formats comme JPG ou PNG. Il permet donc des fichiers moins volumineux, sans sacrifier la qualit\u00e9 des images.<\/p>\n\n\n\n Les fichiers d’images WebP sont environ 30 % moins volumineux que leurs \u00e9quivalents en version JPG. Ils permettent donc de r\u00e9duire les besoins de bande passante et le temps n\u00e9cessaire au chargement.<\/p>\n\n\n\n Plusieurs outils peuvent vous permettre d’optimiser facilement vos images. Notamment, l’application Squoosh<\/a> vous offre de convertir des images en WebP ou de simplement les compresser pour \u00e9conomiser de l\u2019espace.<\/p>\n\n\n\n Mis \u00e0 part le format WebP, nous recommandons aussi d\u2019utiliser SVG pour les ic\u00f4nes, logos et illustrations.<\/p>\n\n\n\n Le format SVG est l’acronyme de Scalable Vector Graphics. Il ne s’agit pas d’images enregistr\u00e9es sous forme de pixels, comme les formats d\u2019image classiques tel que JPEG, PNG, WebP, etc.<\/p>\n\n\n\n Les SVGs sont un langage de balisage bas\u00e9 sur le XML qui d\u00e9crit l\u2019image sur un plan g\u00e9om\u00e9trique 2D. En d’autres termes, les images prennent la forme de formules math\u00e9matiques. <\/p>\n\n\n\n Celles-ci sont converties par le navigateur des utilisateurs. Les images sont alors \u00ab\u00a0reconstruites\u00a0\u00bb en selon les instructions du balisage SVG complet.<\/p>\n\n\n\n Cette technique de programmation rend les SVG extr\u00eamement l\u00e9gers, puisque les fichiers sont essentiellement des petits blocs de texte.<\/p>\n\n\n\n Le fait que les images SVG soient cr\u00e9\u00e9es \u00e0 partir de calculs pr\u00e9sente aussi d’autres avantages. Elles peuvent \u00eatre mises \u00e0 l\u2019\u00e9chelle sans la moindre perte de qualit\u00e9 et elles ont un aspect net sur n\u2019importe quel type d’\u00e9cran.<\/p>\n\n\n\n Vous pouvez donc zoomer autant que vous voulez, l’image elle ne pixellisera pas. <\/p>\n\n\n\n Les polices de caract\u00e8res que vous choisissez peuvent aider ou nuire \u00e0 votre site web. Quand il est question d\u2019optimiser les performances de votre site web, un moins grand nombre de polices est g\u00e9n\u00e9ralement recommand\u00e9.<\/p>\n\n\n\n Il existe quelques strat\u00e9gies avanc\u00e9es d\u2019optimisation des polices de caract\u00e8res. Cette liste de conseils devrait toutefois vous aider \u00e0 \u00e9viter que les polices ne nuisent trop aux performances de votre site web.<\/p>\n\n\n\n Google Tag Manager est un outil pratique qui accomplit parfaitement ses objectifs. Il peut vous aider \u00e0 choisir des mots-cl\u00e9s \u00e0 viser pour am\u00e9liorer votre r\u00e9f\u00e9rencement SEO.<\/p>\n\n\n\n C\u2019est un outil complet permettant de g\u00e9rer plusieurs balises de mots-cl\u00e9s sans utiliser de code. Il pr\u00e9sente toutefois \u00e0 la fois des avantages et des inconv\u00e9nients en ce qui concerne les Core Web Vitals.<\/p>\n\n\n\n Google Tag Manager est excellent pour la gestion de vos mots-cl\u00e9s. Il peut cependant ralentir votre site s\u2019il n\u2019est pas utilis\u00e9 judicieusement. <\/p>\n\n\n\n Chaque balise ajoute quelques millisecondes au temps de chargement. Si vous en utilisez un trop grand nombre, elle s’additionnent pour retarder cumulativement le chargement de mani\u00e8re significative.<\/p>\n\n\n\n Chacune des balises se d\u00e9clenche \u00e0 chaque chargement de page. Il vaut donc mieux utiliser Google Tag Manager uniquement pour les balises essentielles et \u00e0 l\u2019\u00e9chelle du site uniquement. Il est pr\u00e9f\u00e9rable de tester manuellement les balises moins critiques ou sp\u00e9cifiques aux pages.<\/p>\n\n\n\n La mise en cache est un peu comme un \u00ab\u00a0souvenir\u00a0\u00bb r\u00e9cent de votre site web. <\/p>\n\n\n\n Sans cache, le contenu de chaque page web est enti\u00e8rement depuis le serveur pour chaque visiteur. Au contraire, la mise en cache stocke une copie de la page et la pr\u00e9sente aux visiteurs sans devoir la charger.<\/p>\n\n\n\n L’utilisation de la mise en cache peut ainsi am\u00e9liorer consid\u00e9rablement les temps de chargements, et particuli\u00e8rement le LCP. L’impact est d’autant plus important pour les sites web dynamiques ou riches en contenu multim\u00e9dias. Il existe diff\u00e9rents niveaux de mise en cache que vous pouvez envisager :<\/p>\n\n\n\n En fonction de votre h\u00e9bergeur web, vous \u00eates peut-\u00eatre en mesure de tirer parti de la mise en cache au niveau du serveur.<\/p>\n\n\n\n Par exemple, les plans d’h\u00e9bergement web d’Ex2 vous offrent l’acc\u00e8s \u00e0 des serveurs compatibles avec la technologie de mise en cache Litespeed.<\/p>\n\n\n\n Si vous utilisez WordPress comme CMS pour votre site web, le plugin LS Cache peut vous aider \u00e0 mettre en place des couches de mise en cache. Il offre diverses options de caches de navigateur et d\u2019objets permettant d’am\u00e9liorer la vitesse de chargement de votre site.<\/p>\n\n\n\n Les \u00e9l\u00e9ments de blocage de rendu font r\u00e9f\u00e9rence aux fichiers HTML, CSS et JavaScript statiques n\u00e9cessaires pour livrer une page de votre site.<\/p>\n\n\n\n Chacun de ces fichiers contient des scripts qui peuvent emp\u00eacher vos utilisateurs d\u2019afficher du contenu. G\u00e9n\u00e9ralement, ils sont cr\u00e9\u00e9s \u00e0 partir de plugins et d\u2019outils tiers.<\/p>\n\n\n\n Pour \u00e9viter que ces scripts ne nuisent \u00e0 votre exp\u00e9rience utilisateur, vous pouvez \u00e9liminer les ressources de blocage du rendu et r\u00e9duire ou supprimer tous les \u00e9l\u00e9ments inutilis\u00e9s.<\/p>\n\n\n\n Il existe plusieurs techniques que vous pouvez utiliser pour faire cela.<\/p>\n\n\n\n Vous pouvez tout d’abord r\u00e9duire votre JavaScript et CSS manuellement. Cela implique notamment d’\u00e9liminer les espaces blancs ou les commentaires inutiles.<\/p>\n\n\n\n Cette t\u00e2che peut \u00eatre simplifi\u00e9e en utilisant un outil comme CSS Minifier pour faciliter les choses.<\/p>\n\n\n\n Il vous suffit alors d’entrer votre CSS et s\u00e9lectionnez le bouton Minify. Vous pouvez copier et coller la version optimis\u00e9e pour remplacer votre code pr\u00e9c\u00e9dent.<\/p>\n\n\n\n Une autre m\u00e9thode consiste \u00e0 condenser votre JavaScript et CSS en combinant les fichiers. Pour ce faire, vous pouvez notamment utiliser un outil d\u2019optimisation de fichiers, comme celui du plugin WP Rocket.<\/p>\n\n\n\n Pour am\u00e9liorer vos scores FID en particulier, vous pouvez utiliser une technique connue sous le nom de chargement diff\u00e9r\u00e9 ou retard\u00e9. Il s’agit en fait de diff\u00e9rer le chargement de JavaScript. Cette approche permet d\u2019\u00e9liminer les \u00e9l\u00e9ments bloquant le rendu.<\/p>\n\n\n\n Le chargement diff\u00e9r\u00e9 permet de commencer charge d\u2019autres contenus sur la page d\u00e8s qu\u2019un visiteur arrive, plut\u00f4t que d\u2019attendre que tous les fichiers JavaScript finissent de charger.<\/p>\n\n\n\n Au contraire, ce seront vos fichiers que se trouveront forc\u00e9s d\u2019attendre que le reste de votre page web soit charg\u00e9.<\/p>\n\n\n\n Vous pouvez aussi choisir que le CSS critique charge \u00ab le contenu au-dessus du pli \u00bb plus rapidement. \u00ab Au-dessus du pli \u00bb d\u00e9signe les \u00e9l\u00e9ments de la page web qui apparaissent en premier.<\/p>\n\n\n\n Imaginez que votre site web ait un clone de lui-m\u00eame dans chaque grande ville du monde. C\u2019est essentiellement ce qu\u2019un r\u00e9seau de diffusion de contenu (CDN) fait.<\/p>\n\n\n\n Il distribue des copies de vos actifs statiques (comme les images, CSS et fichiers JavaScript) sur des serveurs du monde entier, afin que vos visiteurs puissent les t\u00e9l\u00e9charger \u00e0 partir de l\u2019emplacement le plus proche.<\/p>\n\n\n\n Le r\u00e9sultat? Des temps de chargement plus rapides, des scores LCP am\u00e9lior\u00e9s et une meilleure exp\u00e9rience utilisateur pour votre public mondial. Il peut \u00e9galement aider \u00e0 minimiser le temps au premier octet (TTFB).<\/p>\n\n\n\n Il existe plusieurs outils tiers que vous pouvez utiliser pour votre site WordPress. L\u2019une des options les plus populaires est Cloudflare.<\/p>\n\n\n\n Plus une image est grande, plus le fichier qui la compose est volumineux. Par cons\u00e9quent, il est sage d’\u00e9viter d\u2019utiliser des images trop grandes un peu partout. <\/p>\n\n\n\n Par exemple, il n\u2019y a aucune raison d\u2019utiliser de grandes images HD pour vos miniatures. Vous devriez plut\u00f4t choisir des images plus petites et \u00e0 faible r\u00e9solution.<\/p>\n\n\n\n Pour optimiser davantage vos images, vous pouvez utiliser l\u2019attribut srcset<\/em> dans votre code HTML. Cette balise vous permet de sp\u00e9cifier les emplacements des images de diff\u00e9rentes tailles. <\/p>\n\n\n\n Les navigateurs peuvent alors automatiquement servir des images de la bonne taille, en fonction de la r\u00e9solution du p\u00e9riph\u00e9rique. Ce proc\u00e9d\u00e9 am\u00e9liore les performances, particuli\u00e8rement le score LCP.<\/p>\n\n\n\n Vous pouvez \u00e9galement sp\u00e9cifier les attributs de largeur et de hauteur pour vos balises d\u2019image. Une autre solution est de r\u00e9server l\u2019espace n\u00e9cessaire avec le ratio d\u2019aspect CSS. Cela assure que l\u2019utilisateur voit automatiquement des images plus petites.<\/p>\n\n\n\n Vous pouvez le faire en prenant le contenu du fichier CSS principal et l\u2019inlining dans votre code. Le contenu chargera ainsi plus rapidement, ce qui am\u00e9liorera l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n Certains plugins de mise en cache (comme WP Rocket) offrent aussi une fonctionnalit\u00e9 d\u2019optimisation CSS qui peut \u00eatre servir \u00e0 cet effet.<\/p>\n\n\n\n Nous vous recommandons aussi de tirer profit du chargement paresseux ou lazy loading. Cette technique permet d’\u00e9viter que vos images soient charg\u00e9es en m\u00eame temps que tout le reste sur la page. Elles chargent plut\u00f4t au moment pr\u00e9cis o\u00f9 les utilisateurs acc\u00e8dent \u00e0 la section de la page web dans laquelle elles sont incluses.<\/p>\n\n\n\n Les images \u00e0 chargement diff\u00e9r\u00e9 peuvent aider \u00e0 am\u00e9liorer votre score LCP et la vitesse de chargement. Elles sont aussi plut\u00f4t faciles \u00e0 utiliser.<\/p>\n\n\n\n Les navigateurs modernes prennent en charge le chargement lent natif. Il suffit d’inclure l\u2019attribut loading=\u201dlazy\u201d sur les balises .<\/p>\n\n\n\n Pour les utilisateurs de WordPress, vous avez juste besoin d\u2019un plugin (comme Smush) pour activer le lazy loading.<\/p>\n\n\n\n Il peut arriver que vous aillez tout fait correctement, mais que vos scores de Core Web Vitals restent bas. Si c’est ce cas, c’est peut-\u00eatre que les besoins de votre site d\u00e9passent les ressources auxquelles il a acc\u00e8s.<\/p>\n\n\n\n \u00c0 ce stade, il est logique d’envisager de mettre \u00e0 niveau de votre plan d\u2019h\u00e9bergement web. Vous pourrez ainsi augmenter les ressources accessibles \u00e0 votre site.<\/p>\n\n\n\n La mise \u00e0 niveau de votre h\u00e9bergement web est le moyen le plus rapide pour acc\u00e9l\u00e9rer votre site Web. Ce n’est toutefois pas une solution miracle, si vous n’avez pas rempli les \u00e9tapes pr\u00e9c\u00e9dentes.<\/p>\n\n\n\n De plus, cette solution n’est pas gratuite. Chaque fois que vous passez \u00e0 un plan sup\u00e9rieur, vous augmentez les frais d’op\u00e9rations de votre site web. C’est pourquoi nous avons plac\u00e9 ce conseil \u00e0 la toute fin de notre liste.<\/p>\n\n\n\n Les performances de votre site web peuvent jouer un r\u00f4le majeur dans le succ\u00e8s ou l’\u00e9chec de votre site web. Il est donc important de vous assurer que votre site est conforme aux Core Web Vitals de Google. <\/p>\n\n\n\n Ce sont des indicateurs cl\u00e9s de la vitesse de chargement, qui jouent \u00e9galement un r\u00f4le important dans le r\u00e9f\u00e9rencement SEO.<\/p>\n\n\n\n Nous esp\u00e9rons que cet article vous a aid\u00e9 \u00e0 am\u00e9liorer les performances de votre site web. Si c\u2019est le cas, nous vous invitons \u00e0 consulter nos autres autres articles et tutoriels<\/a>.<\/p>\n\n\n\n<\/figure>\n<\/figure>\n\n\n\n\n
<\/figure>\n<\/div>\n\n\n<\/figure>\n\n\n\nRapport sur l\u2019exp\u00e9rience utilisateur de Chrome<\/h3>\n\n\n\n
L’extension Chrome Core Web Vitals<\/h3>\n\n\n\n
<\/figure>\n\n\n\n<\/figure>\n\n\n\nComment am\u00e9liorer les performances de votre site web?<\/h2>\n\n\n\n
1. Utilisez les formats d\u2019image modernes<\/h3>\n\n\n\n
Voici quelques plugins d\u2019optimisation d\u2019image qui m\u00e9rite aussi d’\u00eatre pris en compte :<\/h4>\n\n\n\n
\n
2. Optimisez les polices de votre site web pour les performances<\/h3>\n\n\n\n
Voici quelques conseils pour optimiser les polices de votre site web :<\/h4>\n\n\n\n
\n
3. Pensez-y bien avant d\u2019utiliser Google Tag Manager<\/h3>\n\n\n\n
4. Utilisez la mise en cache pour am\u00e9liorer les performances de votre site web<\/h3>\n\n\n\n
\n
5. \u00c9liminer les ressources de blocage du rendu<\/h3>\n\n\n\n
6. Reporter le chargement de JavaScript<\/h3>\n\n\n\n
7. Utiliser un r\u00e9seau de diffusion de contenu (CDN)<\/h3>\n\n\n\n
8. Optimisez les formats des images de votre site web pour les performances<\/h3>\n\n\n\n
9. Utilisez le chargement paresseux (Lazy Loading)<\/h3>\n\n\n\n
10. Am\u00e9liorez votre h\u00e9bergement web<\/h3>\n\n\n\n
Pour conclure nos conseils pour am\u00e9liorer les performances de votre site web <\/h2>\n\n\n\n