{"id":905,"date":"2024-10-23T13:51:04","date_gmt":"2024-10-23T13:51:04","guid":{"rendered":"https:\/\/newblog.siteground.com\/fr\/?p=905"},"modified":"2025-10-03T08:08:11","modified_gmt":"2025-10-03T08:08:11","slug":"core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide","status":"publish","type":"post","link":"https:\/\/fr.siteground.com\/blog\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/","title":{"rendered":"Core Web Vitals : ce qu&#8217;ils sont et comment les am\u00e9liorer (guide)"},"content":{"rendered":"\n<p>Un temps de chargement lent, des \u00e9l\u00e9ments qui ne r\u00e9pondent pas ou des changements de page inattendus peuvent frustrer les utilisateurs. C&#8217;est pourquoi les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web et augmenter vos chances d&#8217;\u00eatre mieux class\u00e9 dans les moteurs de recherche.<\/p>\n\n\n\n<p>En am\u00e9liorant les performances de votre site web par rapport \u00e0 ces indicateurs, vous pouvez offrir une exp\u00e9rience plus fluide \u00e0 votre public. Cela se traduit par un meilleur classement dans les moteurs de recherche, un engagement accru et plus de conversions.<\/p>\n\n\n\n<p><strong>Les Core Web Vitals, c&#8217;est quoi ?<\/strong><\/p>\n\n\n\n<p>Core Web Vitals est un<strong> ensemble d&#8217;indicateurs cl\u00e9s de Google qui mesurent l&#8217;exp\u00e9rience utilisateur r\u00e9elle en termes de performances de chargement, d&#8217;interactivit\u00e9 et de stabilit\u00e9 visuelle d&#8217;une page web<\/strong>. Il est recommand\u00e9 d&#8217;obtenir de bons Core Web Vitals pour r\u00e9ussir dans la recherche de Google, car cela permet de garantir une exp\u00e9rience utilisateur rapide, r\u00e9active et visuellement stable.<\/p>\n\n\n\n<p>Les trois indicateurs de Core Web Vitals sont les suivants :&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Largest Contentful Paint (LCP)<\/strong> \u2013 mesure les performances de chargement.<\/li><li><strong>Interaction to Next Paint (INP)<\/strong> \u2013 suit les interactions de l\u2019utilisateur et mesure le d\u00e9lai d\u2019entr\u00e9e.<\/li><li><strong>Cumulative Layout Shift (CLS)<\/strong> \u2013 mesure la stabilit\u00e9 visuelle en suivant les changements de mise en page sur la page.<\/li><\/ul>\n\n\n\n<p><strong>Google utilise ces signaux de qualit\u00e9 dans le cadre de son algorithme de classement, et leur am\u00e9lioration peut vous aider \u00e0 votre classement dans les moteurs de recherche.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Largest Contentful Paint (LCP)<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/1_Largest_Contentful_Paint.jpg\" alt=\"\" class=\"wp-image-907\" width=\"674\" height=\"223\"\/><\/figure>\n\n\n\n<p>Le <strong>Largest Contentful Paint (LCP)<\/strong> mesure <strong>le temps n\u00e9cessaire au plus grand \u00e9l\u00e9ment de contenu visible sur une page pour s\u2019afficher enti\u00e8rement<\/strong>. Il peut s&#8217;agir d&#8217;une image, d&#8217;une vid\u00e9o ou d&#8217;un bloc de texte qui occupe le plus d&#8217;espace \u00e0 l&#8217;\u00e9cran. Cet indicateur est important car il donne une vue pr\u00e9cise de la vitesse de chargement d\u2019une page web du point de vue de l\u2019utilisateur.&nbsp;<\/p>\n\n\n\n<p>Voici comment Google d\u00e9finit les scores LCP :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"490\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/2_LCP_Score.jpg\" alt=\"\" class=\"wp-image-908\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Excellent<\/strong> : 2,5 secondes ou moins<\/li><li><strong>Am\u00e9lioration n\u00e9cessaire<\/strong> : entre 2,5 et 4 secondes.<\/li><li><strong>M\u00e9diocre<\/strong> : plus de 4,0 secondes<\/li><\/ul>\n\n\n\n<p>Pour que votre site web r\u00e9ussisse les Core Web Vitals, <strong>vous avez besoin d\u2019un score LCP de 2,5 secondes ou moins pour 75% de l&#8217;ensemble de vos pages consult\u00e9es.<\/strong>&nbsp;<\/p>\n\n\n\n<p>Un <strong>score LCP \u00e9lev\u00e9 signifie que vos utilisateurs attendent trop longtemps<\/strong> pour charger la partie la plus importante du contenu de votre page. Pour les propri\u00e9taires de sites web, cela se traduit par des temps d&#8217;affichage trop longs, ce qui entra\u00eene des taux de rebond \u00e9lev\u00e9s et des taux de conversion faibles.<\/p>\n\n\n\n<p>Les trois facteurs les plus courants qui affectent n\u00e9gativement le LCP sont :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Images et vid\u00e9os volumineux et non optimis\u00e9s<\/li><li>JavaScript bloquant le rendu<\/li><li>Temps de chargement des ressources lent<\/li><\/ul>\n\n\n\n<p>Cliquez ici pour savoir comment mesurer et am\u00e9liorer votre score LCP.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Interaction to Next Paint (INP)<\/strong><\/h3>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><meta charset=\"utf-8\">Google a annonc\u00e9 que l&#8217;INP (Interaction to Next Paint) rempla\u00e7ait officiellement le FID (First Input Delay) en tant que nouvelle mesure Core Web Vitals pour la r\u00e9activit\u00e9 Son remplacement entrera en vigueur en mars 2024.<\/p><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"730\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/3_First_Input_Delay.jpg\" alt=\"\" class=\"wp-image-909\"\/><\/figure>\n\n\n\n<p><strong>Interaction to Next Paint (INP)<\/strong> est un indicateur de performance web pour un utilisateur r\u00e9el qui <strong>mesure la r\u00e9activit\u00e9 d\u2019une page web.<\/strong> Il \u00e9value le temps n\u00e9cessaire au navigateur pour r\u00e9pondre aux interactions de l&#8217;utilisateur, telles que les clics, apr\u00e8s le chargement de la page.<\/p>\n\n\n\n<p>L\u2019INP est con\u00e7u pour refl\u00e9ter l&#8217;exp\u00e9rience de l&#8217;utilisateur quant \u00e0 la rapidit\u00e9 et \u00e0 la fluidit\u00e9 avec lesquelles un site web r\u00e9agit \u00e0 ses commandes. C&#8217;est un indicateur cl\u00e9 de l&#8217;interactivit\u00e9 et de la r\u00e9activit\u00e9 de la page.&nbsp;<\/p>\n\n\n\n<p>Contrairement au FID, qui ne mesure que la latence d&#8217;entr\u00e9e, l\u2019INP prend en compte la r\u00e9activit\u00e9 de la page enti\u00e8re tout au long de la session de l\u2019utilisateur.&nbsp;<\/p>\n\n\n\n<p>Voici comment Google d\u00e9finit les scores INP :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"490\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/4_FID_Score.jpg\" alt=\"\" class=\"wp-image-910\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Excellent<\/strong> : inf\u00e9rieur ou \u00e9gal \u00e0 200 millisecondes<\/li><li><strong>Am\u00e9lioration n\u00e9cessaire<\/strong> : entre 200 et 500 millisecondes<\/li><li><strong>M\u00e9diocre<\/strong> : plus de 500 millisecondes<\/li><\/ul>\n\n\n\n<p>Les fichiers JavaScript et CSS non optimis\u00e9s sont souvent \u00e0 l&#8217;origine d&#8217;un mauvais score INP. Nous vous montrerons comment mesurer et am\u00e9liorer l&#8217;INP plus tard.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Cumulative Layout Shift (CLS)<\/strong><\/h3>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"730\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/5_Cumulative_Layout_Shift.jpg\" alt=\"\" class=\"wp-image-911\"\/><\/figure>\n\n\n\n<p>Le <a href=\"https:\/\/fr.siteground.com\/kb\/cumulative-layout-shift\/\"><strong>Cumulative Layout Shift (CLS)<\/strong><\/a> <strong>mesure la stabilit\u00e9 visuelle d\u2019une page en d\u00e9tectant les changements de mise en page inattendus.<\/strong> Ces changements se produisent souvent lors du chargement de nouveaux contenus, tels que des images sans dimensions pr\u00e9cises ou des publicit\u00e9s ins\u00e9r\u00e9es de mani\u00e8re dynamique. Un <strong>score CLS \u00e9lev\u00e9 indique qu\u2019une page est instable<\/strong>, ce qui rend l\u2019exp\u00e9rience irritante pour les utilisateurs.&nbsp;<\/p>\n\n\n\n<p>Voici comment Google d\u00e9finit les scores CLS :<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"490\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/6_CLS_Score.jpg\" alt=\"\" class=\"wp-image-912\"\/><\/figure>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Excellent<\/strong> : inf\u00e9rieur ou \u00e9gal \u00e0 0,1 seconde<\/li><li><strong>Am\u00e9lioration n\u00e9cessaire<\/strong> : inf\u00e9rieur ou \u00e9gal \u00e0 0,25 seconde<\/li><li><strong>M\u00e9diocre<\/strong> : plus de 0,25 seconde<\/li><\/ul>\n\n\n\n<p>Un score inf\u00e9rieur ou \u00e9gal \u00e0 0,1 seconde signifie que le contenu de la page est totalement statique pendant son cycle de vie. Un score plus \u00e9lev\u00e9 signifie que le contenu est dynamique.<\/p>\n\n\n\n<p>En g\u00e9n\u00e9ral, les changements de mise en page sont \u00e0 l&#8217;origine de :<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>images,<\/li><li>publicit\u00e9s,<\/li><li>embeds (ou vecteurs num\u00e9riques),<\/li><li>iframes sans dimensions,<\/li><li>contenu dynamique,<\/li><li>polices de caract\u00e8res web, provoquant un flash de texte non stylis\u00e9 ou un flash de texte invisible<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comment_mesurer_les_Core_Web_Vitals\"><\/span><strong>Comment mesurer les <\/strong><strong>Core Web Vitals<\/strong><strong> ?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Il existe plusieurs outils disponibles pour mesurer l\u2019\u00e9tat de Core Web Vitals, \u00e0 la fois \u00e0 l&#8217;aide de donn\u00e9es r\u00e9elles provenant des utilisateurs et de mesures de laboratoire (tests simul\u00e9s). Ces outils aident les propri\u00e9taires de sites web \u00e0 suivre les performances de leur Core Web Vitals et \u00e0 identifier les domaines \u00e0 am\u00e9liorer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Field tools&nbsp;<\/strong><\/h3>\n\n\n\n<p><strong>Les field tools \u00e9galement connues sous le nom de la surveillance des utilisateurs r\u00e9els (RUM, en abr\u00e9g\u00e9), refl\u00e8tent l\u2019exp\u00e9rience de navigation des utilisateurs r\u00e9els<\/strong>. Il prend en compte les utilisateurs r\u00e9els, les diff\u00e9rents appareils, les diff\u00e9rentes connexions r\u00e9seau et les donn\u00e9es historiques. Le r\u00e9sultat est agr\u00e9g\u00e9 pour le domaine entier ou par URL.&nbsp;<\/p>\n\n\n\n<p>Gardez \u00e0 l\u2019esprit que <strong>Google utilise ces donn\u00e9es pour classer votre site web.<\/strong> Par cons\u00e9quent, si vous souhaitez v\u00e9rifier l&#8217;exp\u00e9rience r\u00e9elle de vos utilisateurs, vous devez utiliser des field tools..<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/search.google.com\/search-console\/welcome\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Google Search Console<\/strong><\/a><strong> (GSC)<\/strong><\/h4>\n\n\n\n<p><strong>Google Search Console<\/strong> fournit un rapport \u00ab Core Web Vitals \u00bb qui montre les performances de votre site web sur les ordinateurs de bureau et les appareils mobiles. Il met en \u00e9vidence les pages concern\u00e9es et les regroupe en fonction de leurs performances (<strong>excellentes<\/strong>, <strong>am\u00e9liorations n\u00e9cessaires <\/strong>ou <strong>m\u00e9diocres)<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"719\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/7_Google_Search_Console.jpg\" alt=\"\" class=\"wp-image-913\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\"><strong>PageSpeed Insights<\/strong><\/a><\/h4>\n\n\n\n<p><a href=\"https:\/\/fr.siteground.com\/kb\/guide-google-pagespeed-insights\/\">PageSpeed Insights<\/a> analyse les pages web individuelles et fournit des informations d\u00e9taill\u00e9es sur leurs performances dans Core Web Vitals. Il fournit des conseils pour am\u00e9liorer la vitesse des pages et les performances du site web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1407\" height=\"863\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/8_pagespeed-insight-core-web-vitals.jpg\" alt=\"\" class=\"wp-image-914\"\/><\/figure>\n\n\n\n<p>Il est conseill\u00e9 de v\u00e9rifier les scores pour les ordinateurs de bureau et les appareils mobiles, car ils peuvent \u00eatre diff\u00e9rents. En haut du rapport, PageSpeed Insights indique clairement si votre page atteint les seuils n\u00e9cessaires \u00e0 une bonne exp\u00e9rience, sur la base des Core Web Vitals du site web.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Rapport Chrome UX<\/strong><\/a><strong> (CrUX)<\/strong><\/h4>\n\n\n\n<p>Le <strong>rapport sur l&#8217;exp\u00e9rience utilisateur de Chrome (CrUX, en abr\u00e9g\u00e9) fournit des donn\u00e9es de performances r\u00e9elles d&#8217;utilisateurs de Chrome<\/strong>.Il montre comment les utilisateurs utilisent votre site sur les appareils mobiles et de bureau. Le rapport UX de Chrome se concentre sur les performances de chargement des sites web. Il mesure Core Web Vitals, des param\u00e8tres tels que le temps de chargement du premier octet (TTFB), et bien plus encore.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/web-vitals\/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Extension Web Vitals pour Chrome<\/strong><\/a><\/h4>\n\n\n\n<p>L&#8217;extension Web Vitals vous permet de suivre les indicateurs Core Web Vitals directement dans votre navigateur Chrome lorsque vous naviguez sur votre site web. Il s&#8217;agit d&#8217;un outil gratuit qui fournit un retour d&#8217;information instantan\u00e9 sur les indicateurs Core Web Vitals.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"626\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/9_Web_Vitals_Chrome_Extention.jpg\" alt=\"\" class=\"wp-image-915\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/web.dev\/measure\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Web.dev<\/strong><\/a><\/h4>\n\n\n\n<p>Web.dev fournit un outil de mesure gratuit pour effectuer un audit de performance de votre site web. De plus, vous pouvez v\u00e9rifier les performances de votre site dans diff\u00e9rents domaines et <strong>obtenir des conseils pour am\u00e9liorer des param\u00e8tres tels que les performances du site, l&#8217;\u00e9tat des progressive web apps (ou PWA), l&#8217;accessibilit\u00e9, l&#8217;utilisation des meilleures pratiques et le classement SEO<\/strong>. Il prend \u00e9galement en charge les indicateurs Core Web Vitals.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"662\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/10_Web_dev.jpg\" alt=\"\" class=\"wp-image-916\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Lab Tools<\/strong><\/h3>\n\n\n\n<p>Il s\u2019agit de r\u00e9aliser des tests dans un environnement contr\u00f4l\u00e9 et de voir comment un utilisateur potentiel verra votre site web. Contrairement aux Field Tools, les Lab Tools<strong> fonctionnent avec des donn\u00e9es simul\u00e9es<\/strong>, avec des sp\u00e9cifications pr\u00e9d\u00e9finies pour les appareils et le r\u00e9seau. Ils sont utiles pour reproduire et d\u00e9boguer d&#8217;\u00e9ventuels probl\u00e8mes de performance du site web, mais ne vous donnent pas d&#8217;informations sur l&#8217;exp\u00e9rience r\u00e9elle de l&#8217;utilisateur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/chrome.google.com\/webstore\/detail\/lighthouse\/blipmdconlkpinefehnmjammfjpmpbjk?hl=en\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Lighthouse<\/strong><\/a><\/h4>\n\n\n\n<p>Lighthouse est un outil open source d&#8217;audit des sites web, qui permet aux d\u00e9veloppeurs de diagnostiquer les probl\u00e8mes et d&#8217;am\u00e9liorer la qualit\u00e9 des pages web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"692\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/11_Lighthouse.jpg\" alt=\"\" class=\"wp-image-917\"\/><\/figure>\n\n\n\n<p><strong>Un outil comme Lighthouse ne peut pas mesurer Interaction to Next Paint (INP), car il n\u00e9cessite une interaction r\u00e9elle avec l&#8217;utilisateur.<\/strong> Cependant, vous pouvez surveiller <strong>le temps de blocage total<\/strong> (TBT), qui mesure le temps total entre le First Contentful Paint et le Time to Interactive. En am\u00e9liorant votre TBT, vous am\u00e9liorerez probablement aussi votre INP.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"nofollow noreferrer noopener\"><strong>WebPageTest.org<\/strong><\/a><\/h4>\n\n\n\n<p>Il s\u2019agit d\u2019un outil gratuit et open source qui mesure la vitesse de chargement de votre site web. Il charge votre page dans un navigateur r\u00e9el, ce qui vous permet d&#8217;identifier les sections du site qui ont besoin de plus de temps pour se charger.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1480\" height=\"291\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/12_WebPageTest.jpg\" alt=\"\" class=\"wp-image-918\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Panneau des performances de Chrome DevTools&nbsp;<\/strong><\/h4>\n\n\n\n<p>Avec les<strong> Chrome DevTools<\/strong> (diminutif de Chrome Developer Tools, g\u00e9n\u00e9ralement appel\u00e9 DevTools)<strong>,<\/strong> vous disposez du panneau des performances qui inclut les Core Web Vitals. Ce panneau poss\u00e8de \u00e9galement une section <strong>Exp\u00e9rience<\/strong> dans laquelle vous pouvez d\u00e9tecter les changements de mise en page inattendus. Par cons\u00e9quent, vous pouvez identifier et corriger toute instabilit\u00e9 visuelle et am\u00e9liorer votre indicateur Cumulative Layout Shift. Pour acc\u00e9der au panneau des performances de Chrome DevTools, ouvrez <strong>Google Chrome<\/strong> (utilisez le mode incognito pour \u00e9viter le cache du navigateur) et appuyez sur <strong>Cmd+Option+I (Mac)<\/strong> ou <strong>Ctrl+Maj+I (Windows, Linux)<\/strong> pour ouvrir les <strong>DevTools<\/strong>.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"915\" src=\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/13_Chrome_DevTools-1024x915.jpg\" alt=\"\" class=\"wp-image-919\"\/><\/figure>\n\n\n\n<p>S\u00e9lectionnez la <strong>Layout Shift <\/strong>pour voir ses d\u00e9tails dans l&#8217;onglet <strong>R\u00e9sum\u00e9<\/strong>.&nbsp;<\/p>\n\n\n\n<p>Gardez \u00e0 l&#8217;esprit que selon l&#8217;outil que vous utilisez (bas\u00e9 sur les donn\u00e9es de Field Tools or Lab Tools), les indicateurs de Core Web Vitals peuvent donner des r\u00e9sultats diff\u00e9rents.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comment_ameliorer_les_Core_Web_Vitals\"><\/span><strong>Comment am\u00e9liorer les Core Web Vitals<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>La bonne nouvelle, c\u2019est que la plupart des conseils pour am\u00e9liorer vos Core Web Vitals font d\u00e9j\u00e0 partie des bonnes pratiques pour optimiser les performances des sites web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Comment am\u00e9liorer le Largest Contentful Paint (LCP)<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Activer la mise en cache de la page enti\u00e8re<\/strong><\/h4>\n\n\n\n<p>Lorsque vous activez la mise en cache de la page enti\u00e8re, les pages de votre site web sont stock\u00e9es sur le serveur apr\u00e8s le premier chargement. Seul le premier visiteur chargera le contenu entier de la page depuis la base de donn\u00e9es. Tous les autres visiteurs obtiendront la sortie de la page directement \u00e0 partir de la m\u00e9moire du serveur, ce qui rendra votre site beaucoup plus rapide et am\u00e9liorera en fin de compte votre LCP.<\/p>\n\n\n\n<p>Les utilisateurs de SiteGround tirent parti de notre solution unique de mise en cache de la page enti\u00e8re, appel\u00e9e \u00ab <strong>Mise en cache dynamique \u00bb<\/strong>, activ\u00e9e par d\u00e9faut pour tous les sites web. En fonction du site, nous constatons que <a href=\"https:\/\/newblog.siteground.com\/fr\/supercacher-pour-tous\/\" data-type=\"post\" data-id=\"63\">le chargement des pages est jusqu&#8217;\u00e0 5 fois plus rapide<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Choisir un h\u00e9bergeur web rapide et fiable<\/strong><\/h4>\n\n\n\n<p><strong>Une des raisons les plus courantes d&#8217;un mauvais LCP est un temps de r\u00e9ponse du serveur lent<\/strong>. Tout d\u2019abord, v\u00e9rifiez votre temps de r\u00e9ponse au premier octet (TTFB), c&#8217;est-\u00e0-dire le temps n\u00e9cessaire au navigateur pour recevoir le premier octet de contenu du serveur. <strong>Plus votre serveur r\u00e9pond rapidement, plus votre site web sera performant.&nbsp;<\/strong><\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><meta charset=\"utf-8\">SiteGround fournit un environnement d\u2019h\u00e9bergement hautement optimis\u00e9, aliment\u00e9 par Google Cloud. Nous mettons en \u0153uvre un PHP ultra-rapide unique, une configuration de base de donn\u00e9es MySQL personnalis\u00e9e et un syst\u00e8me de d\u00e9fense solide contre les menaces potentielles.<\/p><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Utiliser un CDN<\/strong><\/h4>\n\n\n\n<p>Outre le serveur qui h\u00e9berge votre site, vous pouvez utiliser un <strong>r\u00e9seau de diffusion de contenu<\/strong> <strong>(CDN)<\/strong> pour acc\u00e9l\u00e9rer le temps de chargement de tous vos visiteurs. <strong>Le CDN mettra votre contenu en cache sur un<\/strong> <a href=\"https:\/\/fr.siteground.com\/datacenters\"><strong>r\u00e9seau mondial de serveurs<\/strong><\/a> <strong>et chargera votre site web \u00e0 partir de celui qui est le plus proche du visiteur, <\/strong>am\u00e9liorant ainsi son exp\u00e9rience avec votre page.<\/p>\n\n\n\n<p>SiteGround a d\u00e9velopp\u00e9 sa propre infrastructure CDN afin d&#8217;augmenter la performance et la s\u00e9curit\u00e9 du site web pour tous ses utilisateurs.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Optimiser les images<\/strong><\/h4>\n\n\n\n<p>L&#8217;optimisation des images <strong>am\u00e9liorera votre score Largest Contentful Paint <\/strong>car elles sont souvent l&#8217;\u00e9l\u00e9ment le plus volumineux de la page.R\u00e9duisez toujours la taille de vos images et redimensionnez-les correctement. Il est recommand\u00e9 de distribuer les images dans des formats de nouvelle g\u00e9n\u00e9ration tels que <a href=\"https:\/\/fr.siteground.com\/kb\/quest-ce-que-le-webp\/\">WebP<\/a>, afin d&#8217;am\u00e9liorer les performances.<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><meta charset=\"utf-8\">Un moyen efficace d\u2019optimiser vos elements visuels est de tirer parti de notre plugin Speed Optimizer. Il poss\u00e8de des fonctionnalit\u00e9s telles que la compression d&#8217;images, la conversion au format WebP et le chargement diff\u00e9r\u00e9.<\/p><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Optimiser JavaScript et CSS<\/strong><\/h4>\n\n\n\n<p>La r\u00e9duction de la taille des fichiers CSS et JavaScript qui ralentissent le chargement des pages peut am\u00e9liorer votre score global de Core Web Vital et l&#8217;interaction avec les utilisateurs.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Diff\u00e9rer le chargement des fichiers JavaScript<\/li><\/ul>\n\n\n\n<p>Pendant que le navigateur charge les fichiers JavaScript, les utilisateurs ne peuvent pas interagir avec la page web. C\u2019est pourquoi vous pouvez parfois voir le terme \u00ab JavaScript bloquant le rendu \u00bb. <strong>Diff\u00e9rer vos JavaScripts signifie que le navigateur ne traitera et ne chargera les fichiers JS qu&#8217;apr\u00e8s avoir analys\u00e9 le document HTML.&nbsp;<\/strong><\/p>\n\n\n\n<p>En d&#8217;autres termes, le rendu de votre site web sera beaucoup plus rapide car il n&#8217;y aura rien pour bloquer le processus.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Minifier les fichiers CSS et JS<\/li><\/ul>\n\n\n\n<p>Pour faciliter la lecture, les d\u00e9veloppeurs laissent souvent des espaces ou des commentaires dans les fichiers CSS et JS. Cependant, tous ces caract\u00e8res dans le code ne sont pas essentiels pour le navigateur.&nbsp;<\/p>\n\n\n\n<p><strong>La minification optimise votre code en supprimant tous les caract\u00e8res inutiles, ce qui permet d&#8217;am\u00e9liorer le temps de rendu et d&#8217;acc\u00e9l\u00e9rer les sites web.&nbsp;<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Comment am\u00e9liorer l\u2019Interaction to Next Paint (INP)<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Supprimer les \u00e9l\u00e9ments de page volumineux et les t\u00e2ches fastidieuses<\/strong><\/h4>\n\n\n\n<p>La r\u00e9duction des t\u00e2ches n\u00e9cessitant beaucoup de temps et d&#8217;efforts permet d&#8217;\u00e9viter les retards dans la r\u00e9ponse aux interactions avec l&#8217;utilisateur. Une t\u00e2che fastidieuse d\u00e9signe tout \u00e9l\u00e9ment de code JavaScript dont l&#8217;ex\u00e9cution prend plus de 50 millisecondes. <strong>Les \u00e9l\u00e9ments de page volumineux tels que les vid\u00e9os ou les images d&#8217;arri\u00e8re-plan peuvent ralentir l&#8217;ex\u00e9cution du code et avoir un impact sur l&#8217;INP.<\/strong><\/p>\n\n\n\n<p>Au lieu d&#8217;utiliser une image haute r\u00e9solution pour l&#8217;arri\u00e8re-plan (par exemple, un JPEG de 4 Mo), envisagez d&#8217;utiliser une image WebP optimis\u00e9e qui r\u00e9duit consid\u00e9rablement la taille du fichier (par exemple, 400 Ko). De m\u00eame, les vid\u00e9os peuvent \u00eatre charg\u00e9es diff\u00e9remment ou remplac\u00e9es par des images statiques pour le chargement initial, en reportant les m\u00e9dias lourds apr\u00e8s l&#8217;interaction avec l&#8217;utilisateur.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Utiliser les Web Workers<\/strong><\/h4>\n\n\n\n<p>L&#8217;utilisation de Web Workers permet aux t\u00e2ches volumineuses de s&#8217;ex\u00e9cuter en arri\u00e8re-plan, ce qui les emp\u00eache de bloquer le fil d&#8217;ex\u00e9cution principal. <strong>Cela permet de r\u00e9duire la latence d&#8217;entr\u00e9e de l&#8217;utilisateur et de chargement de la page, ce qui optimise le score INP <\/strong>et les performances globales.<\/p>\n\n\n\n<p>Au lieu d&#8217;avoir des t\u00e2ches volumineuses directement ex\u00e9cut\u00e9es dans le fil d&#8217;ex\u00e9cution principal du navigateur (ce qui a pour effet de geler la page), le traitement peut \u00eatre d\u00e9l\u00e9gu\u00e9 \u00e0 un Web Worker. Cela permet \u00e0 l&#8217;utilisateur de continuer \u00e0 interagir avec le site sans d\u00e9lai notable, pendant que la t\u00e2che en arri\u00e8re-plan se termine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Optimiser les \u00ab Event Handlers \u00bb (aussi appel\u00e9s, gestionnaires d&#8217;\u00e9v\u00e9nements)<\/strong><\/h4>\n\n\n\n<p>Les <strong>gestionnaires d\u2019\u00e9v\u00e8nements optimis\u00e9s r\u00e9duisent la latence d\u2019entr\u00e9e et am\u00e9liorent la vitesse du site<\/strong>, contribuant aussi \u00e0 l&#8217;am\u00e9lioration des indicateurs de Core Web Vitals.<\/p>\n\n\n\n<p>Par exemple, lorsqu&#8217;un utilisateur clique sur un bouton, le gestionnaire d&#8217;\u00e9v\u00e9nements enregistre d&#8217;abord le clic sur le bouton et reporte le calcul \u00e0 un moment moins critique, lorsque le fil principal du navigateur est inactif. L&#8217;interaction est ainsi fluide et l&#8217;utilisateur ne subit pas de retard.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>R\u00e9duire les scripts tiers<\/strong><\/h4>\n\n\n\n<p>Il est fortement recommand\u00e9 de supprimer tous les scripts tiers qui n&#8217;apportent pas de valeur ajout\u00e9e \u00e9vidente. Si votre site comprend plusieurs scripts tiers pour les analyses, les publicit\u00e9s ou les widgets de r\u00e9seaux sociaux, \u00e9valuez s&#8217;ils sont n\u00e9cessaires. La suppression des scripts non essentiels, tels qu&#8217;un widget de chat redondant ou un tracker publicitaire qui n&#8217;est pas utilis\u00e9 par votre public principal, peut am\u00e9liorer de mani\u00e8re significative votre score Largest Contentful Paint (LCP) et Interaction to Next Paint (INP).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Comment am\u00e9liorer le Cumulative Layout Shift (CLS)<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>D\u00e9finir les attributs de taille<\/strong><\/h4>\n\n\n\n<p>D\u00e9finir les dimensions de l&#8217;attribut de taille indiquera au navigateur de l&#8217;utilisateur exactement l&#8217;espace n\u00e9cessaire \u00e0 cet \u00e9l\u00e9ment. Prenons l&#8217;exemple d&#8217;un \u00e9l\u00e9ment image.<\/p>\n\n\n\n<p>Si vous ne d\u00e9finissez pas les attributs de largeur et de hauteur d&#8217;une image, le navigateur ne conna\u00eetra pas la taille exacte de l&#8217;image jusqu&#8217;\u00e0 ce qu&#8217;elle soit compl\u00e8tement charg\u00e9e, ce qui peut provoquer un changement de la mise en page.&nbsp;&nbsp;<\/p>\n\n\n\n<p>&lt;img src=&#8221;image.jpg&#8221; width=&#8221;600&#8243; height=&#8221;400&#8243; alt=&#8221;A scenic view of mountains&#8221;&gt;<\/p>\n\n\n\n<p>En sp\u00e9cifiant la largeur et la hauteur, vous permettez au navigateur de calculer le rapport hauteur\/largeur de l&#8217;image et de lui r\u00e9server l&#8217;espace n\u00e9cessaire. Ceci r\u00e9duira au minimum les changements cumul\u00e9s de la mise en page.&nbsp;&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Pr\u00e9charger les polices de caract\u00e8res&nbsp;<\/strong><\/h4>\n\n\n\n<p><strong>Les polices de caract\u00e8res am\u00e9liorent la lisibilit\u00e9 de votre page et v\u00e9hiculent votre image de marque.<\/strong> Cependant, chaque police utilis\u00e9e est une ressource suppl\u00e9mentaire qui peut ralentir votre site web. Il est recommand\u00e9 de pr\u00e9charger les polices afin d&#8217;\u00e9viter les changements de mise en page et les flashs de texte invisible.<\/p>\n\n\n\n<p>Pour pr\u00e9charger des polices, utilisez la balise<strong> &lt;link rel=\u00ab preload \u00bb&gt; <\/strong>dans la <strong>&lt;head&gt;<\/strong> de votre document HTML. Vous devez sp\u00e9cifier l\u2019 <strong>attribut as=&#8221;font&#8221;<\/strong> et inclure <strong>crossorigin<\/strong> si la police est charg\u00e9e depuis une source externe (tel qu&#8217; un CDN).&nbsp;<\/p>\n\n\n\n<p>En faisant cela, vous am\u00e9liorerez votre score CLS.&nbsp;<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--update\"><p class=\"text text--size-medium color-darkest\"><meta charset=\"utf-8\">Notre Speed Optimizer est \u00e9galement con\u00e7u pour vous aider dans ce domaine. Notre fonctionnalit\u00e9 d\u00e9di\u00e9e \u00e0 l&#8217;optimisation des polices de caract\u00e8res am\u00e9liore le temps de rendu, ce qui se traduit par une meilleure performance du site.<\/p><\/div>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>R\u00e9server de l\u2019espace pour les publicit\u00e9s<\/strong><\/h4>\n\n\n\n<p>Les publicit\u00e9s sont de nature dynamique, ce qui peut entra\u00eener des modifications inattendues de la mise en page. Cela peut avoir un effet n\u00e9gatif sur votre score CLS. Si vous ne r\u00e9servez pas suffisamment d\u2019espace pour les publicit\u00e9s sur votre site, elles peuvent appara\u00eetre de mani\u00e8re inattendue et nuire \u00e0 l\u2019exp\u00e9rience utilisateur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Utiliser CSS transform pour les vid\u00e9os anim\u00e9es<\/strong><\/h4>\n\n\n\n<p>Les <strong>changements de mise en page<\/strong> pendant les animations perturbent souvent l\u2019exp\u00e9rience de l\u2019utilisateur et peuvent avoir un impact significatif sur votre score <strong>Cumulative Layout Shift (CLS)<\/strong>. L&#8217;utilisation de la fonctionnalit\u00e9 <strong>CSS transform <\/strong>pour les vid\u00e9os anim\u00e9es&nbsp; permet d&#8217;\u00e9viter que les \u00e9l\u00e9ments de la page ne se d\u00e9placent de mani\u00e8re impr\u00e9visible.&nbsp;<\/p>\n\n\n\n<p>Les vid\u00e9os anim\u00e9es trait\u00e9es avec la fonctionnalit\u00e9 transform, poss\u00e8de l\u2019option <strong>scale<\/strong> ou <strong>translate<\/strong> qui aident \u00e0 maintenir la position d\u2019autres contenus sur la page. Cela conduit \u00e0 une exp\u00e9rience plus stable sur votre site web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>R\u00e9duire au minimum le contenu dynamique<\/strong><\/h4>\n\n\n\n<p>Le contenu dynamique, tel que les publicit\u00e9s, les images ou les vid\u00e9os qui se chargent apr\u00e8s la page web initiale, entra\u00eene souvent des changements de mise en page. Ces changements peuvent affecter n\u00e9gativement le score de Cumulative Layout Shift (CLS).&nbsp;<strong>Pour am\u00e9liorer la stabilit\u00e9 visuelle, il est important de pr\u00e9-allouer de l\u2019espace pour le contenu dynamique.<\/strong> Il existe plusieurs techniques pour ce faire, comme la d\u00e9finition de dimensions dans CSS, JavaScript ou l&#8217;utilisation de bo\u00eetes de rapport hauteur\/largeur ou de caract\u00e8res g\u00e9n\u00e9riques. Vous trouverez ci-dessous un exemple de configuration des dimensions avant l&#8217;insertion de contenu dynamique avec JavaScript :<\/p>\n\n\n\n<div class=\"post-page__colored-blocks post-page__colored-blocks--tip\"><p class=\"text text--size-medium color-darkest\"><meta charset=\"utf-8\">&lt;div id=&#8221;dynamic-content&#8221; class=&#8221;ad-container&#8221;>&lt;\/div><br><br>&lt;script><br>\u00a0\u00a0\u00a0\u00a0const adContainer = document.getElementById(&#8216;dynamic-content&#8217;);<br>\u00a0\u00a0\u00a0\u00a0adContainer.style.width = &#8216;300px&#8217;;\u00a0 \/\/ Fixed width<br>\u00a0\u00a0\u00a0\u00a0adContainer.style.height = &#8216;250px&#8217;; \/\/ Fixed height<br><br>\u00a0\u00a0\u00a0\u00a0\/\/ Dynamically inject content<br>\u00a0\u00a0\u00a0\u00a0adContainer.innerHTML = &#8216;&lt;p>Ad will appear here&lt;\/p>&#8217;;<br>&lt;\/script><\/p><\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Pourquoi_les_Core_Web_Vitals_sont-ils_importants\"><\/span><strong>Pourquoi les Core Web Vitals sont-ils importants ?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Les conseils ci-dessus sont \u00e0 la fois de bonnes pratiques recommand\u00e9es pour l\u2019optimisation des sites web et influencent \u00e9galement positivement les signaux d\u2019exp\u00e9rience de la page mesur\u00e9s par les Core Web Vitals de Google.<\/p>\n\n\n\n<p>En tant que propri\u00e9taire de site web, il est important de comprendre ces indicateurs. Cela peut vous aider \u00e0 offrir une exp\u00e9rience utilisateur positive, \u00e0 am\u00e9liorer votre classement dans les moteurs de recherche et les performances globales de votre page web.&nbsp;<\/p>\n\n\n\n<p>Il est important de noter que <strong>l&#8217;algorithme de classement de Google est mis \u00e0 jour en permanence<\/strong>.&nbsp; En surveillant r\u00e9guli\u00e8rement vos Core Web Vitals \u00e0 l&#8217;aide d&#8217;outils tels que PageSpeed Insights ou Search Console, vous pourrez proc\u00e9der aux ajustements n\u00e9cessaires, m\u00eame si les attentes des utilisateurs et les algorithmes de classement de Google \u00e9voluent. De cette fa\u00e7on, vous pr\u00e9parez votre site \u00e0 une r\u00e9ussite \u00e0 long terme.&nbsp;Pour plus <strong>de conseils d\u2019experts sur l\u2019optimisation de sites web<\/strong>, vous pouvez<a href=\"https:\/\/www.siteground.com\/wordpress-speed-optimization-ebook?utm_source=footer&amp;utm_campaign=ebookwpspeed\"> t\u00e9l\u00e9charger notre <strong>guide sur l&#8217;optimisation de la vitesse de WordPress<\/strong><\/a> et apprendre \u00e0 cr\u00e9er un site web performant.<\/p>\n","protected":false},"excerpt":{"rendered":"Un temps de chargement lent, des \u00e9l\u00e9ments qui ne r\u00e9pondent pas ou des changements de page inattendus peuvent frustrer les utilisateurs. C'est pourquoi les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web et augmenter vos chances d'\u00eatre mieux class\u00e9 dans les moteurs de recherche. En am\u00e9liorant les&hellip;","protected":false},"author":122,"featured_media":920,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,9,6],"tags":[],"class_list":["post-905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-conseils-dhebergement","category-conseils-pratiques","category-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v24.2) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Core Web Vitals : ce qu&#039;ils sont et comment les am\u00e9liorer (guide)<\/title>\n<meta name=\"description\" content=\"Les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Core Web Vitals : ce qu&#039;ils sont et comment les am\u00e9liorer (guide)\" \/>\n<meta property=\"og:description\" content=\"Les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web\" \/>\n<meta property=\"og:url\" content=\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/\" \/>\n<meta property=\"og:site_name\" content=\"SiteGround\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-23T13:51:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-03T08:08:11+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Nikola Knezhevich\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nikola Knezhevich\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/\"},\"author\":{\"name\":\"Nikola Knezhevich\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#\/schema\/person\/e5a3960f4e63f28a1a1cb168ac16efde\"},\"headline\":\"Core Web Vitals : ce qu&#8217;ils sont et comment les am\u00e9liorer (guide)\",\"datePublished\":\"2024-10-23T13:51:04+00:00\",\"dateModified\":\"2025-10-03T08:08:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/\"},\"wordCount\":3805,\"publisher\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg\",\"articleSection\":[\"Conseils d'h\u00e9bergement\",\"Conseils Pratiques\",\"WordPress\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/\",\"url\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/\",\"name\":\"Core Web Vitals : ce qu'ils sont et comment les am\u00e9liorer (guide)\",\"isPartOf\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg\",\"datePublished\":\"2024-10-23T13:51:04+00:00\",\"dateModified\":\"2025-10-03T08:08:11+00:00\",\"description\":\"Les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web\",\"breadcrumb\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage\",\"url\":\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg\",\"contentUrl\":\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg\",\"width\":1200,\"height\":600},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/newblog.siteground.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Core Web Vitals : ce qu&#8217;ils sont et comment les am\u00e9liorer (guide)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#website\",\"url\":\"https:\/\/newblog.siteground.com\/fr\/\",\"name\":\"Blog SiteGround\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/newblog.siteground.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#organization\",\"name\":\"Blog SiteGround\",\"url\":\"https:\/\/newblog.siteground.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2025\/01\/cropped-Siteground-Logo-on-white.jpg\",\"contentUrl\":\"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2025\/01\/cropped-Siteground-Logo-on-white.jpg\",\"width\":173,\"height\":250,\"caption\":\"Blog SiteGround\"},\"image\":{\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#\/schema\/person\/e5a3960f4e63f28a1a1cb168ac16efde\",\"name\":\"Nikola Knezhevich\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/newblog.siteground.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b991ff15e70ab948f384f6ce22bf33b6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b991ff15e70ab948f384f6ce22bf33b6?s=96&d=mm&r=g\",\"caption\":\"Nikola Knezhevich\"},\"sameAs\":[\"https:\/\/www.instagram.com\/n.knezhevich\/\",\"https:\/\/bg.linkedin.com\/in\/n-knezhevich\"],\"gender\":\"male\",\"knowsAbout\":[\"Search Engine Optimization\",\"Digital Marketing\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"SEO Team Lead\",\"worksFor\":\"SiteGround\",\"url\":\"https:\/\/newblog.siteground.com\/fr\/author\/nikolaknezhevich\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Core Web Vitals : ce qu'ils sont et comment les am\u00e9liorer (guide)","description":"Les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/","og_locale":"en_US","og_type":"article","og_title":"Core Web Vitals : ce qu'ils sont et comment les am\u00e9liorer (guide)","og_description":"Les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web","og_url":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/","og_site_name":"SiteGround","article_published_time":"2024-10-23T13:51:04+00:00","article_modified_time":"2025-10-03T08:08:11+00:00","og_image":[{"width":1200,"height":600,"url":"http:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg","type":"image\/jpeg"}],"author":"Nikola Knezhevich","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Nikola Knezhevich","Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#article","isPartOf":{"@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/"},"author":{"name":"Nikola Knezhevich","@id":"https:\/\/newblog.siteground.com\/fr\/#\/schema\/person\/e5a3960f4e63f28a1a1cb168ac16efde"},"headline":"Core Web Vitals : ce qu&#8217;ils sont et comment les am\u00e9liorer (guide)","datePublished":"2024-10-23T13:51:04+00:00","dateModified":"2025-10-03T08:08:11+00:00","mainEntityOfPage":{"@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/"},"wordCount":3805,"publisher":{"@id":"https:\/\/newblog.siteground.com\/fr\/#organization"},"image":{"@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg","articleSection":["Conseils d'h\u00e9bergement","Conseils Pratiques","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/","url":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/","name":"Core Web Vitals : ce qu'ils sont et comment les am\u00e9liorer (guide)","isPartOf":{"@id":"https:\/\/newblog.siteground.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage"},"image":{"@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage"},"thumbnailUrl":"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg","datePublished":"2024-10-23T13:51:04+00:00","dateModified":"2025-10-03T08:08:11+00:00","description":"Les Core Web Vitals (litt\u00e9ralement traduit, signaux web essentiels) sont devenus essentiels pour optimiser votre site web","breadcrumb":{"@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#primaryimage","url":"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg","contentUrl":"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2024\/10\/0_main_image_1200x600.jpg","width":1200,"height":600},{"@type":"BreadcrumbList","@id":"https:\/\/newblog.siteground.com\/fr\/core-web-vitals-ce-quils-sont-et-comment-les-ameliorer-guide\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/newblog.siteground.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Core Web Vitals : ce qu&#8217;ils sont et comment les am\u00e9liorer (guide)"}]},{"@type":"WebSite","@id":"https:\/\/newblog.siteground.com\/fr\/#website","url":"https:\/\/newblog.siteground.com\/fr\/","name":"Blog SiteGround","description":"","publisher":{"@id":"https:\/\/newblog.siteground.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/newblog.siteground.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/newblog.siteground.com\/fr\/#organization","name":"Blog SiteGround","url":"https:\/\/newblog.siteground.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2025\/01\/cropped-Siteground-Logo-on-white.jpg","contentUrl":"https:\/\/newblog.siteground.com\/fr\/wp-content\/uploads\/sites\/6\/2025\/01\/cropped-Siteground-Logo-on-white.jpg","width":173,"height":250,"caption":"Blog SiteGround"},"image":{"@id":"https:\/\/newblog.siteground.com\/fr\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/newblog.siteground.com\/fr\/#\/schema\/person\/e5a3960f4e63f28a1a1cb168ac16efde","name":"Nikola Knezhevich","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/newblog.siteground.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b991ff15e70ab948f384f6ce22bf33b6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b991ff15e70ab948f384f6ce22bf33b6?s=96&d=mm&r=g","caption":"Nikola Knezhevich"},"sameAs":["https:\/\/www.instagram.com\/n.knezhevich\/","https:\/\/bg.linkedin.com\/in\/n-knezhevich"],"gender":"male","knowsAbout":["Search Engine Optimization","Digital Marketing"],"knowsLanguage":["English"],"jobTitle":"SEO Team Lead","worksFor":"SiteGround","url":"https:\/\/newblog.siteground.com\/fr\/author\/nikolaknezhevich\/"}]}},"_links":{"self":[{"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/posts\/905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/users\/122"}],"replies":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/comments?post=905"}],"version-history":[{"count":3,"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/posts\/905\/revisions"}],"predecessor-version":[{"id":979,"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/posts\/905\/revisions\/979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/media?parent=905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/categories?post=905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/newblog.siteground.com\/fr\/wp-json\/wp\/v2\/tags?post=905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}