{"id":1221,"date":"2020-10-16T12:00:31","date_gmt":"2020-10-16T12:00:31","guid":{"rendered":"https:\/\/www.ezoic.com\/fr-lang\/2020\/10\/16\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/"},"modified":"2020-10-16T12:00:31","modified_gmt":"2020-10-16T12:00:31","slug":"comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google","status":"publish","type":"post","link":"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/","title":{"rendered":"Comment optimiser les principaux \u00e9l\u00e9ments vitaux du Web dans la console de recherche Google"},"content":{"rendered":"<p>[et_pb_section admin_label=&#8221;section&#8221;]<br \/>\n\t\t\t[et_pb_row admin_label=&#8221;row&#8221;]<br \/>\n\t\t\t\t[et_pb_column type=&#8221;4_4&#8243;][et_pb_text admin_label=&#8221;Text&#8221;]<\/p>\n<p>Google a r\u00e9cemment <a href=\"https:\/\/webmasters.googleblog.com\/2020\/05\/evaluating-page-experience.html\" target=\"_blank\" rel=\"noopener noreferrer\">annonc\u00e9<\/a> que les changements \u00e0 venir de la console de recherche en incorporant Core Web Vitals comme nouvelles mesures qui \u00e9largissent la fa\u00e7on dont Google mesure la vitesse et la performance des sites Web. Avec cette annonce, Google a fourni des informations sur un calendrier de 6 mois dans lequel ces mesures seraient contr\u00f4l\u00e9es avant d&#8217;\u00eatre utilis\u00e9es dans le cadre du classement des recherches. Chaque fois que Google apporte des modifications de ce type, les \u00e9diteurs se demandent probablement : &#8220;Comment puis-je optimiser les principaux \u00e9l\u00e9ments vitaux du web ?&#8221;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-243278\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/search-console-core-web-vitals-scaled.jpeg\" alt=\"Vue de la console de recherche : Essentiels du Web\" width=\"1024\" height=\"402\" \/><\/p>\n<p>Ces nouvelles mesures se trouvent dans <a href=\"https:\/\/search.google.com\/search-console\/\" target=\"_blank\" rel=\"noopener noreferrer\">Console de recherche Google<\/a>.\u00a0 Ce qui \u00e9tait auparavant le &#8220;Rapport de vitesse&#8221; est maintenant l&#8217;onglet &#8220;Essentiels du Web&#8221;. Les donn\u00e9es sont tir\u00e9es du rapport Chrome UX (\u00e9galement connu sous le nom de CrUX). Ci-dessous, nous allons vous montrer comment optimiser les m\u00e9triques de Core Web Vitals.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_67_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Sommaire<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a189e40c2da1\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a189e40c2da1\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Quelles_sont_les_mesures_essentielles_du_Web\" title=\"Quelles sont les mesures essentielles du Web ?\">Quelles sont les mesures essentielles du Web ?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Quest-ce_que_le_CLS_Cumulative_Layout_Shift\" title=\"Qu&#8217;est-ce que le CLS (Cumulative Layout Shift) ?\">Qu&#8217;est-ce que le CLS (Cumulative Layout Shift) ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Quest-ce_que_le_delai_de_la_premiere_entree_du_FID\" title=\"Qu&#8217;est-ce que le d\u00e9lai de la premi\u00e8re entr\u00e9e du FID ?\">Qu&#8217;est-ce que le d\u00e9lai de la premi\u00e8re entr\u00e9e du FID ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Quest-ce_que_le_LCP_Largest_Contentful_Paint\" title=\"Qu&#8217;est-ce que le LCP (Largest Contentful Paint) ?\">Qu&#8217;est-ce que le LCP (Largest Contentful Paint) ?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Comment_le_LCP_differe-t-il_du_FCP_First_Contentful_Paint\" title=\"Comment le LCP diff\u00e8re-t-il du FCP (First Contentful Paint) ?\">Comment le LCP diff\u00e8re-t-il du FCP (First Contentful Paint) ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Comment_accelerer_le_CLS\" title=\"Comment acc\u00e9l\u00e9rer le CLS\">Comment acc\u00e9l\u00e9rer le CLS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Comment_ameliorer_le_LCP\" title=\"Comment am\u00e9liorer le LCP\">Comment am\u00e9liorer le LCP<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Comment_empecher_le_JavaScript_daugmenter_le_temps_du_FID\" title=\"Comment emp\u00eacher le JavaScript d&#8217;augmenter le temps du FID\">Comment emp\u00eacher le JavaScript d&#8217;augmenter le temps du FID<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Quelle_est_limportance_des_elements_vitaux_du_Web_pour_les_classements\" title=\"Quelle est l&#8217;importance des \u00e9l\u00e9ments vitaux du Web pour les classements ?\">Quelle est l&#8217;importance des \u00e9l\u00e9ments vitaux du Web pour les classements ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Optimiser_les_vitaux_du_Web_en_utilisant_Ezoic\" title=\"Optimiser les vitaux du Web en utilisant Ezoic\">Optimiser les vitaux du Web en utilisant Ezoic<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/#Lamelioration_des_elements_vitaux_du_Web_de_base_favorisera-t-il_le_referencement\" title=\"L&#8217;am\u00e9lioration des \u00e9l\u00e9ments vitaux du Web de base favorisera-t-il le r\u00e9f\u00e9rencement ?\">L&#8217;am\u00e9lioration des \u00e9l\u00e9ments vitaux du Web de base favorisera-t-il le r\u00e9f\u00e9rencement ?<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Quelles_sont_les_mesures_essentielles_du_Web\"><\/span>Quelles sont les mesures essentielles du Web ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Les &#8220;Core Web Vitals&#8221; sont un ensemble de mesures li\u00e9es \u00e0 la vitesse, la r\u00e9activit\u00e9 et la stabilit\u00e9 visuelle, pour aider les propri\u00e9taires de sites \u00e0 mesurer l&#8217;exp\u00e9rience des utilisateurs sur le web. Ils ont \u00e9t\u00e9 introduits par l&#8217;\u00e9quipe Chrome de Google.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-243158\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/google-core-web-vitals.jpeg\" alt=\"Google's Core Web Vitals\" width=\"960\" height=\"540\" \/><\/p>\n<p>Les trois facteurs qui composent les Core Web Vitals sont <strong>Loading, Interactivity, and Visual Stability.\u00a0<\/strong>Mais quelles mesures comprennent ces facteurs ?<\/p>\n<blockquote><p><strong>Chargement :\u00a0<\/strong>Largest Contentful Paint (LCP) <strong>Interactivit\u00e9 :\u00a0<\/strong>First Input Delay (FID) <strong>Stabilit\u00e9 visuelle :\u00a0<\/strong>Cumulative Layout Shift (CLS)<\/p><\/blockquote>\n<p>Certaines de ces mesures de performance sont communes aux \u00e9diteurs, comme le d\u00e9lai de premi\u00e8re entr\u00e9e (First Input Delay &#8211; FID). Nous abordons cette mesure dans notre article sur les statistiques de vitesse moyenne des pages pour 2020. Cependant, des mesures comme la plus grande peinture concurrente (LCP) et le d\u00e9calage cumulatif de la mise en page (CLS) ont \u00e9t\u00e9 essentiellement invent\u00e9es et cr\u00e9\u00e9es par Google. Il est important de savoir ce que ces mesures signifient r\u00e9ellement afin d&#8217;optimiser et de comprendre quand ces mesures sont importantes et quand elles ne le sont pas.<\/p>\n<p>Important : The Core Web Vitals est une nouvelle m\u00e9thode pour mesurer les performances d&#8217;un site web, et est beaucoup plus nuanc\u00e9e que simplement &#8220;rapide ou lent&#8221;, et comprend des mesures largement invent\u00e9es par Google qui peuvent ne pas refl\u00e9ter l&#8217;exp\u00e9rience r\u00e9elle des utilisateurs.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Quest-ce_que_le_CLS_Cumulative_Layout_Shift\"><\/span>Qu&#8217;est-ce que le CLS (Cumulative Layout Shift) ?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>CLS (Cumulative Layout Shift) est une mesure de chargement de site web pour mesurer la stabilit\u00e9 visuelle. Il vise \u00e0 quantifier la fr\u00e9quence \u00e0 laquelle les utilisateurs subissent des changements de mise en page inattendus.<\/p>\n<p>Ci-dessous, un exemple de page qui a probablement un CLS \u00e9lev\u00e9. L&#8217;utilisateur place son curseur sur la s\u00e9lection &#8220;Non, y retourner&#8221;, et juste avant de cliquer, la mise en page change, et &#8220;Oui, passez ma commande&#8221; est accidentellement choisi. L&#8217;exp\u00e9rience de l&#8217;utilisateur est donc m\u00e9diocre. \u00a0<\/p>\n<div style=\"width: 750px;\" class=\"wp-video\"><!--[if lt IE 9]><script>document.createElement('video');<\/script><![endif]-->\n<video class=\"wp-video-shortcode\" id=\"video-1221-1\" width=\"750\" height=\"536\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/webm\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2020\/06\/AccidentalSubmit.webm?_=1\" \/><a href=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2020\/06\/AccidentalSubmit.webm\" target=\"_blank\" rel=\"noopener\">https:\/\/www.ezoic.com\/wp-content\/uploads\/2020\/06\/AccidentalSubmit.webm<\/a><\/video><\/div>\n<blockquote><p>Un mouvement inattendu du contenu de la page se produit g\u00e9n\u00e9ralement parce que les ressources sont charg\u00e9es de mani\u00e8re asynchrone ou que des \u00e9l\u00e9ments DOM sont ajout\u00e9s dynamiquement \u00e0 la page au-dessus du contenu existant. &#8211;<a href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web.Dev<\/a><\/p><\/blockquote>\n<p>Ce qui pourrait causer un taux \u00e9lev\u00e9 de CLS:<\/p>\n<ul>\n<li>Image ou vid\u00e9o de taille inconnue<\/li>\n<li>Rendu des polices<\/li>\n<li>Publicit\u00e9s de tiers qui redimensionnent dynamiquement<\/li>\n<\/ul>\n<p>L&#8217;un des grands probl\u00e8mes est qu&#8217;un site web peut avoir une apparence et un comportement diff\u00e9rents pour les utilisateurs et les d\u00e9veloppeurs. Les images et autres \u00e9l\u00e9ments sont souvent d\u00e9j\u00e0 dans le cache du navigateur du d\u00e9veloppeur, et les appels d&#8217;API qui s&#8217;ex\u00e9cutent localement sont souvent si rapides que le retard ou les d\u00e9calages ne sont pas perceptibles.<\/p>\n<figure id=\"attachment_243228\" aria-describedby=\"caption-attachment-243228\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-243228 size-large\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Screen-Shot-2020-06-02-at-11.44.48-AM-1024x268.png\" alt=\"Un des \u00e9l\u00e9ments essentiels du web : le Cumulative Layout Shift (CLS). Une bonne gamme se situe entre .1 et .25\" width=\"1024\" height=\"268\" \/><figcaption id=\"caption-attachment-243228\" class=\"wp-caption-text\"><em>Source : <\/em><a href=\"https:\/\/web.dev\/cls\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web.dev<\/a><\/figcaption><\/figure>\n<p>Ainsi, aux yeux de Google, un CLS faible permet de s&#8217;assurer que la page fonctionne correctement pour les utilisateurs. Leur bonne port\u00e9e est inf\u00e9rieure \u00e0 .1s.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Quest-ce_que_le_delai_de_la_premiere_entree_du_FID\"><\/span>Qu&#8217;est-ce que le d\u00e9lai de la premi\u00e8re entr\u00e9e du FID ?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Le d\u00e9lai de premi\u00e8re saisie (FID) mesure le temps entre le moment o\u00f9 un utilisateur interagit pour la premi\u00e8re fois avec votre site (c&#8217;est-\u00e0-dire lorsqu&#8217;il clique sur quelque chose) et le moment o\u00f9 le navigateur est capable de r\u00e9pondre \u00e0 l&#8217;interaction.<\/p>\n<figure id=\"attachment_243175\" aria-describedby=\"caption-attachment-243175\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-243175 size-large\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Screen-Shot-2020-06-01-at-4.10.30-PM-1024x263.png\" alt=\"un des \u00e9l\u00e9ments essentiels du web : Plage du premier d\u00e9lai d'entr\u00e9e (FID)\" width=\"1024\" height=\"263\" \/><figcaption id=\"caption-attachment-243175\" class=\"wp-caption-text\"><em>Source:<\/em> <a href=\"https:\/\/web.dev\/fid\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web.dev<\/a><\/figcaption><\/figure>\n<p>Pour \u00eatre class\u00e9s dans la cat\u00e9gorie &#8220;bon&#8221;, les \u00e9diteurs doivent s&#8217;efforcer d&#8217;avoir un FID inf\u00e9rieur \u00e0 100 millisecondes. Le FID est consid\u00e9r\u00e9 ici comme UX (user experience) car il peut refl\u00e9ter la rapidit\u00e9 avec laquelle le contenu dont un \u00e9diteur se soucie est imm\u00e9diatement accessible sur demande. Si vous \u00eates un site WordPress, les augmentations de FID proviennent probablement de vos plugins. Si vous avez l&#8217;habitude d&#8217;ajouter des \u00e9l\u00e9ments dans la &#8220;t\u00eate&#8221; de votre site web, et si ces \u00e9l\u00e9ments font beaucoup d&#8217;appels Javascript externes, vous pourriez ralentir consid\u00e9rablement le FID. Pour les utilisateurs de WordPress, ce conseil vaut \u00e9galement pour les <a href=\"\/?p=27176\">plugins d&#8217;optimisation de la vitesse<\/a>. Certains \u00e9diteurs utilisent non seulement un mais plusieurs plugins d&#8217;optimisation en m\u00eame temps exactement. Ces plugins effectuent souvent des appels externes qui peuvent avoir l&#8217;effet inverse et augmenter le FID et ralentir votre site web.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-243309 size-full\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Untitled-presentation.jpg\" alt=\"speed plugins and core web vitals\" width=\"960\" height=\"540\" \/><\/p>\n<p>Tout outil ou logiciel d&#8217;optimisation de la vitesse pourrait potentiellement avoir un impact sur le FID, ou sur notre prochaine m\u00e9trique LPC, s&#8217;il n\u00e9cessite l&#8217;ex\u00e9cution de nombreux javascript pour son ex\u00e9cution. Si les outils sont fournis via un plugin ou en ajoutant un extrait de code dans l&#8217;en-t\u00eate de votre site web, il est utile d&#8217;\u00e9valuer dans quelle mesure ces outils peuvent r\u00e9ellement nuire \u00e0 vos scores FID ou LCP.<\/p>\n<blockquote><p>&#8220;Si les outils sont fournis via un plugin ou en ajoutant un extrait de code dans l&#8217;en-t\u00eate de votre site web, il est utile d&#8217;\u00e9valuer dans quelle mesure ces outils peuvent r\u00e9ellement nuire \u00e0 vos scores FID ou LCP.&#8221;<\/p><\/blockquote>\n<h3><span class=\"ez-toc-section\" id=\"Quest-ce_que_le_LCP_Largest_Contentful_Paint\"><\/span>Qu&#8217;est-ce que le LCP (Largest Contentful Paint) ?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>LCP mesure la vitesse de chargement &#8220;per\u00e7ue&#8221; par le visiteur. Elle \u00e9tait &#8211; et est sans doute toujours &#8211; calcul\u00e9e au mieux par <a href=\"\/?p=6066\">en regardant DOM Interactive<\/a>, mais maintenant Google regarde cette interaction un peu diff\u00e9remment.<\/p>\n<figure id=\"attachment_243234\" aria-describedby=\"caption-attachment-243234\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-243234 size-large\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/Screen-Shot-2020-06-02-at-11.48.14-AM-1024x263.png\" alt=\"Un des \u00e9l\u00e9ments essentiels du web : La plus grande peinture contenante (LCP). Une port\u00e9e id\u00e9ale est inf\u00e9rieure \u00e0 2,5 secondes\" width=\"1024\" height=\"263\" \/><figcaption id=\"caption-attachment-243234\" class=\"wp-caption-text\"><em>Source:<\/em> <a href=\"https:\/\/web.dev\/lcp\/\" target=\"_blank\" rel=\"noopener noreferrer\">Web.dev<\/a><\/figcaption><\/figure>\n<p>La plupart des impacts de cette mesure se situent au-dessus des images, lecteurs vid\u00e9o et autres m\u00e9dias qui prennent du temps \u00e0 charger avant que la partie de la page que l&#8217;utilisateur voit et avec laquelle il interagit ne lui soit imm\u00e9diatement accessible. Ces derniers doivent se charger rapidement et dans un premier temps. Google veut donc s&#8217;assurer que <strong> tout ce qu&#8217;un utilisateur va voir lorsqu&#8217;il atterrit sur le site (au-dessus du pli) est visible rapidement et ne saute pas partout.<\/strong> Si vous avez des widgets m\u00e9dia ou tout ce qui &#8220;flotte&#8221; sur la page, cela pourrait avoir un impact n\u00e9gatif sur cette mesure. <strong> Pour optimiser cela, voici quelques \u00e9l\u00e9ments \u00e0 prendre en compte:<\/strong><\/p>\n<ul>\n<li>Barre d&#8217;inscription \u00e0 la newsletter ou \u00e0 l&#8217;abonnement flottante<\/li>\n<li>G widgets flottants des m\u00e9dias sociaux<\/li>\n<li>Ic\u00f4nes de m\u00e9dias sociaux qui se chargent au-dessus du pli pour le partage d&#8217;articles<\/li>\n<li>Bulletin d&#8217;information, login ou widgets qui se chargent dans la fen\u00eatre de visualisation d&#8217;un article par le visiteur<\/li>\n<li>Vid\u00e9os qui se chargent au-dessus du pli (ci-dessous nous donnons des options pour cela)<\/li>\n<li>Images au-dessus du pli (ci-dessous nous donnons des options pour cela)<\/li>\n<li>Bo\u00eetes d&#8217;auteur qui sont auto-inject\u00e9es avec des images sur la page<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Comment_le_LCP_differe-t-il_du_FCP_First_Contentful_Paint\"><\/span>Comment le LCP diff\u00e8re-t-il du FCP (First Contentful Paint) ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<blockquote><p><strong>LCP<\/strong> = Tient compte de choses comme les m\u00e9dias\/vid\u00e9o. Quand l&#8217;utilisateur voit-il \u00e0 quoi va ressembler la page actuelle ? M\u00eame si elle va charger d&#8217;autres choses encore en arri\u00e8re-plan. <strong>FCP<\/strong> = Quand l&#8217;utilisateur voit-il votre contenu pour la premi\u00e8re fois ? Ne charge pas le menu, ne voit pas de contenu vide mais quelle est la premi\u00e8re fois qu&#8217;un utilisateur voit votre contenu.<\/p>\n<p>Sur Google PageSpeed Insights, si vous lancez une URL, vous verrez un exemple du FID et du LCP. Vous pouvez voir un espace blanc de l&#8217;image ci-dessous, ce qui signifie que le contenu ne sautera pas partout lorsque l&#8217;image se chargera compl\u00e8tement.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-243240\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/largest-contentful-paint-example-1024x161.jpeg\" alt=\"Largest Contentful paint example\" width=\"1024\" height=\"161\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Comment_accelerer_le_CLS\"><\/span>Comment acc\u00e9l\u00e9rer le CLS<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La meilleure fa\u00e7on d&#8217;acc\u00e9l\u00e9rer le CLS est <a href=\"\/?p=244302\" target=\"_blank\" rel=\"noopener noreferrer\">de charger paresseusement les images<\/a> et les publicit\u00e9s. Mais quand vous le faites, vous voulez vous assurer que les &#8220;pixels&#8221; pour l&#8217;emplacement de ces \u00e9l\u00e9ments sont d\u00e9finis.<\/p>\n<blockquote><p><b> Par exemple : <\/b>Au fur et \u00e0 mesure que le contenu se charge dans le GIF ci-dessous, tous les emplacements pour les publicit\u00e9s et les images sont d\u00e9j\u00e0 d\u00e9finis. Si une image ne s&#8217;est pas encore charg\u00e9e parce que nous d\u00e9filement tr\u00e8s rapide, <strong> elle ne se d\u00e9place pas<\/strong>. Ce serait juste un espace blanc, vide, jusqu&#8217;\u00e0 ce que vous puissiez finalement charger l&#8217;image.<\/p><\/blockquote>\n<div style=\"width: 750px;\" class=\"wp-video\"><video class=\"wp-video-shortcode\" id=\"video-1221-2\" width=\"750\" height=\"469\" loop=\"1\" autoplay=\"1\" preload=\"metadata\" controls=\"controls\"><source type=\"video\/mp4\" src=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2020\/06\/apple-toolbox-mobile-loading_1.mp4?_=2\" \/><a href=\"https:\/\/www.ezoic.com\/wp-content\/uploads\/2020\/06\/apple-toolbox-mobile-loading_1.mp4\" target=\"_blank\" rel=\"noopener\">https:\/\/www.ezoic.com\/wp-content\/uploads\/2020\/06\/apple-toolbox-mobile-loading_1.mp4<\/a><\/video><\/div>\n<p>Ce que vous ne voulez pas maintenant, c&#8217;est avoir ces images, publicit\u00e9s ou vid\u00e9os, chargement apr\u00e8s coup. Donc si vous chargez paresseusement, assurez-vous d&#8217;avoir l&#8217;espace disponible, pour que votre contenu ne saute pas partout. Il existe un <a href=\"https:\/\/itnext.io\/how-to-stop-content-jumping-when-images-load-7c915e47f576\" target=\"_blank\" rel=\"noopener noreferrer\">guide complet en ligne<\/a> avec plusieurs codes CSS et Javascript pour vous aider \u00e0 formater correctement vos images et autres contenus afin qu&#8217;ils se chargent en douceur lorsque l&#8217;utilisateur fait d\u00e9filer les pages. Voici un code Javascript qui vous permet d&#8217;envelopper vos images avec suffisamment de rembourrage pour \u00e9viter les sauts : <code>.wrapper {<br \/>\nposition : relative ;<br \/>\nhauteur : 0 ;<br \/>\n\/* La formule est : (hauteur \/ largeur * 100%) *\/<br \/>\ndessus du rembourrage : calc(360 \/ 360 * 100%) ;<br \/>\n}<\/code> <code>.wrapper__img {<br \/>\nposition : absolue ;<br \/>\nhaut : 0 ;<br \/>\ngauche : 0 ;<br \/>\nlargeur maximale : 100% ;<br \/>\nhauteur : auto ;<br \/>\n}<\/code> De plus, si vous utilisez <a href=\"\/?page_id=1957\">Ad Tester, le testeur d&#8217;annonces d&#8217;Ezoic<\/a>, les annonces qui apparaissent sur votre site web sont d\u00e9j\u00e0 correctement rembourr\u00e9es de sorte que le contenu de votre site ne saute pas aux yeux de l&#8217;utilisateur une fois qu&#8217;il d\u00e9file. <strong>Souvenez-vous en : <\/strong> Plus l&#8217;exp\u00e9rience de l&#8217;utilisateur est bonne, plus vos \u00e9l\u00e9ments vitaux du Web seront bons.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Comment_ameliorer_le_LCP\"><\/span>Comment am\u00e9liorer le LCP<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Une strat\u00e9gie utile pour am\u00e9liorer le LCP en dehors d&#8217;un chargement paresseux est d&#8217;essayer de charger des aper\u00e7us de vid\u00e9os sous forme de vignettes au lieu de vid\u00e9os compl\u00e8tes sur votre page. Vous trouverez des informations sur <a href=\"https:\/\/stackoverflow.com\/questions\/20075875\/how-to-set-the-thumbnail-image-on-html5-video\" target=\"_blank\" rel=\"noopener\">comment faire ici<\/a>. Si vous utilisez WordPress, il existe un certain nombre d&#8217;outils et de plugins qui vous permettent de charger les iframes de YouTube sous forme d&#8217;image &#8220;d&#8217;aper\u00e7u&#8221; et l&#8217;utilisateur doit cliquer pour charger, au lieu de charger la vid\u00e9o lors du chargement de la page. Il existe \u00e9galement des fonctionnalit\u00e9s natives pour cela dans WordPress.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-243315 size-full aligncenter\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/featured-video-settings.png\" alt=\"wordpress web core vitals\" width=\"520\" height=\"350\" \/><\/p>\n<figure id=\"attachment_243254\" aria-describedby=\"caption-attachment-243254\" style=\"width: 680px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-243254 size-full\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/wp-rocket-youtube-iframe.png\" alt=\"WP Rocket lazyload iframes video preview\" width=\"680\" height=\"338\" \/><figcaption id=\"caption-attachment-243254\" class=\"wp-caption-text\"><em>WP Rocket plugin<\/em><\/figcaption><\/figure>\n<p>S&#8217;assurer que les images sont de petite taille et compress\u00e9es est essentiel si vous avez des images de h\u00e9ros d&#8217;articles qui se chargent sur le mobile. Une bonne r\u00e8gle de base est de s&#8217;assurer que vous optimisez les images. Les images de moins de 100KB sont id\u00e9ales. <strong>L&#8217;utilisation d&#8217;un logiciel de compression ou d&#8217;un plugin\/extension ne suffira pas.<\/strong> Nous recommandons de les redimensionner et de les optimiser.<a href=\"\/?p=9452\"> Si cela est fait correctement, la plupart des images peuvent \u00eatre r\u00e9duites \u00e0 40 Ko ou moins.<\/a> N&#8217;oubliez pas que les fen\u00eatres de visualisation des t\u00e9l\u00e9phones portables sont petites, de sorte que les images n&#8217;ont pas besoin d&#8217;avoir une largeur sup\u00e9rieure \u00e0 650-800 pixels dans la plupart des cas. De plus, le fait que toutes les images de votre site web se chargent aux formats <a href=\"\/?p=16284\">NextGen est un autre avantage important pour l&#8217;optimisation de votre site web ; car il s&#8217;agit de fichiers de tr\u00e8s petite taille par d\u00e9faut. Cependant, tous les navigateurs ne peuvent pas les charger, ce n&#8217;est donc pas une excuse pour ne pas optimiser la taille des images.<\/a><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Comment_empecher_le_JavaScript_daugmenter_le_temps_du_FID\"><\/span>Comment emp\u00eacher le JavaScript d&#8217;augmenter le temps du FID<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Le moyen le plus simple d&#8217;emp\u00eacher le JavaScript d&#8217;augmenter le temps de chargement du FID est de\u00a0<strong>veiller \u00e0 ajouter le moins de Javascript possible dans la t\u00eate de votre site web qui retarde quoi que ce soit du chargement au visiteur.\u00a0<\/strong>Cela signifie qu&#8217;il faut \u00e9valuer tous les scripts ajout\u00e9s en t\u00eate de votre site web et tous les plugins actuellement utilis\u00e9s si vous \u00eates un site web WordPress. Plus le javascript est inutile, plus vous pouvez le supprimer de votre site web, mieux c&#8217;est. Il vaut la peine de regarder le code de votre site web ou la liste des plugins WordPress pour voir si certains d&#8217;entre eux pourraient \u00eatre d\u00e9sactiv\u00e9s ou report\u00e9s afin qu&#8217;ils ne soient actifs que sur les pages qu&#8217;ils utilisent.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Quelle_est_limportance_des_elements_vitaux_du_Web_pour_les_classements\"><\/span>Quelle est l&#8217;importance des \u00e9l\u00e9ments vitaux du Web pour les classements ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Pour \u00eatre r\u00e9aliste, la chose la plus importante pour Google est que le chercheur obtienne un bon r\u00e9sultat de recherche. C&#8217;est le signal de classement primordial de Google, la &#8220;satisfaction de la recherche&#8221;. L&#8217;UX pour Google est diff\u00e9rente de l&#8217;UX pour un \u00e9diteur. Une petite partie de ces donn\u00e9es peut inclure l&#8217;UX du site web sur lequel le visiteur atterrit, et c&#8217;est pourquoi Google va commencer \u00e0 utiliser Core Web Vitals comme un moyen de comprendre quels sites pourraient le faire mieux que d&#8217;autres.<\/p>\n<blockquote><p>Google utilisera ces donn\u00e9es lorsqu&#8217;il tentera d&#8217;\u00e9valuer deux r\u00e9sultats tr\u00e8s similaires. Si toutes les autres choses sont \u00e9gales en termes de contenu, Google utilisera probablement quelque chose comme le Core Web Vitals pour obtenir une d\u00e9termination ultime.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-243260\" src=\"https:\/\/www.ezoic.com\/fr-lang\/wp-content\/uploads\/2021\/08\/tiebreaker-core-web-vitals-1024x276.jpeg\" alt=\"Tiebreaker between results #7 &amp;amp ; #8. Il s'agit probablement d'un sc\u00e9nario futur dans lequel Google utilisera le Core Web Vitals\" width=\"1024\" height=\"276\" \/><\/p>\n<p>Vous pouvez consid\u00e9rer cela comme un bris d&#8217;\u00e9galit\u00e9. Qu&#8217;est-ce qui est le mieux : le r\u00e9sultat #7 ou 8 ? C&#8217;est tr\u00e8s probablement dans ce type de situation que Google pourrait appliquer les \u00c9l\u00e9ments vitaux du Web pour modifier le classement des r\u00e9sultats de recherche.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Optimiser_les_vitaux_du_Web_en_utilisant_Ezoic\"><\/span>Optimiser les vitaux du Web en utilisant Ezoic<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si vous \u00eates un utilisateur d&#8217;Ezoic, il y a de fortes chances que vous manquiez de pr\u00e9cieux conseils sur la fa\u00e7on d&#8217;optimiser votre site pour les vitaux du Web en utilisant Ezoic. <a href=\"https:\/\/www.youtube.com\/watch?v=zAArAiwoeLE&amp;list=PLt7J02h9vbOTTqtoxkSJ48x8tDfr3h65Y&amp;index=2ility.\" target=\"_blank\" rel=\"noopener\">Dans ce webinaire, nous couvrons tout, de l&#8217;int\u00e9gration aux param\u00e8tres sp\u00e9cifiques de votre compte<\/a> qui peuvent faire une diff\u00e9rence consid\u00e9rable dans la vitesse de votre site lorsque vous utilisez Ezoic.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Lamelioration_des_elements_vitaux_du_Web_de_base_favorisera-t-il_le_referencement\"><\/span>L&#8217;am\u00e9lioration des \u00e9l\u00e9ments vitaux du Web de base favorisera-t-il le r\u00e9f\u00e9rencement ?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Google pr\u00e9tend que certains des moyens d&#8217;am\u00e9liorer les \u00e9l\u00e9ments vitaux du Web de base sont de :<\/p>\n<ul>\n<li>R\u00e9duire la taille de votre page \u00e0 moins de 500KB.<\/li>\n<li>Limiter le nombre de pages ressources \u00e0 50.<\/li>\n<li>Envisager l&#8217;utilisation de l&#8217;AMP.<\/li>\n<\/ul>\n<p>Les \u00e9diteurs int\u00e9ress\u00e9s par <a href=\"\/?p=9293\">Google AMP<\/a> l&#8217;ont probablement d\u00e9j\u00e0 explor\u00e9. Mais il est int\u00e9ressant de noter que Google vante sa propre cr\u00e9ation, AMP, comme une solution \u00e0 un nouvel ensemble de mesures qu&#8217;il a lui-m\u00eame cr\u00e9\u00e9. <strong>Voil\u00e0 la v\u00e9rit\u00e9 :<\/strong>\u00a0ne vous focalisez pas trop sur ces mesures. Mais essayez de r\u00e9duire autant que possible la taille de votre site web. Si vous utilisez un plugin pour la modification CSS, un autre pour la compression des images et un autre pour la vitesse du site, essayez d&#8217;en trouver un qui fait tout, comme l&#8217;application\u00a0<a href=\"\/?page_id=26969\">Site Speed Accelerator<\/a>\u00a0d&#8217;Ezoic. Le plus important est de se concentrer sur la construction d&#8217;un meilleur site web et d&#8217;offrir une meilleure exp\u00e9rience \u00e0 l&#8217;utilisateur.\u00a0 Cela \u00e9clipsera tout ce sur quoi vous travaillez pour am\u00e9liorer ces mesures.<\/p>\n<blockquote><p><strong>Souvenez-vous :<\/strong>\u00a0concentrez-vous sur votre contenu. Si vous passez plus de temps sur ces \u00e9l\u00e9ments vitaux du Web que sur votre contenu, vous allez perdre votre temps et probablement faire plus de mal que de bien.<\/p>\n<p>Avez-vous des questions sur les \u00e9l\u00e9ments vitaux du Web de Google et sur la mani\u00e8re de les optimiser ? Faites-le moi savoir dans les commentaires.<\/p>\n<\/blockquote>\n<\/blockquote>\n<\/blockquote>\n<p>[\/et_pb_text][\/et_pb_column]<br \/>\n\t\t\t[\/et_pb_row]<br \/>\n\t\t[\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[et_pb_section admin_label=&#8221;section&#8221;] [et_pb_row admin_label=&#8221;row&#8221;] [et_pb_column type=&#8221;4_4&#8243;][et_pb_text admin_label=&#8221;Text&#8221;] Google a r\u00e9cemment annonc\u00e9 que les changements \u00e0 venir de la console de recherche en incorporant Core Web Vitals comme nouvelles mesures qui \u00e9largissent la fa\u00e7on dont Google mesure la vitesse et la performance des sites Web. Avec cette annonce, Google a fourni des informations sur un calendrier&hellip; <a class=\"more-link\" href=\"https:\/\/wp.ezoic.com\/fr-lang\/comment-optimiser-les-principaux-elements-vitaux-du-web-dans-la-console-de-recherche-google\/\">Continue reading <span class=\"screen-reader-text\">Comment optimiser les principaux \u00e9l\u00e9ments vitaux du Web dans la console de recherche Google<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1232,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","footnotes":""},"categories":[9],"tags":[8],"class_list":["post-1221","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-infrastructure-du-siteweb-amp-optimisation","tag-fr","entry"],"_links":{"self":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/1221"}],"collection":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/comments?post=1221"}],"version-history":[{"count":0,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/posts\/1221\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media\/1232"}],"wp:attachment":[{"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/media?parent=1221"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/categories?post=1221"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.ezoic.com\/fr-lang\/wp-json\/wp\/v2\/tags?post=1221"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}