{"version":"1.1","schema_version":"1.1.0","plugin_version":"1.1.2","url":"https://peakace.fr/blog/web-performance/comprendre-et-se-preparer-a-lupdate-page-experience-de-google/","llm_html_url":"https://peakace.fr/blog/web-performance/comprendre-et-se-preparer-a-lupdate-page-experience-de-google/llm","llm_json_url":"https://peakace.fr/blog/web-performance/comprendre-et-se-preparer-a-lupdate-page-experience-de-google/llm.json","manifest_url":"https://peakace.fr/llm-endpoints-manifest.json","language":"fr-FR","locale":"fr_FR","title":"CORE WEB VITALS : Comprendre et se préparer à l’update « page expérience » de Google","site":{"name":"Peak Ace","url":"https://peakace.fr/"},"author":{"id":17,"name":"Mathieu CHAPON","url":"https://peakace.fr/blog/author/searchforesight/"},"published_at":"2020-06-25T11:40:11+00:00","modified_at":"2025-12-08T11:25:17+00:00","word_count":2292,"reading_time_seconds":688,"summary":"C’est sans doute la news SEO la plus importante de ces dernières semaines&nbsp;: l’annonce d’un «&nbsp;nouveau&nbsp;» facteur de ranking pour [&hellip;]","summary_points":["C’est sans doute la news SEO la plus importante de ces dernières semaines&nbsp;: l’annonce d’un «&nbsp;nouveau&nbsp;» facteur de ranking pour l’année prochaine.","Le «&nbsp;page experience&nbsp;» ou en français la «&nbsp;convivialité des pages&nbsp;» sera un facteur de positionnement à ne pas négliger.","Pour relire l’annonce dans son intégralité sur CORE WEB VITALS, nous vous invitons à aller sur le Google Webmaster Central Blog.","Plutôt que repasser en détail l’annonce, nous allons essayer de voir quelles implications cela aura pour votre SEO et comment bien s’y préparer."],"topics":["Web Performance"],"entities":[],"entities_metadata":[{"id":495,"name":"Web Performance","slug":"web-performance","taxonomy":"category","count":16,"url":"https://peakace.fr/categories/web-performance/"}],"tags":["Web Performance"],"content_hash":"81f93e1b42c1dc1bc4d2d3ba76d488b6","plain_text":"C’est sans doute la news SEO la plus importante de ces dernières semaines&nbsp;: l’annonce d’un «&nbsp;nouveau&nbsp;» facteur de ranking pour l’année prochaine. Le «&nbsp;page experience&nbsp;» ou en français la «&nbsp;convivialité des pages&nbsp;» sera un facteur de positionnement à ne pas négliger.\n\n\n\nPour relire l’annonce dans son intégralité sur CORE WEB VITALS, nous vous invitons à aller sur le Google Webmaster Central Blog.\n\n\n\nPlutôt que repasser en détail l’annonce, nous allons essayer de voir quelles implications cela aura pour votre SEO et comment bien s’y préparer.\n\n\n\n\n    \n      \n        \n          Envie de gagner du temps ?\n\t\t  \n          Faites résumer cet article par l’IA en quelques secondes.\n        \n        \n          \n            Résumer avec l’IA\n          \n        \n      \n    La convivialité des pages, quel impact pour votre SEO\n\n\n\nIl aura fallu attendre 2020 pour que Google mette un coup de pied aux webmasters qui négligent depuis trop longtemps leurs performances web. , ils étaient souvent mis de côté. Le ratio effort/récompense n’étant pas suffisamment évident.\n\n\n\nDès l’année prochaine la question ne se posera sans doute plus autant&nbsp;: il va falloir améliorer l’expérience utilisateur et donc les temps de chargement&nbsp;!\n\n\n\nGoogle a simplifié le processus d’analyse en sélectionnant 3 critères qui, selon plusieurs études, s’imposent comme les plus importants pour une bonne expérience utilisateur. \n\n\n\nMaintenant les SEO et les webmasters ont un point de départ pour lancer leurs recommandations/améliorations&nbsp;: les Core Web Vitals.\n\n\n\n\n\n\n\nNous avons de la chance, ce n’est pas souvent que Google donne des indications aussi précises sur un de ses critères de classement accompagnées de guidelines circonstanciées. Ce simple aspect devrait influencer une bonne partie des sites à s’aligner au mieux sur les scores recommandés.\n\n\n\nQuels sites seront touchés&nbsp;?\n\n\n\nDans la théorie, tous. À page égale sur une requête, l’indicateur pourra faire la différence. Bien entendu, avoir un bon contenu, une page bien construite, de la popularité, etc. primera toujours mais la convivialité de la page ne sera pas sans incidence sur votre référencement.\n\n\n\nLes sites de contenu et plus particulièrement d’actualité devront faire attention à ce critère. Google l’a annoncé dans le même billet&nbsp;: les carrousels «&nbsp;À la une&nbsp;» seront accessibles hors AMP et la convivialité deviendra un critère important.\n\n\n\nExemple de top stories ou «&nbsp;à la une&nbsp;» sur Google.\n\n\n\nCela touche tout le site ou c’est page à page&nbsp;?\n\n\n\nLes deux. Comme dit précédemment, à page égale la convivialité pourra faire la différence, nous pourrions donc nous dire que la base c’est le page à page. En réalité cela n’a pas vraiment de sens.. Lorsqu’un template est optimisé, théoriquement l’essentiel des pages du template suivent.. Google l’annonce dans ses guidelines, pour respecter chacun des critères (LCP, FID, CLS) il faudra que 75% de votre audience se trouve dans les échelles données.Il faut donc intégrer le fait que ce nouveau critère de classement est global et s’applique à tout le site, même si bien entendu certaines pages ne mériteront pas autant d’efforts que d’autres.\n\n\n\nQuand s’occuper de ces optimisations&nbsp;?\n\n\n\nContrairement à la «&nbsp;speed update&nbsp;» de 2018, cette mise à jour n’aura pas pour objectif de «&nbsp;punir&nbsp;» les sites qui ne respectent pas ces critères. Pas de réel risque donc de prendre une «&nbsp;pénalité&nbsp;». Il est également peu probable que toutes vos positions changent dès la mise à jour, cela sera progressif et rappelons qu’il ne s’agit que d’un critère parmi beaucoup d’autres. Sa pondération n’est pas encore très claire.\n\n\n\nIl n’y a donc théoriquement pas d’urgence à travailler ces critères. Pour autant, est-ce une bonne idée pour autant de procrastiner&nbsp;? Probablement pas.\n\n\n\n, nous le savons d’expérience, les modifications peuvent prendre beaucoup de temps avant d’arriver à un résultat satisfaisant. Ce sont des problématiques techniques parfois complexes à résoudre selon l’infrastructure du site et ses dépendances.\n\n\n\nCela doit donc faire partie de vos chantiers fil rouge avec une priorité relativement élevée. À court terme l’idéal étant d’avoir à minima des temps estimés pour optimiser chaque point et les inclure petit à petit dans votre roadmap.\n\n\n\nComment optimiser la convivialité de son site&nbsp;?\n\n\n\nMaintenant que nous savons de quoi il en retourne, reste à optimiser vos pages pour qu’elles répondent aux critères relativement exigeants de Google.\n\n\n\n\n\n\n\nNous allons nous focaliser uniquement sur les Core Web Vitals, les autres critères étant suffisamment explicites.\n\n\n\nPour voir ou revoir ce à quoi correspondent exactement le LCP, le FID (ou TTB) et le CLS, nous vous invitons à lire cet article&nbsp;: https://peakace.fr/blog/seo/google-vers-un-web-plus-rapide-nouveaux-indicateurs-de-performance-et-mise-a-jour-lighthouse/\n\n\n\nOptimiser le Largest Contentful Paint (LCP)\n\n\n\nLe LCP c’est le temps d’affichage de l’élément le plus large se trouvant dans le viewport de l’utilisateur. Le plus souvent ce sera donc une image, une vidéo ou un bloc de texte.\n\n\n\nUn bon LCP se situe à 2,5 secondes maximum.\n\n\n\nPour l’optimiser il va donc falloir se poser la question par template&nbsp;: quel élément est le plus susceptible d’être pris en compte pour cette mesure et comment l’améliorer&nbsp;?\n\n\n\nUne étape facile puisqu’il suffit d’aller sur chacun de vos templates, d’attendre le chargement complet de la page, ou tout du moins de tous les éléments présents avant la ligne de flottaison.\n\n\n\nAttention tout de même, il faut bien attendre le chargement complet pour définir sur quel élément sera le LCP.\n\n\n\n&nbsp;https://web.dev/lcp/\n\n\n\nSur l’exemple ci-dessus c’est bien l’image qui sera considérée comme élément pour le LCP, alors que pendant le chargement d’autres éléments auraient pu être pris en compte.\n\n\n\nL’optimisation va donc dépendre en grande partie de cet élément mais pas seulement. Il faudra également optimiser&nbsp;:\n\n\n\n\nLes temps de réponse du serveur. Délivrer les bonnes ressources à temps et dans le bon ordre sera primordial&nbsp;! La mise en cache des deux côtés (serveur et client) sera également importante.\n\n\n\nLes fichiers JS et CSS qui bloquent l’affichage. C’est un classique mais il est toujours aussi important. Prenez garde aux ressources que vous chargez et dans quel ordre. Il n’est pas rare de voir des fichiers CSS ralentir considérablement les temps d’affichage à cause de leur complexité par exemple. Première piste sur [comment optimiser son CSS.\n\n\n\nL’appel et le chargement des images. Vous pouvez privilégier des formats légers, utiliser des CDN si nécessaire, utiliser le lazyloading, le jpeg progressive, bref vous avez l’embarras du choix&nbsp;! Vous pouvez également vous référer à cet article qui ressence plusieurs [bonnes pratiques pour le chargement des images. \n\n\n\nLa connexion aux third-party. Ce sont des cas plus spécifiques mais si un élément crucial de votre page est appelé depuis l’extérieur, mieux vaut prendre le temps d’optimiser ce genre d’appel.\n\n\n\n\nCes 4 éléments sont donc les premiers qu’il faudra essayer d’optimiser pour avoir un bon LCP.\n\n\n\nOptimiser le First Input Delay (FID)\n\n\n\nLe FID c’est la mesure entre le moment où un internaute cherche à faire sa première interaction avec une page et le moment où le navigateur peut effectivement répondre à son interaction (clic sur un lien par exemple). Cela ne prend pas en compte le zoom ou le scrolling sur la page.\n\n\n\nUn bon score si situera en dessous des 100 ms.\n\n\n\nIl s’agit du seul indicateur qui ne pourra se mesurer qu’avec des données de champs. Autrement dit, il faudra attendre qu’il y ait suffisamment d’utilisateurs sur votre site pour avoir une donnée viable. Cela s’explique notamment par le fait que certains utilisateurs n’auront pas d’interaction valide avec la page tandis que d’autres essaieront d’avoir des interactions lorsque ce n’est pas encore possible, etc.\n\n\n\nPour l’optimiser il faudra se focaliser sur&nbsp;:\n\n\n\n\nLa rationalisation et l’optimisation du «&nbsp;thread work&nbsp;». Il s’agit de la charge de travail du navigateur. Si celui-ci est occupé trop longtemps avec certaines actions, alors il ne pourra pas répondre à l’input de l’utilisateur.\n\n\n\n\nSelon les résultats sur vos pages, il faudra sans doute diminuer le nombre et la taille des fichiers javascript et/ou CSS.\n\n\n\n\nOptimiser son javascript. Ce sont souvent les ressources les plus longues à exécuter et cela vient souvent du fait que nous chargeons des morceaux de JS voire des fichiers entiers sans réelle utilité. Les optimisations les plus courantes seront&nbsp;: supprimer le code inutilisé, séparer le code en différents fichiers, minifier le code.\n\n\n\nRéduire au maximum l’impact des third-party. Comme dit plus haut, il faut faire attention à vos appels, à leur importance et s’assurer que des codes de tracking ou d’Ads ne viennent pas augmenter votre FID.\n\n\n\n\nPour cet indicateur, on se focalise moins sur ce qu’on va délivrer à l’internaute en affichage mais plutôt sur ce qui se passe derrière l’affichage. C’est le navigateur que l’on veut soulager.\n\n\n\nOptimiser le Cumulative Layout Shift (CLS)\n\n\n\nLe CLS mesure la stabilité de la page durant la navigation. C’est un indicateur qui a pour but d’éviter toute frustration de l’internaute lors de sa navigation (appuyer sur le mauvais bouton à cause d’un changement, avoir un morceau de texte qui disparaît, etc.).\n\n\n\nUn bon score se situera en dessous des 0.1.\n\n\n\nC’est l’indicateur qui nécessitera le plus de connaissances pour être optimisé. Il n’y a pas réellement de possibilité de contournement côté front comme avec les fichiers JS ou les images.\n\n\n\nLes optimisations les plus courantes sont&nbsp;:\n\n\n\n\nLes images sans taille. En responsive web design, une pratique courante consiste à donner des pourcentages aux images avec un width à 100% par exemple. Le principal inconvénient réside dans le fait que le navigateur ne peut pas allouer d’espace à l’image tant qu’elle n’est pas chargée. Ce qui peut avoir pour effet de faire bouger plusieurs éléments pour y insérer l’image.\n\n\n\n\nPour palier ce problème, il est recommandé d’utiliser les «&nbsp;aspect-ratio&nbsp;» qui permettent de donner implicitement l’information de la taille des images au navigateur.\n\n\n\n\n\n\n\n\nLes différents embeds sans taille. Cela concerne les publicités, les iframes, etc. Pour cela, pas de véritables recommandations techniques mais il faudra plutôt faire attention à réserver des emplacements pour vos embeds et éviter d’en avoir au-dessus de la ligne de flottaison.\n\n\n\nFaire attention aux contenus dynamiques. Tous les contenus du type «&nbsp;installation d’application&nbsp;» ou encore «&nbsp;newsletter&nbsp;» peuvent provoquer des changements dans la page, ce qui est facilement évitable&nbsp;!\n\n\n\nLe chargement des polices. Si elle est mal gérée, l’apparition de texte lorsque la police est chargée peut entrainer des changements dans la page. Pour cela mieux vaut utiliser une police de fallback avec l’attribut «&nbsp;font-display&nbsp;».\n\n\n\n\nComment monitorer ces indicateurs&nbsp;?\n\n\n\nIl y a deux manières de mesurer les web core vitals&nbsp;: les mesures de champs et les mesures de labo.\n\n\n\nComme nous l’avons dit plus haut, le FID n’est pas mesurable en laboratoire, il sera préférable dans la plupart des cas d’utiliser les 2 méthodes lorsque c’est possible.\n\n\n\nPour les tests de champs vous pouvez utiliser&nbsp;:\n\n\n\n\nLe Chrome User Experience Report. Vous pouvez même faire des dashboards simples ou personnalisés avec DataStudio et BigQuery.\n\n\n\nGoogle Pagespeed Insights. L’outil est mis à jour pour inclure les nouveaux indicateurs.\n\n\n\nLa Google Search Console. Elle intègre maintenant un rapport qui remplace le rapport sur la vitesse avec les différents indicateurs cités plus haut.\n\n\n\nL’extension Chrome «&nbsp;Web vitals&nbsp;».\n\n\n\n\nPour les tests de laboratoire&nbsp;:\n\n\n\n\nChrome DevTools.\n\n\n\nLighthouse.\n\n\n\n\nA noter que pour ces deux outils, le First Input Delay est remplacé par le Total Blocking Time, un indicateur très proche et qui nécessite le même type d’optimisation.\n\n\n\nVous avez également la possibilité&nbsp;de faire vos propres mesures en Javascript et construire vos propres dashboards.\n\n\n\nLe dashboard prédéfini pour les Core Web Vitals : https://g.co/chromeuxdash \n\n\n\nCe qu’il faut retenir (TL&nbsp;; DR)\n\n\n\nGoogle laisse le temps aux webmasters de travailler ces différents indicateurs mais selon votre site, vos contraintes, il peut être plus sage de commencer ces chantiers dès maintenant.\n\n\n\nTous les indicateurs vous demanderont une bonne quantité de travail mais aucun n’est insurmontable, Google a choisi des indicateurs relativement simples à appréhender et améliorer.\n\n\n\nLa convivialité des pages pourra être un critère déterminant selon vos ambitions et votre positionnement. Ne passez pas à côté&nbsp;!\n\n\n\nBaromètre Web Vitals\n\n\n\nEnfin, l&rsquo;équipe Data de Search-Foresight à créer un baromètre pour les principaux secteurs mise à jour mensuellement pour suivre les indicateurs des leaders régulièrement:\n\n\n\n\n\n\n\n\nBien entendu, si vous avez besoin du soutien d’une agence SEO pour vous faire des recommandations sur la convivialité de vos pages et prioriser vos chantiers, n’hésitez pas à utiliser le formulaire de contact&nbsp;!\n\n\n\n\nSource principale&nbsp;: https://web.dev/\n\n\n\n\nChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)","paragraphs":["C’est sans doute la news SEO la plus importante de ces dernières semaines&nbsp;: l’annonce d’un «&nbsp;nouveau&nbsp;» facteur de ranking pour l’année prochaine. Le «&nbsp;page experience&nbsp;» ou en français la «&nbsp;convivialité des pages&nbsp;» sera un facteur de positionnement à ne pas négliger.","Pour relire l’annonce dans son intégralité sur CORE WEB VITALS, nous vous invitons à aller sur le Google Webmaster Central Blog.","Plutôt que repasser en détail l’annonce, nous allons essayer de voir quelles implications cela aura pour votre SEO et comment bien s’y préparer.","Envie de gagner du temps ?\n\t\t  \n          Faites résumer cet article par l’IA en quelques secondes.\n        \n        \n          \n            Résumer avec l’IA\n          \n        \n      \n    La convivialité des pages, quel impact pour votre SEO","Il aura fallu attendre 2020 pour que Google mette un coup de pied aux webmasters qui négligent depuis trop longtemps leurs performances web. , ils étaient souvent mis de côté. Le ratio effort/récompense n’étant pas suffisamment évident.","Dès l’année prochaine la question ne se posera sans doute plus autant&nbsp;: il va falloir améliorer l’expérience utilisateur et donc les temps de chargement&nbsp;!","Google a simplifié le processus d’analyse en sélectionnant 3 critères qui, selon plusieurs études, s’imposent comme les plus importants pour une bonne expérience utilisateur.","Maintenant les SEO et les webmasters ont un point de départ pour lancer leurs recommandations/améliorations&nbsp;: les Core Web Vitals.","Nous avons de la chance, ce n’est pas souvent que Google donne des indications aussi précises sur un de ses critères de classement accompagnées de guidelines circonstanciées. Ce simple aspect devrait influencer une bonne partie des sites à s’aligner au mieux sur les scores recommandés.","Quels sites seront touchés&nbsp;?","Dans la théorie, tous. À page égale sur une requête, l’indicateur pourra faire la différence. Bien entendu, avoir un bon contenu, une page bien construite, de la popularité, etc. primera toujours mais la convivialité de la page ne sera pas sans incidence sur votre référencement.","Les sites de contenu et plus particulièrement d’actualité devront faire attention à ce critère. Google l’a annoncé dans le même billet&nbsp;: les carrousels «&nbsp;À la une&nbsp;» seront accessibles hors AMP et la convivialité deviendra un critère important.","Exemple de top stories ou «&nbsp;à la une&nbsp;» sur Google.","Cela touche tout le site ou c’est page à page&nbsp;?","Les deux. Comme dit précédemment, à page égale la convivialité pourra faire la différence, nous pourrions donc nous dire que la base c’est le page à page. En réalité cela n’a pas vraiment de sens.. Lorsqu’un template est optimisé, théoriquement l’essentiel des pages du template suivent.. Google l’annonce dans ses guidelines, pour respecter chacun des critères (LCP, FID, CLS) il faudra que 75% de votre audience se trouve dans les échelles données.Il faut donc intégrer le fait que ce nouveau critère de classement est global et s’applique à tout le site, même si bien entendu certaines pages ne mériteront pas autant d’efforts que d’autres.","Quand s’occuper de ces optimisations&nbsp;?","Contrairement à la «&nbsp;speed update&nbsp;» de 2018, cette mise à jour n’aura pas pour objectif de «&nbsp;punir&nbsp;» les sites qui ne respectent pas ces critères. Pas de réel risque donc de prendre une «&nbsp;pénalité&nbsp;». Il est également peu probable que toutes vos positions changent dès la mise à jour, cela sera progressif et rappelons qu’il ne s’agit que d’un critère parmi beaucoup d’autres. Sa pondération n’est pas encore très claire.","Il n’y a donc théoriquement pas d’urgence à travailler ces critères. Pour autant, est-ce une bonne idée pour autant de procrastiner&nbsp;? Probablement pas.",", nous le savons d’expérience, les modifications peuvent prendre beaucoup de temps avant d’arriver à un résultat satisfaisant. Ce sont des problématiques techniques parfois complexes à résoudre selon l’infrastructure du site et ses dépendances.","Cela doit donc faire partie de vos chantiers fil rouge avec une priorité relativement élevée. À court terme l’idéal étant d’avoir à minima des temps estimés pour optimiser chaque point et les inclure petit à petit dans votre roadmap.","Comment optimiser la convivialité de son site&nbsp;?","Maintenant que nous savons de quoi il en retourne, reste à optimiser vos pages pour qu’elles répondent aux critères relativement exigeants de Google.","Nous allons nous focaliser uniquement sur les Core Web Vitals, les autres critères étant suffisamment explicites.","Pour voir ou revoir ce à quoi correspondent exactement le LCP, le FID (ou TTB) et le CLS, nous vous invitons à lire cet article&nbsp;: https://peakace.fr/blog/seo/google-vers-un-web-plus-rapide-nouveaux-indicateurs-de-performance-et-mise-a-jour-lighthouse/","Optimiser le Largest Contentful Paint (LCP)","Le LCP c’est le temps d’affichage de l’élément le plus large se trouvant dans le viewport de l’utilisateur. Le plus souvent ce sera donc une image, une vidéo ou un bloc de texte.","Un bon LCP se situe à 2,5 secondes maximum.","Pour l’optimiser il va donc falloir se poser la question par template&nbsp;: quel élément est le plus susceptible d’être pris en compte pour cette mesure et comment l’améliorer&nbsp;?","Une étape facile puisqu’il suffit d’aller sur chacun de vos templates, d’attendre le chargement complet de la page, ou tout du moins de tous les éléments présents avant la ligne de flottaison.","Attention tout de même, il faut bien attendre le chargement complet pour définir sur quel élément sera le LCP.","&nbsp;https://web.dev/lcp/","Sur l’exemple ci-dessus c’est bien l’image qui sera considérée comme élément pour le LCP, alors que pendant le chargement d’autres éléments auraient pu être pris en compte.","L’optimisation va donc dépendre en grande partie de cet élément mais pas seulement. Il faudra également optimiser&nbsp;:","Les temps de réponse du serveur. Délivrer les bonnes ressources à temps et dans le bon ordre sera primordial&nbsp;! La mise en cache des deux côtés (serveur et client) sera également importante.","Les fichiers JS et CSS qui bloquent l’affichage. C’est un classique mais il est toujours aussi important. Prenez garde aux ressources que vous chargez et dans quel ordre. Il n’est pas rare de voir des fichiers CSS ralentir considérablement les temps d’affichage à cause de leur complexité par exemple. Première piste sur [comment optimiser son CSS.","L’appel et le chargement des images. Vous pouvez privilégier des formats légers, utiliser des CDN si nécessaire, utiliser le lazyloading, le jpeg progressive, bref vous avez l’embarras du choix&nbsp;! Vous pouvez également vous référer à cet article qui ressence plusieurs [bonnes pratiques pour le chargement des images.","La connexion aux third-party. Ce sont des cas plus spécifiques mais si un élément crucial de votre page est appelé depuis l’extérieur, mieux vaut prendre le temps d’optimiser ce genre d’appel.","Ces 4 éléments sont donc les premiers qu’il faudra essayer d’optimiser pour avoir un bon LCP.","Optimiser le First Input Delay (FID)","Le FID c’est la mesure entre le moment où un internaute cherche à faire sa première interaction avec une page et le moment où le navigateur peut effectivement répondre à son interaction (clic sur un lien par exemple). Cela ne prend pas en compte le zoom ou le scrolling sur la page.","Un bon score si situera en dessous des 100 ms.","Il s’agit du seul indicateur qui ne pourra se mesurer qu’avec des données de champs. Autrement dit, il faudra attendre qu’il y ait suffisamment d’utilisateurs sur votre site pour avoir une donnée viable. Cela s’explique notamment par le fait que certains utilisateurs n’auront pas d’interaction valide avec la page tandis que d’autres essaieront d’avoir des interactions lorsque ce n’est pas encore possible, etc.","Pour l’optimiser il faudra se focaliser sur&nbsp;:","La rationalisation et l’optimisation du «&nbsp;thread work&nbsp;». Il s’agit de la charge de travail du navigateur. Si celui-ci est occupé trop longtemps avec certaines actions, alors il ne pourra pas répondre à l’input de l’utilisateur.","Selon les résultats sur vos pages, il faudra sans doute diminuer le nombre et la taille des fichiers javascript et/ou CSS.","Optimiser son javascript. Ce sont souvent les ressources les plus longues à exécuter et cela vient souvent du fait que nous chargeons des morceaux de JS voire des fichiers entiers sans réelle utilité. Les optimisations les plus courantes seront&nbsp;: supprimer le code inutilisé, séparer le code en différents fichiers, minifier le code.","Réduire au maximum l’impact des third-party. Comme dit plus haut, il faut faire attention à vos appels, à leur importance et s’assurer que des codes de tracking ou d’Ads ne viennent pas augmenter votre FID.","Pour cet indicateur, on se focalise moins sur ce qu’on va délivrer à l’internaute en affichage mais plutôt sur ce qui se passe derrière l’affichage. C’est le navigateur que l’on veut soulager.","Optimiser le Cumulative Layout Shift (CLS)","Le CLS mesure la stabilité de la page durant la navigation. C’est un indicateur qui a pour but d’éviter toute frustration de l’internaute lors de sa navigation (appuyer sur le mauvais bouton à cause d’un changement, avoir un morceau de texte qui disparaît, etc.).","Un bon score se situera en dessous des 0.1.","C’est l’indicateur qui nécessitera le plus de connaissances pour être optimisé. Il n’y a pas réellement de possibilité de contournement côté front comme avec les fichiers JS ou les images.","Les optimisations les plus courantes sont&nbsp;:","Les images sans taille. En responsive web design, une pratique courante consiste à donner des pourcentages aux images avec un width à 100% par exemple. Le principal inconvénient réside dans le fait que le navigateur ne peut pas allouer d’espace à l’image tant qu’elle n’est pas chargée. Ce qui peut avoir pour effet de faire bouger plusieurs éléments pour y insérer l’image.","Pour palier ce problème, il est recommandé d’utiliser les «&nbsp;aspect-ratio&nbsp;» qui permettent de donner implicitement l’information de la taille des images au navigateur.","Les différents embeds sans taille. Cela concerne les publicités, les iframes, etc. Pour cela, pas de véritables recommandations techniques mais il faudra plutôt faire attention à réserver des emplacements pour vos embeds et éviter d’en avoir au-dessus de la ligne de flottaison.","Faire attention aux contenus dynamiques. Tous les contenus du type «&nbsp;installation d’application&nbsp;» ou encore «&nbsp;newsletter&nbsp;» peuvent provoquer des changements dans la page, ce qui est facilement évitable&nbsp;!","Le chargement des polices. Si elle est mal gérée, l’apparition de texte lorsque la police est chargée peut entrainer des changements dans la page. Pour cela mieux vaut utiliser une police de fallback avec l’attribut «&nbsp;font-display&nbsp;».","Comment monitorer ces indicateurs&nbsp;?","Il y a deux manières de mesurer les web core vitals&nbsp;: les mesures de champs et les mesures de labo.","Comme nous l’avons dit plus haut, le FID n’est pas mesurable en laboratoire, il sera préférable dans la plupart des cas d’utiliser les 2 méthodes lorsque c’est possible.","Pour les tests de champs vous pouvez utiliser&nbsp;:","Le Chrome User Experience Report. Vous pouvez même faire des dashboards simples ou personnalisés avec DataStudio et BigQuery.","Google Pagespeed Insights. L’outil est mis à jour pour inclure les nouveaux indicateurs.","La Google Search Console. Elle intègre maintenant un rapport qui remplace le rapport sur la vitesse avec les différents indicateurs cités plus haut.","L’extension Chrome «&nbsp;Web vitals&nbsp;».","Pour les tests de laboratoire&nbsp;:","Chrome DevTools.","Lighthouse.","A noter que pour ces deux outils, le First Input Delay est remplacé par le Total Blocking Time, un indicateur très proche et qui nécessite le même type d’optimisation.","Vous avez également la possibilité&nbsp;de faire vos propres mesures en Javascript et construire vos propres dashboards.","Le dashboard prédéfini pour les Core Web Vitals : https://g.co/chromeuxdash","Ce qu’il faut retenir (TL&nbsp;; DR)","Google laisse le temps aux webmasters de travailler ces différents indicateurs mais selon votre site, vos contraintes, il peut être plus sage de commencer ces chantiers dès maintenant.","Tous les indicateurs vous demanderont une bonne quantité de travail mais aucun n’est insurmontable, Google a choisi des indicateurs relativement simples à appréhender et améliorer.","La convivialité des pages pourra être un critère déterminant selon vos ambitions et votre positionnement. Ne passez pas à côté&nbsp;!","Baromètre Web Vitals","Enfin, l&rsquo;équipe Data de Search-Foresight à créer un baromètre pour les principaux secteurs mise à jour mensuellement pour suivre les indicateurs des leaders régulièrement:","Bien entendu, si vous avez besoin du soutien d’une agence SEO pour vous faire des recommandations sur la convivialité de vos pages et prioriser vos chantiers, n’hésitez pas à utiliser le formulaire de contact&nbsp;!","Source principale&nbsp;: https://web.dev/","ChatGPTPerplexityGoogle AIWhatsAppLinkedInX (Twitter)"],"content_blocks":[{"id":"paragraph-1","type":"core/paragraph","heading":"","plain_text":"C’est sans doute la news SEO la plus importante de ces dernières semaines&nbsp;: l’annonce d’un «&nbsp;nouveau&nbsp;» facteur de ranking pour l’année prochaine. Le «&nbsp;page experience&nbsp;» ou en français la «&nbsp;convivialité des pages&nbsp;» sera un facteur de positionnement à ne pas négliger.","html":"\n<p>C’est sans doute la news SEO la plus importante de ces dernières semaines&nbsp;: l’annonce d’un «&nbsp;nouveau&nbsp;» facteur de ranking pour l’année prochaine. Le «&nbsp;page experience&nbsp;» ou en français la «&nbsp;convivialité des pages&nbsp;» sera un facteur de positionnement à ne pas négliger.</p>\n"},{"id":"paragraph-2","type":"core/paragraph","heading":"","plain_text":"Pour relire l’annonce dans son intégralité sur CORE WEB VITALS, nous vous invitons à aller sur le Google Webmaster Central Blog.","html":"\n<p>Pour relire l’annonce dans son intégralité sur CORE WEB VITALS, nous vous invitons à aller sur le <a rel=\"noreferrer noopener\" href=\"https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html\" target=\"_blank\">Google Webmaster Central Blog</a>.</p>\n"},{"id":"paragraph-3","type":"core/paragraph","heading":"","plain_text":"Plutôt que repasser en détail l’annonce, nous allons essayer de voir quelles implications cela aura pour votre SEO et comment bien s’y préparer.","html":"\n<p>Plutôt que repasser en détail l’annonce, nous allons essayer de voir quelles implications cela aura pour votre SEO et comment bien s’y préparer.</p>\n"},{"id":"heading-4","type":"core/heading","heading":"La convivialité des pages, quel impact pour votre SEO","plain_text":"La convivialité des pages, quel impact pour votre SEO","html":"\n<h2 class=\"wp-block-heading\">La convivialité des pages, quel impact pour votre SEO</h2>\n"},{"id":"paragraph-5","type":"core/paragraph","heading":"","plain_text":"Il aura fallu attendre 2020 pour que Google mette un coup de pied aux webmasters qui négligent depuis trop longtemps leurs performances web. , ils étaient souvent mis de côté. Le ratio effort/récompense n’étant pas suffisamment évident.","html":"\n<p>Il aura fallu attendre 2020 pour que Google mette un coup de pied aux webmasters qui négligent depuis trop longtemps leurs performances web. , ils étaient souvent mis de côté. Le ratio effort/récompense n’étant pas suffisamment évident.</p>\n"},{"id":"paragraph-6","type":"core/paragraph","heading":"","plain_text":"Dès l’année prochaine la question ne se posera sans doute plus autant&nbsp;: il va falloir améliorer l’expérience utilisateur et donc les temps de chargement&nbsp;!","html":"\n<p>Dès l’année prochaine la question ne se posera sans doute plus autant&nbsp;: <strong>il va falloir améliorer l’expérience utilisateur et donc les temps de chargement&nbsp;!</strong></p>\n"},{"id":"paragraph-7","type":"core/paragraph","heading":"","plain_text":"Google a simplifié le processus d’analyse en sélectionnant 3 critères qui, selon plusieurs études, s’imposent comme les plus importants pour une bonne expérience utilisateur.","html":"\n<p>Google a simplifié le processus d’analyse en sélectionnant 3 critères qui, selon plusieurs études, s’imposent comme les plus importants pour une <a rel=\"noreferrer noopener\" href=\"https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html\" target=\"_blank\">bonne expérience utilisateur</a>. </p>\n"},{"id":"paragraph-8","type":"core/paragraph","heading":"","plain_text":"Maintenant les SEO et les webmasters ont un point de départ pour lancer leurs recommandations/améliorations&nbsp;: les Core Web Vitals.","html":"\n<p>Maintenant les SEO et les webmasters ont un point de départ pour lancer leurs recommandations/améliorations&nbsp;: les <strong>Core Web Vitals</strong>.</p>\n"},{"id":"paragraph-9","type":"core/paragraph","heading":"","plain_text":"Nous avons de la chance, ce n’est pas souvent que Google donne des indications aussi précises sur un de ses critères de classement accompagnées de guidelines circonstanciées. Ce simple aspect devrait influencer une bonne partie des sites à s’aligner au mieux sur les scores recommandés.","html":"\n<p>Nous avons de la chance, ce n’est pas souvent que Google donne des indications aussi précises sur un de ses critères de classement accompagnées de guidelines circonstanciées. Ce simple aspect devrait influencer une bonne partie des sites à s’aligner au mieux sur les scores recommandés.</p>\n"},{"id":"heading-10","type":"core/heading","heading":"Quels sites seront touchés&nbsp;?","plain_text":"Quels sites seront touchés&nbsp;?","html":"\n<h3 class=\"wp-block-heading\">Quels sites seront touchés&nbsp;?</h3>\n"},{"id":"paragraph-11","type":"core/paragraph","heading":"","plain_text":"Dans la théorie, tous. À page égale sur une requête, l’indicateur pourra faire la différence. Bien entendu, avoir un bon contenu, une page bien construite, de la popularité, etc. primera toujours mais la convivialité de la page ne sera pas sans incidence sur votre référencement.","html":"\n<p>Dans la théorie, tous. À page égale sur une requête, l’indicateur pourra faire la différence. Bien entendu, avoir un bon <a href=\"https://peakace.fr/expertises/strategies-de-contenu/\">contenu</a>, une page bien construite, de la popularité, etc. primera toujours mais la convivialité de la page ne sera pas sans incidence sur votre référencement.</p>\n"},{"id":"paragraph-12","type":"core/paragraph","heading":"","plain_text":"Les sites de contenu et plus particulièrement d’actualité devront faire attention à ce critère. Google l’a annoncé dans le même billet&nbsp;: les carrousels «&nbsp;À la une&nbsp;» seront accessibles hors AMP et la convivialité deviendra un critère important.","html":"\n<p>Les sites de contenu et plus particulièrement d’actualité devront faire attention à ce critère. Google l’a annoncé dans le même billet&nbsp;: <strong>les carrousels «&nbsp;À la une&nbsp;» seront accessibles hors AMP et la convivialité deviendra un critère important.</strong></p>\n"},{"id":"image-13","type":"core/image","heading":"","plain_text":"Exemple de top stories ou «&nbsp;à la une&nbsp;» sur Google.","html":"\n<figure class=\"wp-block-image size-large\"><img src=\"https://peakace.fr/wp-content/uploads/2020/06/carrousels-hors-AMP-1.jpg\" alt=\"\" class=\"wp-image-27843\" /><figcaption class=\"wp-element-caption\">E<em>xemple de top stories ou «&nbsp;à la une&nbsp;» sur Google.</em></figcaption></figure>\n"},{"id":"heading-14","type":"core/heading","heading":"Cela touche tout le site ou c’est page à page&nbsp;?","plain_text":"Cela touche tout le site ou c’est page à page&nbsp;?","html":"\n<h3 class=\"wp-block-heading\">Cela touche tout le site ou c’est page à page&nbsp;?</h3>\n"},{"id":"paragraph-15","type":"core/paragraph","heading":"","plain_text":"Les deux. Comme dit précédemment, à page égale la convivialité pourra faire la différence, nous pourrions donc nous dire que la base c’est le page à page. En réalité cela n’a pas vraiment de sens.. Lorsqu’un template est optimisé, théoriquement l’essentiel des pages du template suivent.. Google l’annonce dans ses guidelines, pour respecter chacun des critères (LCP, FID, CLS) il faudra que 75% de votre audience se trouve dans les échelles données.Il faut donc intégrer le fait que ce nouveau critère de classement est global et s’applique à tout le site, même si bien entendu certaines pages ne mériteront pas autant d’efforts que d’autres.","html":"\n<p>Les deux. Comme dit précédemment, à page égale la convivialité pourra faire la différence, nous pourrions donc nous dire que la base c’est le page à page. En réalité cela n’a pas vraiment de sens.<br>. Lorsqu’un template est optimisé, théoriquement l’essentiel des pages du template suivent.<br>. Google l’annonce dans ses guidelines, pour respecter chacun des critères (LCP, FID, CLS) il faudra que 75% de votre audience se trouve dans les échelles données.<br>Il faut donc intégrer le fait que ce nouveau critère de classement est global et s’applique à tout le site, même si bien entendu certaines pages ne mériteront pas autant d’efforts que d’autres.</p>\n"},{"id":"heading-16","type":"core/heading","heading":"Quand s’occuper de ces optimisations&nbsp;?","plain_text":"Quand s’occuper de ces optimisations&nbsp;?","html":"\n<h3 class=\"wp-block-heading\">Quand s’occuper de ces optimisations&nbsp;?</h3>\n"},{"id":"paragraph-17","type":"core/paragraph","heading":"","plain_text":"Contrairement à la «&nbsp;speed update&nbsp;» de 2018, cette mise à jour n’aura pas pour objectif de «&nbsp;punir&nbsp;» les sites qui ne respectent pas ces critères. Pas de réel risque donc de prendre une «&nbsp;pénalité&nbsp;». Il est également peu probable que toutes vos positions changent dès la mise à jour, cela sera progressif et rappelons qu’il ne s’agit que d’un critère parmi beaucoup d’autres. Sa pondération n’est pas encore très claire.","html":"\n<p>Contrairement à la «&nbsp;speed update&nbsp;» de 2018, cette mise à jour n’aura pas pour objectif de «&nbsp;punir&nbsp;» les sites qui ne respectent pas ces critères. Pas de réel risque donc de prendre une «&nbsp;pénalité&nbsp;». Il est également peu probable que toutes vos positions changent dès la mise à jour, cela sera progressif et rappelons qu’il ne s’agit que d’un critère parmi beaucoup d’autres. Sa pondération n’est pas encore très claire.</p>\n"},{"id":"paragraph-18","type":"core/paragraph","heading":"","plain_text":"Il n’y a donc théoriquement pas d’urgence à travailler ces critères. Pour autant, est-ce une bonne idée pour autant de procrastiner&nbsp;? Probablement pas.","html":"\n<p>Il n’y a donc théoriquement pas d’urgence à travailler ces critères. Pour autant, est-ce une bonne idée pour autant de procrastiner&nbsp;? Probablement pas.</p>\n"},{"id":"paragraph-19","type":"core/paragraph","heading":"","plain_text":", nous le savons d’expérience, les modifications peuvent prendre beaucoup de temps avant d’arriver à un résultat satisfaisant. Ce sont des problématiques techniques parfois complexes à résoudre selon l’infrastructure du site et ses dépendances.","html":"\n<p>, nous le savons d’expérience, les modifications peuvent prendre beaucoup de temps avant d’arriver à un résultat satisfaisant. Ce sont des problématiques techniques parfois complexes à résoudre selon l’infrastructure du site et ses dépendances.</p>\n"},{"id":"paragraph-20","type":"core/paragraph","heading":"","plain_text":"Cela doit donc faire partie de vos chantiers fil rouge avec une priorité relativement élevée. À court terme l’idéal étant d’avoir à minima des temps estimés pour optimiser chaque point et les inclure petit à petit dans votre roadmap.","html":"\n<p><strong>Cela doit donc faire partie de vos chantiers fil rouge avec une priorité relativement élevée</strong>. À court terme l’idéal étant d’avoir à minima des temps estimés pour optimiser chaque point et les inclure petit à petit dans votre roadmap.</p>\n"},{"id":"heading-21","type":"core/heading","heading":"Comment optimiser la convivialité de son site&nbsp;?","plain_text":"Comment optimiser la convivialité de son site&nbsp;?","html":"\n<h3 class=\"wp-block-heading\">Comment optimiser la convivialité de son site&nbsp;?</h3>\n"},{"id":"paragraph-22","type":"core/paragraph","heading":"","plain_text":"Maintenant que nous savons de quoi il en retourne, reste à optimiser vos pages pour qu’elles répondent aux critères relativement exigeants de Google.","html":"\n<p>Maintenant que nous savons de quoi il en retourne, reste à optimiser vos pages pour qu’elles répondent aux critères relativement exigeants de Google.</p>\n"},{"id":"paragraph-23","type":"core/paragraph","heading":"","plain_text":"Nous allons nous focaliser uniquement sur les Core Web Vitals, les autres critères étant suffisamment explicites.","html":"\n<p>Nous allons nous focaliser uniquement sur les Core Web Vitals, les autres critères étant suffisamment explicites.</p>\n"},{"id":"paragraph-24","type":"core/paragraph","heading":"","plain_text":"Pour voir ou revoir ce à quoi correspondent exactement le LCP, le FID (ou TTB) et le CLS, nous vous invitons à lire cet article&nbsp;: https://peakace.fr/blog/seo/google-vers-un-web-plus-rapide-nouveaux-indicateurs-de-performance-et-mise-a-jour-lighthouse/","html":"\n<p>Pour voir ou revoir ce à quoi correspondent exactement le LCP, le FID (ou TTB) et le CLS, nous vous invitons à lire cet article&nbsp;: <a href=\"https://peakace.fr/blog/seo/google-vers-un-web-plus-rapide-nouveaux-indicateurs-de-performance-et-mise-a-jour-lighthouse/\">https://peakace.fr/blog/seo/google-vers-un-web-plus-rapide-nouveaux-indicateurs-de-performance-et-mise-a-jour-lighthouse/</a></p>\n"},{"id":"heading-25","type":"core/heading","heading":"Optimiser le Largest Contentful Paint (LCP)","plain_text":"Optimiser le Largest Contentful Paint (LCP)","html":"\n<h4 class=\"wp-block-heading\">Optimiser le Largest Contentful Paint (LCP)</h4>\n"},{"id":"paragraph-26","type":"core/paragraph","heading":"","plain_text":"Le LCP c’est le temps d’affichage de l’élément le plus large se trouvant dans le viewport de l’utilisateur. Le plus souvent ce sera donc une image, une vidéo ou un bloc de texte.","html":"\n<p>Le LCP c’est le temps d’affichage de l’élément le plus large se trouvant dans le viewport de l’utilisateur. Le plus souvent ce sera donc une image, une vidéo ou un bloc de texte.</p>\n"},{"id":"paragraph-27","type":"core/paragraph","heading":"","plain_text":"Un bon LCP se situe à 2,5 secondes maximum.","html":"\n<p>Un bon LCP se situe à 2,5 secondes maximum.</p>\n"},{"id":"paragraph-28","type":"core/paragraph","heading":"","plain_text":"Pour l’optimiser il va donc falloir se poser la question par template&nbsp;: quel élément est le plus susceptible d’être pris en compte pour cette mesure et comment l’améliorer&nbsp;?","html":"\n<p>Pour l’optimiser il va donc falloir se poser la question par template&nbsp;: quel élément est le plus susceptible d’être pris en compte pour cette mesure et comment l’améliorer&nbsp;?</p>\n"},{"id":"paragraph-29","type":"core/paragraph","heading":"","plain_text":"Une étape facile puisqu’il suffit d’aller sur chacun de vos templates, d’attendre le chargement complet de la page, ou tout du moins de tous les éléments présents avant la ligne de flottaison.","html":"\n<p>Une étape facile puisqu’il suffit d’aller sur chacun de vos templates, d’attendre le chargement complet de la page, ou tout du moins de tous les éléments présents avant la ligne de flottaison.</p>\n"},{"id":"paragraph-30","type":"core/paragraph","heading":"","plain_text":"Attention tout de même, il faut bien attendre le chargement complet pour définir sur quel élément sera le LCP.","html":"\n<p>Attention tout de même, il faut bien attendre le chargement complet pour définir sur quel élément sera le LCP.</p>\n"},{"id":"image-31","type":"core/image","heading":"","plain_text":"&nbsp;https://web.dev/lcp/","html":"\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"https://peakace.fr/wp-content/uploads/2020/06/LCP-1-1024x397.png\" alt=\"\" class=\"wp-image-27846\" style=\"width:768px;height:298px\" /><figcaption class=\"wp-element-caption\"><em>&nbsp;</em><a href=\"https://web.dev/lcp/\"><em>https://web.dev/lcp/</em></a></figcaption></figure>\n"},{"id":"paragraph-32","type":"core/paragraph","heading":"","plain_text":"Sur l’exemple ci-dessus c’est bien l’image qui sera considérée comme élément pour le LCP, alors que pendant le chargement d’autres éléments auraient pu être pris en compte.","html":"\n<p>Sur l’exemple ci-dessus c’est bien l’image qui sera considérée comme élément pour le LCP, alors que pendant le chargement d’autres éléments auraient pu être pris en compte.</p>\n"},{"id":"paragraph-33","type":"core/paragraph","heading":"","plain_text":"L’optimisation va donc dépendre en grande partie de cet élément mais pas seulement. Il faudra également optimiser&nbsp;:","html":"\n<p>L’optimisation va donc dépendre en grande partie de cet élément mais pas seulement. Il faudra également optimiser&nbsp;:</p>\n"},{"id":"list-34","type":"core/list","heading":"","plain_text":"Les temps de réponse du serveur. Délivrer les bonnes ressources à temps et dans le bon ordre sera primordial&nbsp;! La mise en cache des deux côtés (serveur et client) sera également importante.\n\n\n\nLes fichiers JS et CSS qui bloquent l’affichage. C’est un classique mais il est toujours aussi important. Prenez garde aux ressources que vous chargez et dans quel ordre. Il n’est pas rare de voir des fichiers CSS ralentir considérablement les temps d’affichage à cause de leur complexité par exemple. Première piste sur [comment optimiser son CSS.\n\n\n\nL’appel et le chargement des images. Vous pouvez privilégier des formats légers, utiliser des CDN si nécessaire, utiliser le lazyloading, le jpeg progressive, bref vous avez l’embarras du choix&nbsp;! Vous pouvez également vous référer à cet article qui ressence plusieurs [bonnes pratiques pour le chargement des images. \n\n\n\nLa connexion aux third-party. Ce sont des cas plus spécifiques mais si un élément crucial de votre page est appelé depuis l’extérieur, mieux vaut prendre le temps d’optimiser ce genre d’appel.","html":"\n<ul class=\"wp-block-list\">\n<li><strong>Les temps de réponse du serveur</strong>. Délivrer les bonnes ressources à temps et dans le bon ordre sera primordial&nbsp;! La mise en cache des deux côtés (serveur et client) sera également importante.</li>\n\n\n\n<li><strong>Les <a href=\"https://peakace.fr/blog/seo/google-met-en-cache-vos-fichiers-css-et-javascript-pendant-longtemps/\">fichiers JS et CSS</a> qui bloquent l’affichage</strong>. C’est un classique mais il est toujours aussi important. Prenez garde aux ressources que vous chargez et dans quel ordre. Il n’est pas rare de voir des fichiers CSS ralentir considérablement les temps d’affichage à cause de leur complexité par exemple. Première piste sur [comment optimiser son <a href=\"https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS\">CSS</a>.</li>\n\n\n\n<li><strong>L’appel et le chargement des images. </strong>Vous pouvez privilégier des formats légers, utiliser des CDN si nécessaire, utiliser le lazyloading, le jpeg progressive, bref vous avez l’embarras du choix&nbsp;! Vous pouvez également vous référer à cet article qui ressence plusieurs [<a href=\"https://peakace.fr/blog/seo/images-comment-ameliorer-vos-performances-de-chargement-acte-1/\">bonnes pratiques pour le chargement des images</a>. </li>\n\n\n\n<li><strong>La connexion aux third-party. </strong>Ce sont des cas plus spécifiques mais si un élément crucial de votre page est appelé depuis l’extérieur, mieux vaut prendre le temps d’optimiser ce genre d’appel.</li>\n</ul>\n"},{"id":"paragraph-35","type":"core/paragraph","heading":"","plain_text":"Ces 4 éléments sont donc les premiers qu’il faudra essayer d’optimiser pour avoir un bon LCP.","html":"\n<p>Ces 4 éléments sont donc les premiers qu’il faudra essayer d’optimiser pour avoir un bon LCP.</p>\n"},{"id":"heading-36","type":"core/heading","heading":"Optimiser le First Input Delay (FID)","plain_text":"Optimiser le First Input Delay (FID)","html":"\n<h4 class=\"wp-block-heading\">Optimiser le First Input Delay (FID)</h4>\n"},{"id":"paragraph-37","type":"core/paragraph","heading":"","plain_text":"Le FID c’est la mesure entre le moment où un internaute cherche à faire sa première interaction avec une page et le moment où le navigateur peut effectivement répondre à son interaction (clic sur un lien par exemple). Cela ne prend pas en compte le zoom ou le scrolling sur la page.","html":"\n<p>Le FID c’est la mesure entre le moment où un internaute cherche à faire sa première interaction avec une page et le moment où le navigateur peut effectivement répondre à son interaction (clic sur un lien par exemple). Cela ne prend pas en compte le zoom ou le scrolling sur la page.</p>\n"},{"id":"paragraph-38","type":"core/paragraph","heading":"","plain_text":"Un bon score si situera en dessous des 100 ms.","html":"\n<p>Un bon score si situera en dessous des 100 ms.</p>\n"},{"id":"paragraph-39","type":"core/paragraph","heading":"","plain_text":"Il s’agit du seul indicateur qui ne pourra se mesurer qu’avec des données de champs. Autrement dit, il faudra attendre qu’il y ait suffisamment d’utilisateurs sur votre site pour avoir une donnée viable. Cela s’explique notamment par le fait que certains utilisateurs n’auront pas d’interaction valide avec la page tandis que d’autres essaieront d’avoir des interactions lorsque ce n’est pas encore possible, etc.","html":"\n<p>Il s’agit du seul indicateur qui ne pourra se mesurer qu’avec des données de champs. Autrement dit, il faudra attendre qu’il y ait suffisamment d’utilisateurs sur votre site pour avoir une donnée viable. Cela s’explique notamment par le fait que certains utilisateurs n’auront pas d’interaction valide avec la page tandis que d’autres essaieront d’avoir des interactions lorsque ce n’est pas encore possible, etc.</p>\n"},{"id":"paragraph-40","type":"core/paragraph","heading":"","plain_text":"Pour l’optimiser il faudra se focaliser sur&nbsp;:","html":"\n<p>Pour l’optimiser il faudra se focaliser sur&nbsp;:</p>\n"},{"id":"list-41","type":"core/list","heading":"","plain_text":"La rationalisation et l’optimisation du «&nbsp;thread work&nbsp;». Il s’agit de la charge de travail du navigateur. Si celui-ci est occupé trop longtemps avec certaines actions, alors il ne pourra pas répondre à l’input de l’utilisateur.","html":"\n<ul class=\"wp-block-list\">\n<li><strong>La rationalisation et l’optimisation du «&nbsp;thread work&nbsp;». </strong>Il s’agit de la charge de travail du navigateur. Si celui-ci est occupé trop longtemps avec certaines actions, alors il ne pourra pas répondre à l’input de l’utilisateur.</li>\n</ul>\n"},{"id":"image-42","type":"core/image","heading":"","plain_text":"Selon les résultats sur vos pages, il faudra sans doute diminuer le nombre et la taille des fichiers javascript et/ou CSS.","html":"\n<figure class=\"wp-block-image size-large\"><img src=\"https://peakace.fr/wp-content/uploads/2020/06/thread-work.png\" alt=\"\" class=\"wp-image-27847\" /><figcaption class=\"wp-element-caption\">Selon les résultats sur vos pages, il faudra sans doute diminuer le nombre et la taille des fichiers javascript et/ou CSS.</figcaption></figure>\n"},{"id":"list-43","type":"core/list","heading":"","plain_text":"Optimiser son javascript. Ce sont souvent les ressources les plus longues à exécuter et cela vient souvent du fait que nous chargeons des morceaux de JS voire des fichiers entiers sans réelle utilité. Les optimisations les plus courantes seront&nbsp;: supprimer le code inutilisé, séparer le code en différents fichiers, minifier le code.\n\n\n\nRéduire au maximum l’impact des third-party. Comme dit plus haut, il faut faire attention à vos appels, à leur importance et s’assurer que des codes de tracking ou d’Ads ne viennent pas augmenter votre FID.","html":"\n<ul class=\"wp-block-list\">\n<li><strong>Optimiser son javascript. </strong>Ce sont souvent les ressources les plus longues à exécuter et cela vient souvent du fait que nous chargeons des morceaux de JS voire des fichiers entiers sans réelle utilité. Les optimisations les plus courantes seront&nbsp;: supprimer le code inutilisé, séparer le code en différents fichiers, minifier le code.</li>\n\n\n\n<li><strong>Réduire au maximum l’impact des third-party. </strong>Comme dit plus haut, il faut faire attention à vos appels, à leur importance et s’assurer que des codes de tracking ou d’Ads ne viennent pas augmenter votre FID.</li>\n</ul>\n"},{"id":"paragraph-44","type":"core/paragraph","heading":"","plain_text":"Pour cet indicateur, on se focalise moins sur ce qu’on va délivrer à l’internaute en affichage mais plutôt sur ce qui se passe derrière l’affichage. C’est le navigateur que l’on veut soulager.","html":"\n<p>Pour cet indicateur, on se focalise moins sur ce qu’on va délivrer à l’internaute en affichage mais plutôt sur ce qui se passe derrière l’affichage. C’est le navigateur que l’on veut soulager.</p>\n"},{"id":"heading-45","type":"core/heading","heading":"Optimiser le Cumulative Layout Shift (CLS)","plain_text":"Optimiser le Cumulative Layout Shift (CLS)","html":"\n<h4 class=\"wp-block-heading\">Optimiser le Cumulative Layout Shift (CLS)</h4>\n"},{"id":"paragraph-46","type":"core/paragraph","heading":"","plain_text":"Le CLS mesure la stabilité de la page durant la navigation. C’est un indicateur qui a pour but d’éviter toute frustration de l’internaute lors de sa navigation (appuyer sur le mauvais bouton à cause d’un changement, avoir un morceau de texte qui disparaît, etc.).","html":"\n<p>Le CLS mesure la stabilité de la page durant la navigation. C’est un indicateur qui a pour but d’éviter toute frustration de l’internaute lors de sa navigation (appuyer sur le mauvais bouton à cause d’un changement, avoir un morceau de texte qui disparaît, etc.).</p>\n"},{"id":"paragraph-47","type":"core/paragraph","heading":"","plain_text":"Un bon score se situera en dessous des 0.1.","html":"\n<p>Un bon score se situera en dessous des 0.1.</p>\n"},{"id":"paragraph-48","type":"core/paragraph","heading":"","plain_text":"C’est l’indicateur qui nécessitera le plus de connaissances pour être optimisé. Il n’y a pas réellement de possibilité de contournement côté front comme avec les fichiers JS ou les images.","html":"\n<p>C’est l’indicateur qui nécessitera le plus de connaissances pour être optimisé. Il n’y a pas réellement de possibilité de contournement côté front comme avec les fichiers JS ou les images.</p>\n"},{"id":"paragraph-49","type":"core/paragraph","heading":"","plain_text":"Les optimisations les plus courantes sont&nbsp;:","html":"\n<p>Les optimisations les plus courantes sont&nbsp;:</p>\n"},{"id":"list-50","type":"core/list","heading":"","plain_text":"Les images sans taille. En responsive web design, une pratique courante consiste à donner des pourcentages aux images avec un width à 100% par exemple. Le principal inconvénient réside dans le fait que le navigateur ne peut pas allouer d’espace à l’image tant qu’elle n’est pas chargée. Ce qui peut avoir pour effet de faire bouger plusieurs éléments pour y insérer l’image.","html":"\n<ul class=\"wp-block-list\">\n<li><strong>Les images sans taille. </strong>En responsive web design, une pratique courante consiste à donner des pourcentages aux images avec un width à 100% par exemple. Le principal inconvénient réside dans le fait que le navigateur ne peut pas allouer d’espace à l’image tant qu’elle n’est pas chargée. Ce qui peut avoir pour effet de faire bouger plusieurs éléments pour y insérer l’image.</li>\n</ul>\n"},{"id":"paragraph-51","type":"core/paragraph","heading":"","plain_text":"Pour palier ce problème, il est recommandé d’utiliser les «&nbsp;aspect-ratio&nbsp;» qui permettent de donner implicitement l’information de la taille des images au navigateur.","html":"\n<p>Pour palier ce problème, il est recommandé d’utiliser les «&nbsp;aspect-ratio&nbsp;» qui permettent de donner implicitement l’information de la taille des images au navigateur.</p>\n"},{"id":"list-52","type":"core/list","heading":"","plain_text":"Les différents embeds sans taille. Cela concerne les publicités, les iframes, etc. Pour cela, pas de véritables recommandations techniques mais il faudra plutôt faire attention à réserver des emplacements pour vos embeds et éviter d’en avoir au-dessus de la ligne de flottaison.\n\n\n\nFaire attention aux contenus dynamiques. Tous les contenus du type «&nbsp;installation d’application&nbsp;» ou encore «&nbsp;newsletter&nbsp;» peuvent provoquer des changements dans la page, ce qui est facilement évitable&nbsp;!\n\n\n\nLe chargement des polices. Si elle est mal gérée, l’apparition de texte lorsque la police est chargée peut entrainer des changements dans la page. Pour cela mieux vaut utiliser une police de fallback avec l’attribut «&nbsp;font-display&nbsp;».","html":"\n<ul class=\"wp-block-list\">\n<li><strong>Les différents embeds sans taille. </strong>Cela concerne les publicités, les iframes, etc. Pour cela, pas de véritables recommandations techniques mais il faudra plutôt faire attention à réserver des emplacements pour vos embeds et éviter d’en avoir au-dessus de la ligne de flottaison.</li>\n\n\n\n<li><strong>Faire attention aux contenus dynamiques.</strong> Tous les contenus du type «&nbsp;installation d’application&nbsp;» ou encore «&nbsp;newsletter&nbsp;» peuvent provoquer des changements dans la page, ce qui est facilement évitable&nbsp;!</li>\n\n\n\n<li><strong>Le chargement des polices.</strong> Si elle est mal gérée, l’apparition de texte lorsque la police est chargée peut entrainer des changements dans la page. Pour cela mieux vaut utiliser une police de fallback avec l’attribut «&nbsp;font-display&nbsp;».</li>\n</ul>\n"},{"id":"heading-53","type":"core/heading","heading":"Comment monitorer ces indicateurs&nbsp;?","plain_text":"Comment monitorer ces indicateurs&nbsp;?","html":"\n<h3 class=\"wp-block-heading\">Comment monitorer ces indicateurs&nbsp;?</h3>\n"},{"id":"paragraph-54","type":"core/paragraph","heading":"","plain_text":"Il y a deux manières de mesurer les web core vitals&nbsp;: les mesures de champs et les mesures de labo.","html":"\n<p>Il y a deux manières de mesurer les web core vitals&nbsp;: les mesures de champs et les mesures de labo.</p>\n"},{"id":"paragraph-55","type":"core/paragraph","heading":"","plain_text":"Comme nous l’avons dit plus haut, le FID n’est pas mesurable en laboratoire, il sera préférable dans la plupart des cas d’utiliser les 2 méthodes lorsque c’est possible.","html":"\n<p>Comme nous l’avons dit plus haut, le FID n’est pas mesurable en laboratoire, il sera préférable dans la plupart des cas d’utiliser les 2 méthodes lorsque c’est possible.</p>\n"},{"id":"paragraph-56","type":"core/paragraph","heading":"","plain_text":"Pour les tests de champs vous pouvez utiliser&nbsp;:","html":"\n<p>Pour les tests de champs vous pouvez utiliser&nbsp;:</p>\n"},{"id":"list-57","type":"core/list","heading":"","plain_text":"Le Chrome User Experience Report. Vous pouvez même faire des dashboards simples ou personnalisés avec DataStudio et BigQuery.\n\n\n\nGoogle Pagespeed Insights. L’outil est mis à jour pour inclure les nouveaux indicateurs.\n\n\n\nLa Google Search Console. Elle intègre maintenant un rapport qui remplace le rapport sur la vitesse avec les différents indicateurs cités plus haut.\n\n\n\nL’extension Chrome «&nbsp;Web vitals&nbsp;».","html":"\n<ul class=\"wp-block-list\">\n<li><strong>Le Chrome User Experience Report</strong>. Vous pouvez même faire des dashboards simples ou personnalisés avec DataStudio et BigQuery.</li>\n\n\n\n<li><strong>Google Pagespeed Insights</strong>. L’outil est mis à jour pour inclure les nouveaux indicateurs.</li>\n\n\n\n<li><strong>La <a href=\"https://peakace.fr/blog/seo/definitions-quest-ce-que-la-google-search-console/\">Google Search Console</a></strong>. Elle intègre maintenant un rapport qui remplace le rapport sur la vitesse avec les différents indicateurs cités plus haut.</li>\n\n\n\n<li><strong>L’extension <a href=\"https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome «&nbsp;Web vitals&nbsp;»</a>.</strong></li>\n</ul>\n"},{"id":"paragraph-58","type":"core/paragraph","heading":"","plain_text":"Pour les tests de laboratoire&nbsp;:","html":"\n<p>Pour les tests de laboratoire&nbsp;:</p>\n"},{"id":"list-59","type":"core/list","heading":"","plain_text":"Chrome DevTools.\n\n\n\nLighthouse.","html":"\n<ul class=\"wp-block-list\">\n<li><strong>Chrome DevTools</strong>.</li>\n\n\n\n<li><strong>Lighthouse</strong>.</li>\n</ul>\n"},{"id":"paragraph-60","type":"core/paragraph","heading":"","plain_text":"A noter que pour ces deux outils, le First Input Delay est remplacé par le Total Blocking Time, un indicateur très proche et qui nécessite le même type d’optimisation.","html":"\n<p>A noter que pour ces deux outils, le First Input Delay est remplacé par le Total Blocking Time, un indicateur très proche et qui nécessite le même type d’optimisation.</p>\n"},{"id":"paragraph-61","type":"core/paragraph","heading":"","plain_text":"Vous avez également la possibilité&nbsp;de faire vos propres mesures en Javascript et construire vos propres dashboards.","html":"\n<p>Vous avez également la possibilité&nbsp;de faire vos propres mesures en Javascript et construire vos propres dashboards.</p>\n"},{"id":"image-62","type":"core/image","heading":"","plain_text":"Le dashboard prédéfini pour les Core Web Vitals : https://g.co/chromeuxdash","html":"\n<figure class=\"wp-block-image size-large is-resized\"><img src=\"https://peakace.fr/wp-content/uploads/2020/06/dashboard-core-web-vitals-904x1024.png\" alt=\"\" class=\"wp-image-27849\" style=\"width:678px;height:768px\" /><figcaption class=\"wp-element-caption\">Le dashboard prédéfini pour les Core Web Vitals : <a href=\"https://g.co/chromeuxdash\">https://g.co/chromeuxdash</a> </figcaption></figure>\n"},{"id":"heading-63","type":"core/heading","heading":"Ce qu’il faut retenir (TL&nbsp;; DR)","plain_text":"Ce qu’il faut retenir (TL&nbsp;; DR)","html":"\n<h3 class=\"wp-block-heading\">Ce qu’il faut retenir (TL&nbsp;; DR)</h3>\n"},{"id":"paragraph-64","type":"core/paragraph","heading":"","plain_text":"Google laisse le temps aux webmasters de travailler ces différents indicateurs mais selon votre site, vos contraintes, il peut être plus sage de commencer ces chantiers dès maintenant.","html":"\n<p>Google laisse le temps aux webmasters de travailler ces différents indicateurs mais selon votre site, vos contraintes, il peut être plus sage de commencer ces chantiers dès maintenant.</p>\n"},{"id":"paragraph-65","type":"core/paragraph","heading":"","plain_text":"Tous les indicateurs vous demanderont une bonne quantité de travail mais aucun n’est insurmontable, Google a choisi des indicateurs relativement simples à appréhender et améliorer.","html":"\n<p>Tous les indicateurs vous demanderont une bonne quantité de travail mais aucun n’est insurmontable, Google a choisi des indicateurs relativement simples à appréhender et améliorer.</p>\n"},{"id":"paragraph-66","type":"core/paragraph","heading":"","plain_text":"La convivialité des pages pourra être un critère déterminant selon vos ambitions et votre positionnement. Ne passez pas à côté&nbsp;!","html":"\n<p>La convivialité des pages pourra être un critère déterminant selon vos ambitions et votre <a href=\"https://peakace.fr/blog/seo/7-outils-pour-suivre-le-positionnement-de-son-site-sur-google/\">positionnement</a>. Ne passez pas à côté&nbsp;!</p>\n"},{"id":"heading-67","type":"core/heading","heading":"Baromètre Web Vitals","plain_text":"Baromètre Web Vitals","html":"\n<h2 class=\"wp-block-heading\">Baromètre Web Vitals</h2>\n"},{"id":"paragraph-68","type":"core/paragraph","heading":"","plain_text":"Enfin, l'équipe Data de Search-Foresight à créer un baromètre pour les principaux secteurs mise à jour mensuellement pour suivre les indicateurs des leaders régulièrement:","html":"\n<p>Enfin, l'équipe Data de Search-Foresight à créer un <a href=\"https://datastudio.google.com/s/kzF-dGdn_hw\" target=\"_blank\" aria-label=\"undefined (s’ouvre dans un nouvel onglet)\" rel=\"noreferrer noopener\">baromètre pour les principaux secteurs</a> mise à jour mensuellement pour suivre les indicateurs des leaders régulièrement:</p>\n"},{"id":"quote-69","type":"core/quote","heading":"","plain_text":"Bien entendu, si vous avez besoin du soutien d’une agence SEO pour vous faire des recommandations sur la convivialité de vos pages et prioriser vos chantiers, n’hésitez pas à utiliser le formulaire de contact&nbsp;!","html":"\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Bien entendu, si vous avez besoin du soutien d’une <a href=\"https://peakace.fr/expertises/seo/\">agence SEO</a> pour vous faire des recommandations sur la convivialité de vos pages et prioriser vos chantiers, n’hésitez pas à utiliser le formulaire de contact&nbsp;!</p>\n</blockquote>\n"},{"id":"paragraph-70","type":"core/paragraph","heading":"","plain_text":"Source principale&nbsp;: https://web.dev/","html":"\n<p><em>Source principale&nbsp;: </em><a href=\"https://web.dev/\"><em>https://web.dev/</em></a></p>\n"}],"sections":[{"id":"paragraph-1","heading":"Paragraph","content":"C’est sans doute la news SEO la plus importante de ces dernières semaines&nbsp;: l’annonce d’un «&nbsp;nouveau&nbsp;» facteur de ranking pour l’année prochaine. Le «&nbsp;page experience&nbsp;» ou en français la «&nbsp;convivialité des pages&nbsp;» sera un facteur de positionnement à ne pas négliger."},{"id":"paragraph-2","heading":"Paragraph","content":"Pour relire l’annonce dans son intégralité sur CORE WEB VITALS, nous vous invitons à aller sur le Google Webmaster Central Blog."},{"id":"paragraph-3","heading":"Paragraph","content":"Plutôt que repasser en détail l’annonce, nous allons essayer de voir quelles implications cela aura pour votre SEO et comment bien s’y préparer."},{"id":"heading-4","heading":"La convivialité des pages, quel impact pour votre SEO","content":"La convivialité des pages, quel impact pour votre SEO"},{"id":"paragraph-5","heading":"Paragraph","content":"Il aura fallu attendre 2020 pour que Google mette un coup de pied aux webmasters qui négligent depuis trop longtemps leurs performances web. , ils étaient souvent mis de côté. Le ratio effort/récompense n’étant pas suffisamment évident."},{"id":"paragraph-6","heading":"Paragraph","content":"Dès l’année prochaine la question ne se posera sans doute plus autant&nbsp;: il va falloir améliorer l’expérience utilisateur et donc les temps de chargement&nbsp;!"},{"id":"paragraph-7","heading":"Paragraph","content":"Google a simplifié le processus d’analyse en sélectionnant 3 critères qui, selon plusieurs études, s’imposent comme les plus importants pour une bonne expérience utilisateur."},{"id":"paragraph-8","heading":"Paragraph","content":"Maintenant les SEO et les webmasters ont un point de départ pour lancer leurs recommandations/améliorations&nbsp;: les Core Web Vitals."},{"id":"paragraph-9","heading":"Paragraph","content":"Nous avons de la chance, ce n’est pas souvent que Google donne des indications aussi précises sur un de ses critères de classement accompagnées de guidelines circonstanciées. Ce simple aspect devrait influencer une bonne partie des sites à s’aligner au mieux sur les scores recommandés."},{"id":"heading-10","heading":"Quels sites seront touchés&nbsp;?","content":"Quels sites seront touchés&nbsp;?"},{"id":"paragraph-11","heading":"Paragraph","content":"Dans la théorie, tous. À page égale sur une requête, l’indicateur pourra faire la différence. Bien entendu, avoir un bon contenu, une page bien construite, de la popularité, etc. primera toujours mais la convivialité de la page ne sera pas sans incidence sur votre référencement."},{"id":"paragraph-12","heading":"Paragraph","content":"Les sites de contenu et plus particulièrement d’actualité devront faire attention à ce critère. Google l’a annoncé dans le même billet&nbsp;: les carrousels «&nbsp;À la une&nbsp;» seront accessibles hors AMP et la convivialité deviendra un critère important."},{"id":"image-13","heading":"Image","content":"Exemple de top stories ou «&nbsp;à la une&nbsp;» sur Google."},{"id":"heading-14","heading":"Cela touche tout le site ou c’est page à page&nbsp;?","content":"Cela touche tout le site ou c’est page à page&nbsp;?"},{"id":"paragraph-15","heading":"Paragraph","content":"Les deux. Comme dit précédemment, à page égale la convivialité pourra faire la différence, nous pourrions donc nous dire que la base c’est le page à page. En réalité cela n’a pas vraiment de sens.. Lorsqu’un template est optimisé, théoriquement l’essentiel des pages du template suivent.. Google l’annonce dans ses guidelines, pour respecter chacun des critères (LCP, FID, CLS) il faudra que 75% de votre audience se trouve dans les échelles données.Il faut donc intégrer le fait que ce nouveau critère de classement est global et s’applique à tout le site, même si bien entendu certaines pages ne mériteront pas autant d’efforts que d’autres."},{"id":"heading-16","heading":"Quand s’occuper de ces optimisations&nbsp;?","content":"Quand s’occuper de ces optimisations&nbsp;?"},{"id":"paragraph-17","heading":"Paragraph","content":"Contrairement à la «&nbsp;speed update&nbsp;» de 2018, cette mise à jour n’aura pas pour objectif de «&nbsp;punir&nbsp;» les sites qui ne respectent pas ces critères. Pas de réel risque donc de prendre une «&nbsp;pénalité&nbsp;». Il est également peu probable que toutes vos positions changent dès la mise à jour, cela sera progressif et rappelons qu’il ne s’agit que d’un critère parmi beaucoup d’autres. Sa pondération n’est pas encore très claire."},{"id":"paragraph-18","heading":"Paragraph","content":"Il n’y a donc théoriquement pas d’urgence à travailler ces critères. Pour autant, est-ce une bonne idée pour autant de procrastiner&nbsp;? Probablement pas."},{"id":"paragraph-19","heading":"Paragraph","content":", nous le savons d’expérience, les modifications peuvent prendre beaucoup de temps avant d’arriver à un résultat satisfaisant. Ce sont des problématiques techniques parfois complexes à résoudre selon l’infrastructure du site et ses dépendances."},{"id":"paragraph-20","heading":"Paragraph","content":"Cela doit donc faire partie de vos chantiers fil rouge avec une priorité relativement élevée. À court terme l’idéal étant d’avoir à minima des temps estimés pour optimiser chaque point et les inclure petit à petit dans votre roadmap."},{"id":"heading-21","heading":"Comment optimiser la convivialité de son site&nbsp;?","content":"Comment optimiser la convivialité de son site&nbsp;?"},{"id":"paragraph-22","heading":"Paragraph","content":"Maintenant que nous savons de quoi il en retourne, reste à optimiser vos pages pour qu’elles répondent aux critères relativement exigeants de Google."},{"id":"paragraph-23","heading":"Paragraph","content":"Nous allons nous focaliser uniquement sur les Core Web Vitals, les autres critères étant suffisamment explicites."},{"id":"paragraph-24","heading":"Paragraph","content":"Pour voir ou revoir ce à quoi correspondent exactement le LCP, le FID (ou TTB) et le CLS, nous vous invitons à lire cet article&nbsp;: https://peakace.fr/blog/seo/google-vers-un-web-plus-rapide-nouveaux-indicateurs-de-performance-et-mise-a-jour-lighthouse/"},{"id":"heading-25","heading":"Optimiser le Largest Contentful Paint (LCP)","content":"Optimiser le Largest Contentful Paint (LCP)"},{"id":"paragraph-26","heading":"Paragraph","content":"Le LCP c’est le temps d’affichage de l’élément le plus large se trouvant dans le viewport de l’utilisateur. Le plus souvent ce sera donc une image, une vidéo ou un bloc de texte."},{"id":"paragraph-27","heading":"Paragraph","content":"Un bon LCP se situe à 2,5 secondes maximum."},{"id":"paragraph-28","heading":"Paragraph","content":"Pour l’optimiser il va donc falloir se poser la question par template&nbsp;: quel élément est le plus susceptible d’être pris en compte pour cette mesure et comment l’améliorer&nbsp;?"},{"id":"paragraph-29","heading":"Paragraph","content":"Une étape facile puisqu’il suffit d’aller sur chacun de vos templates, d’attendre le chargement complet de la page, ou tout du moins de tous les éléments présents avant la ligne de flottaison."},{"id":"paragraph-30","heading":"Paragraph","content":"Attention tout de même, il faut bien attendre le chargement complet pour définir sur quel élément sera le LCP."},{"id":"image-31","heading":"Image","content":"&nbsp;https://web.dev/lcp/"},{"id":"paragraph-32","heading":"Paragraph","content":"Sur l’exemple ci-dessus c’est bien l’image qui sera considérée comme élément pour le LCP, alors que pendant le chargement d’autres éléments auraient pu être pris en compte."},{"id":"paragraph-33","heading":"Paragraph","content":"L’optimisation va donc dépendre en grande partie de cet élément mais pas seulement. Il faudra également optimiser&nbsp;:"},{"id":"list-34","heading":"List","content":"Les temps de réponse du serveur. Délivrer les bonnes ressources à temps et dans le bon ordre sera primordial&nbsp;! La mise en cache des deux côtés (serveur et client) sera également importante.\n\n\n\nLes fichiers JS et CSS qui bloquent l’affichage. C’est un classique mais il est toujours aussi important. Prenez garde aux ressources que vous chargez et dans quel ordre. Il n’est pas rare de voir des fichiers CSS ralentir considérablement les temps d’affichage à cause de leur complexité par exemple. Première piste sur [comment optimiser son CSS.\n\n\n\nL’appel et le chargement des images. Vous pouvez privilégier des formats légers, utiliser des CDN si nécessaire, utiliser le lazyloading, le jpeg progressive, bref vous avez l’embarras du choix&nbsp;! Vous pouvez également vous référer à cet article qui ressence plusieurs [bonnes pratiques pour le chargement des images. \n\n\n\nLa connexion aux third-party. Ce sont des cas plus spécifiques mais si un élément crucial de votre page est appelé depuis l’extérieur, mieux vaut prendre le temps d’optimiser ce genre d’appel."},{"id":"paragraph-35","heading":"Paragraph","content":"Ces 4 éléments sont donc les premiers qu’il faudra essayer d’optimiser pour avoir un bon LCP."},{"id":"heading-36","heading":"Optimiser le First Input Delay (FID)","content":"Optimiser le First Input Delay (FID)"},{"id":"paragraph-37","heading":"Paragraph","content":"Le FID c’est la mesure entre le moment où un internaute cherche à faire sa première interaction avec une page et le moment où le navigateur peut effectivement répondre à son interaction (clic sur un lien par exemple). Cela ne prend pas en compte le zoom ou le scrolling sur la page."},{"id":"paragraph-38","heading":"Paragraph","content":"Un bon score si situera en dessous des 100 ms."},{"id":"paragraph-39","heading":"Paragraph","content":"Il s’agit du seul indicateur qui ne pourra se mesurer qu’avec des données de champs. Autrement dit, il faudra attendre qu’il y ait suffisamment d’utilisateurs sur votre site pour avoir une donnée viable. Cela s’explique notamment par le fait que certains utilisateurs n’auront pas d’interaction valide avec la page tandis que d’autres essaieront d’avoir des interactions lorsque ce n’est pas encore possible, etc."},{"id":"paragraph-40","heading":"Paragraph","content":"Pour l’optimiser il faudra se focaliser sur&nbsp;:"},{"id":"list-41","heading":"List","content":"La rationalisation et l’optimisation du «&nbsp;thread work&nbsp;». Il s’agit de la charge de travail du navigateur. Si celui-ci est occupé trop longtemps avec certaines actions, alors il ne pourra pas répondre à l’input de l’utilisateur."},{"id":"image-42","heading":"Image","content":"Selon les résultats sur vos pages, il faudra sans doute diminuer le nombre et la taille des fichiers javascript et/ou CSS."},{"id":"list-43","heading":"List","content":"Optimiser son javascript. Ce sont souvent les ressources les plus longues à exécuter et cela vient souvent du fait que nous chargeons des morceaux de JS voire des fichiers entiers sans réelle utilité. Les optimisations les plus courantes seront&nbsp;: supprimer le code inutilisé, séparer le code en différents fichiers, minifier le code.\n\n\n\nRéduire au maximum l’impact des third-party. Comme dit plus haut, il faut faire attention à vos appels, à leur importance et s’assurer que des codes de tracking ou d’Ads ne viennent pas augmenter votre FID."},{"id":"paragraph-44","heading":"Paragraph","content":"Pour cet indicateur, on se focalise moins sur ce qu’on va délivrer à l’internaute en affichage mais plutôt sur ce qui se passe derrière l’affichage. C’est le navigateur que l’on veut soulager."},{"id":"heading-45","heading":"Optimiser le Cumulative Layout Shift (CLS)","content":"Optimiser le Cumulative Layout Shift (CLS)"},{"id":"paragraph-46","heading":"Paragraph","content":"Le CLS mesure la stabilité de la page durant la navigation. C’est un indicateur qui a pour but d’éviter toute frustration de l’internaute lors de sa navigation (appuyer sur le mauvais bouton à cause d’un changement, avoir un morceau de texte qui disparaît, etc.)."},{"id":"paragraph-47","heading":"Paragraph","content":"Un bon score se situera en dessous des 0.1."},{"id":"paragraph-48","heading":"Paragraph","content":"C’est l’indicateur qui nécessitera le plus de connaissances pour être optimisé. Il n’y a pas réellement de possibilité de contournement côté front comme avec les fichiers JS ou les images."},{"id":"paragraph-49","heading":"Paragraph","content":"Les optimisations les plus courantes sont&nbsp;:"},{"id":"list-50","heading":"List","content":"Les images sans taille. En responsive web design, une pratique courante consiste à donner des pourcentages aux images avec un width à 100% par exemple. Le principal inconvénient réside dans le fait que le navigateur ne peut pas allouer d’espace à l’image tant qu’elle n’est pas chargée. Ce qui peut avoir pour effet de faire bouger plusieurs éléments pour y insérer l’image."},{"id":"paragraph-51","heading":"Paragraph","content":"Pour palier ce problème, il est recommandé d’utiliser les «&nbsp;aspect-ratio&nbsp;» qui permettent de donner implicitement l’information de la taille des images au navigateur."},{"id":"list-52","heading":"List","content":"Les différents embeds sans taille. Cela concerne les publicités, les iframes, etc. Pour cela, pas de véritables recommandations techniques mais il faudra plutôt faire attention à réserver des emplacements pour vos embeds et éviter d’en avoir au-dessus de la ligne de flottaison.\n\n\n\nFaire attention aux contenus dynamiques. Tous les contenus du type «&nbsp;installation d’application&nbsp;» ou encore «&nbsp;newsletter&nbsp;» peuvent provoquer des changements dans la page, ce qui est facilement évitable&nbsp;!\n\n\n\nLe chargement des polices. Si elle est mal gérée, l’apparition de texte lorsque la police est chargée peut entrainer des changements dans la page. Pour cela mieux vaut utiliser une police de fallback avec l’attribut «&nbsp;font-display&nbsp;»."},{"id":"heading-53","heading":"Comment monitorer ces indicateurs&nbsp;?","content":"Comment monitorer ces indicateurs&nbsp;?"},{"id":"paragraph-54","heading":"Paragraph","content":"Il y a deux manières de mesurer les web core vitals&nbsp;: les mesures de champs et les mesures de labo."},{"id":"paragraph-55","heading":"Paragraph","content":"Comme nous l’avons dit plus haut, le FID n’est pas mesurable en laboratoire, il sera préférable dans la plupart des cas d’utiliser les 2 méthodes lorsque c’est possible."},{"id":"paragraph-56","heading":"Paragraph","content":"Pour les tests de champs vous pouvez utiliser&nbsp;:"},{"id":"list-57","heading":"List","content":"Le Chrome User Experience Report. Vous pouvez même faire des dashboards simples ou personnalisés avec DataStudio et BigQuery.\n\n\n\nGoogle Pagespeed Insights. L’outil est mis à jour pour inclure les nouveaux indicateurs.\n\n\n\nLa Google Search Console. Elle intègre maintenant un rapport qui remplace le rapport sur la vitesse avec les différents indicateurs cités plus haut.\n\n\n\nL’extension Chrome «&nbsp;Web vitals&nbsp;»."},{"id":"paragraph-58","heading":"Paragraph","content":"Pour les tests de laboratoire&nbsp;:"},{"id":"list-59","heading":"List","content":"Chrome DevTools.\n\n\n\nLighthouse."},{"id":"paragraph-60","heading":"Paragraph","content":"A noter que pour ces deux outils, le First Input Delay est remplacé par le Total Blocking Time, un indicateur très proche et qui nécessite le même type d’optimisation."},{"id":"paragraph-61","heading":"Paragraph","content":"Vous avez également la possibilité&nbsp;de faire vos propres mesures en Javascript et construire vos propres dashboards."},{"id":"image-62","heading":"Image","content":"Le dashboard prédéfini pour les Core Web Vitals : https://g.co/chromeuxdash"},{"id":"heading-63","heading":"Ce qu’il faut retenir (TL&nbsp;; DR)","content":"Ce qu’il faut retenir (TL&nbsp;; DR)"},{"id":"paragraph-64","heading":"Paragraph","content":"Google laisse le temps aux webmasters de travailler ces différents indicateurs mais selon votre site, vos contraintes, il peut être plus sage de commencer ces chantiers dès maintenant."},{"id":"paragraph-65","heading":"Paragraph","content":"Tous les indicateurs vous demanderont une bonne quantité de travail mais aucun n’est insurmontable, Google a choisi des indicateurs relativement simples à appréhender et améliorer."},{"id":"paragraph-66","heading":"Paragraph","content":"La convivialité des pages pourra être un critère déterminant selon vos ambitions et votre positionnement. Ne passez pas à côté&nbsp;!"},{"id":"heading-67","heading":"Baromètre Web Vitals","content":"Baromètre Web Vitals"},{"id":"paragraph-68","heading":"Paragraph","content":"Enfin, l'équipe Data de Search-Foresight à créer un baromètre pour les principaux secteurs mise à jour mensuellement pour suivre les indicateurs des leaders régulièrement:"},{"id":"quote-69","heading":"Quote","content":"Bien entendu, si vous avez besoin du soutien d’une agence SEO pour vous faire des recommandations sur la convivialité de vos pages et prioriser vos chantiers, n’hésitez pas à utiliser le formulaire de contact&nbsp;!"},{"id":"paragraph-70","heading":"Paragraph","content":"Source principale&nbsp;: https://web.dev/"}],"media":{"primary_image":"https://peakace.fr/wp-content/uploads/2020/05/ECRAN-4-DATA-PROF-e1593535707301.png"},"relations":[{"rel":"canonical","href":"https://peakace.fr/blog/web-performance/comprendre-et-se-preparer-a-lupdate-page-experience-de-google/"},{"rel":"alternate","href":"https://peakace.fr/blog/web-performance/comprendre-et-se-preparer-a-lupdate-page-experience-de-google/llm","type":"text/html"},{"rel":"alternate","href":"https://peakace.fr/blog/web-performance/comprendre-et-se-preparer-a-lupdate-page-experience-de-google/llm.json","type":"application/json"},{"rel":"llm-manifest","href":"https://peakace.fr/llm-endpoints-manifest.json","type":"application/json"}],"http_headers":{"X-LLM-Friendly":"1","X-LLM-Schema":"1.1.0","Content-Security-Policy":"default-src 'none'; img-src * data:; style-src 'unsafe-inline'"},"license":"CC BY-ND 4.0","attribution_required":true,"allow_cors":false}