Pourquoi les Core Web Vitals ?<\/h2>\n
Le contenu reste crucial. Mais si vous comparez deux sites dont le texte et la popularit\u00e9 sont similaires, celui qui offre la meilleure exp\u00e9rience web aura une priorit\u00e9 plus \u00e9lev\u00e9e dans les r\u00e9sultats de recherche Google.<\/p>\n
En plus d’un classement de page am\u00e9lior\u00e9, les sites performants peuvent \u00eatre inclus dans le carrousel de recherche mobile. Cela \u00e9tait auparavant r\u00e9serv\u00e9 aux pages mobiles acc\u00e9l\u00e9r\u00e9es (AMP)<\/a>, qui n\u00e9cessitaient de porter le contenu sur un site s\u00e9par\u00e9 h\u00e9berg\u00e9 par Google. AMP a suscit\u00e9 des critiques, notamment parce que les pages ne sont pas toujours plus rapides qu’un site WordPress ou statique bien optimis\u00e9. Cependant, ce n’est plus une obligation<\/a>.<\/p>\n Peu importe votre choix, plus votre site est rapide et responsive, plus il a de chances d’\u00eatre mieux class\u00e9 dans les r\u00e9sultats de recherche de Google.<\/p>\n Quand vous savez que la page moyenne fait environ 2 Mo, qu’elle effectue plus de 60 requ\u00eates HTTP et qu’il faut 16 secondes pour qu’elle soit enti\u00e8rement rendue sur un appareil mobile, vous vous rendez compte qu’il y a de la marge pour am\u00e9liorer votre site. Nous allons vous montrer les meilleures fa\u00e7ons de r\u00e9aliser ces am\u00e9liorations.<\/p>\n Il y a quatre facteurs de classement cl\u00e9s \u00e0 examiner avant de commencer \u00e0 \u00e9valuer les performances :<\/p>\n Une fois que vous aurez satisfait \u00e0 ces pr\u00e9-requis, les performances de votre site seront \u00e9valu\u00e9es.<\/p>\n\n Faire en sorte que votre site se charge rapidement<\/a>, s’affiche plus vite et soit responsive plus t\u00f4t est vital. Mais est-ce qu’il donne l’impression d’\u00eatre rapide aux utilisateurs ?<\/p>\n Les applications de mesure des performances<\/a> comme Browser DevTools rapportent des mesures techniques telles que :<\/p>\n Elles peuvent \u00eatre utilis\u00e9es pour d\u00e9terminer des goulots d’\u00e9tranglement sp\u00e9cifiques tels que la charge du serveur, la mise en cache du CMS<\/a>, la mise en cache du navigateur, les vitesses de t\u00e9l\u00e9chargement et l’efficacit\u00e9 de JavaScript<\/a>. Mais elles ne peuvent pas d\u00e9terminer si une page offre une bonne ou une mauvaise exp\u00e9rience utilisateur. Par exemple :<\/p>\n Les signaux essentiels du web sont la tentative de Google de r\u00e9soudre ces dilemmes.<\/p>\n Les signaux essentiels du web (Core Web Vitals ou CWV) de Google sont trois mesures de performance qui \u00e9valuent l’exp\u00e9rience des utilisateurs dans le monde r\u00e9el :<\/p>\n Cette nouvelle mise \u00e0 jour de l’algorithme de Google<\/a> a commenc\u00e9 \u00e0 \u00eatre d\u00e9ploy\u00e9e dans le monde entier d’ici fin ao\u00fbt 2021. Les mesure des signaux essentiels du web affectent principalement les r\u00e9sultats de recherche sur mobile, mais des \u00e9quivalents pour ordinateur de bureau suivront si l’exp\u00e9rience est r\u00e9ussie.<\/p>\n Les scores LCP, FID et CLS d’une page sont bas\u00e9s sur les 28 derniers jours de mesures d’utilisateurs r\u00e9els collect\u00e9es anonymement via le navigateur Chrome. Ces mesures peuvent varier en fonction de l’appareil de l’utilisateur, de sa connexion et d’autres activit\u00e9s simultan\u00e9es, c’est pourquoi le 75e percentile est calcul\u00e9 plut\u00f4t qu’une moyenne.<\/p>\n En d’autres termes, les mesures de tous les utilisateurs sont tri\u00e9es du meilleur au pire, et le chiffre situ\u00e9 aux trois quarts est retenu. Trois visiteurs du site sur quatre conna\u00eetront donc ce niveau de performance ou mieux.<\/p>\n Toute page qui obtient un bon score (vert) pour les trois mesures des signaux essentiels du web sera mieux class\u00e9e dans les r\u00e9sultats de recherche et sera incluse dans le carrousel \u00ab Top Stories \u00bb de l’application Google News.<\/p>\n Dans les sections suivantes, nous d\u00e9crirons l’algorithme utilis\u00e9 pour calculer une mesure, les outils que vous pouvez utiliser pour identifier le score d’une page, les causes typiques des mauvais scores et les mesures que vous pouvez prendre pour r\u00e9soudre les probl\u00e8mes de performance.<\/p>\n Largest Contentful Paint mesure les performances de chargement<\/a>. En gros, \u00e0 quelle vitesse le contenu utilisable est-il rendu sur la page ?<\/p>\n LCP analyse le temps qu’il faut \u00e0 la plus grande image ou au plus grand bloc de texte pour devenir visible dans la fen\u00eatre du navigateur (au-dessus du pli). Dans la plupart des cas, l’\u00e9l\u00e9ment le plus visible sera une image Hero, une banni\u00e8re, un titre ou un grand bloc de texte.<\/p>\n Tous les \u00e9l\u00e9ments suivants sont \u00e9ligibles pour l’analyse du tableau le plus important du contenu :<\/p>\n Les pages o\u00f9 le tableau le plus volumineux est compl\u00e9t\u00e9 dans les 2,5 premi\u00e8res secondes du chargement de la page sont consid\u00e9r\u00e9es comme bonnes (vertes). Les pages qui d\u00e9passent 4 secondes sont consid\u00e9r\u00e9es comme mauvaises (rouge) :<\/p>\n LCP est la mesure Core Web Vital la plus facile \u00e0 comprendre, mais il n’est pas toujours \u00e9vident de savoir quel \u00e9l\u00e9ment sera choisi pour l’analyse.<\/p>\n Le panneau DevTools Lighthouse<\/strong> est fourni dans les navigateurs bas\u00e9s sur Chromium tels que Chrome, Edge, Brave<\/a>, Opera et Vivaldi. Ouvrez DevTools \u00e0 partir du menu du navigateur – g\u00e9n\u00e9ralement \u00e0 l’aide de Plus d’outils <\/strong>> Outils d\u00e9veloppeur<\/strong> ou des raccourcis clavier Ctrl<\/strong> | Cmd + Shift + i<\/strong> ou F12<\/strong> – puis acc\u00e9dez \u00e0 l’onglet Lighthouse<\/strong> (les anciennes \u00e9ditions peuvent le nommer Audit<\/strong>).<\/p>\n G\u00e9n\u00e9rez un rapport de performance mobile, puis examinez la section Performance<\/strong> qui en r\u00e9sulte. LCP est affich\u00e9 avec une section extensible, qui identifie l’\u00e9l\u00e9ment choisi :<\/p>\n Vous pouvez g\u00e9n\u00e9rer des informations identiques dans les outils en ligne PageSpeed Insights<\/a> et web.dev Measure<\/a> si vous n’avez pas acc\u00e8s \u00e0 un navigateur bas\u00e9 sur Chromium :<\/p>\n Le panneau Performance<\/strong> de DevTools affiche \u00e9galement un indicateur LCP. Pour commencer, cliquez sur l’ic\u00f4ne circulaire Record<\/strong>, rechargez votre page, puis cliquez sur le bouton Stop<\/strong> pour afficher le rapport. Cliquez sur l’ic\u00f4ne LCP dans la section Timings<\/strong> pour identifier l’\u00e9l\u00e9ment et afficher un r\u00e9sum\u00e9 des statistiques.<\/p>\n L’extension Web Vitals<\/a> est disponible pour Google Chrome mais peut \u00eatre install\u00e9e sur la plupart des navigateurs bas\u00e9s sur Chromium. Elle calcule les mesures des signaux essentiels du web pour chaque site que vous visitez, et son ic\u00f4ne devient verte, orange ou rouge en fonction du r\u00e9sultat. Vous pouvez \u00e9galement cliquer sur l’ic\u00f4ne de l’extension pour afficher plus de d\u00e9tails sur LCP :<\/p>\n La Search Console de Google<\/a> propose d\u00e9sormais une section Core Web Vitals<\/a> si votre site est ajout\u00e9 en tant que propri\u00e9t\u00e9<\/a>. Le rapport illustre l’\u00e9volution des m\u00e9triques CWV au fil du temps. Notez qu’il n’identifie pas les mesures LCP sp\u00e9cifiques, et que seuls les sites ayant un trafic raisonnablement \u00e9lev\u00e9 sont disponibles :<\/p>\n Le rapport sur l’exp\u00e9rience utilisateur de Chrome<\/a> vous permet d’interroger les statistiques d’utilisation r\u00e9elles, y compris le LCP \u00e0 travers diff\u00e9rents pays, connexions et appareils, pour une URL sp\u00e9cifique. Il s’agit d’un projet public sur Google BigQuery, vous devez donc vous inscrire \u00e0 un compte Google Cloud Platform<\/a> et fournir des d\u00e9tails de facturation. Encore une fois, le rapport ne sera utile que lorsqu’une URL a un niveau de trafic raisonnablement \u00e9lev\u00e9.<\/p>\n Enfin, la biblioth\u00e8que JavaScript web-vitals<\/a> est un petit script de 1 ko qui peut calculer LCP et d’autres mesures Core Web Vital pour des utilisateurs r\u00e9els sur votre site en production. Comme il peut \u00eatre t\u00e9l\u00e9charg\u00e9 \u00e0 partir d’un CDN, vous pouvez ajouter le script suivant \u00e0 votre Le script ci-dessus envoie l’objet \u00e0 la console, bien qu’il soit plus pratique d’envoyer les donn\u00e9es \u00e0 un serveur ou \u00e0 Google Analytics<\/a> pour une analyse plus approfondie.<\/p>\n Les mauvais scores LCP sont g\u00e9n\u00e9ralement dus \u00e0 des pages \u00e0 chargement lent qui emp\u00eachent le bloc le plus important d’appara\u00eetre rapidement :<\/p>\n Un audit approfondi peut identifier les probl\u00e8mes de chargement, mais il s’agit g\u00e9n\u00e9ralement de r\u00e9duire la quantit\u00e9 de donn\u00e9es envoy\u00e9es au navigateur<\/a>. Les conseils suivants vous aideront \u00e0 obtenir un meilleur score LCP :<\/p>\n Fisrt Input Delay mesure la r\u00e9activit\u00e9 de votre page. En fait, \u00e0 quelle vitesse r\u00e9agit-elle aux actions de l’utilisateur telles que cliquer, saisir et faire d\u00e9filer ?<\/p>\n La mesure FID est calcul\u00e9e comme le temps entre l’interaction de l’utilisateur et le traitement de sa requ\u00eate par le navigateur. Elle ne mesure pas le temps d’ex\u00e9cution de la fonction de gestion, qui traite g\u00e9n\u00e9ralement l’entr\u00e9e et met \u00e0 jour le DOM.<\/p>\n Les pages dont le temps FID est inf\u00e9rieur ou \u00e9gal \u00e0 100 millisecondes sont consid\u00e9r\u00e9es comme bonnes (vertes). Les pages d\u00e9passant 300 millisecondes sont consid\u00e9r\u00e9es comme mauvaises (rouge) :<\/p>\n First Input Delay.<\/p>\n Le First Input Delay est impossible \u00e0 simuler car il ne peut \u00eatre mesur\u00e9 que lorsque la page est servie \u00e0 un utilisateur r\u00e9el qui interagit avec la page. Le r\u00e9sultat d\u00e9pend donc de la vitesse et des capacit\u00e9s du processeur de chaque appareil.<\/p>\n Le FID n’est pas calcul\u00e9 dans le panneau DevTools Lighthouse ou PageSpeed Insights<\/a>. Cependant, ils peuvent d\u00e9terminer le temps de blocage total (Total Blocking Time ou TBT). Il s’agit d’une approximation raisonnable du d\u00e9lai de premi\u00e8re entr\u00e9e. Il mesure la diff\u00e9rence de temps entre :<\/p>\n L’extension Web Vitals<\/a> pour Google Chrome peut \u00e9galement afficher une mesure FID apr\u00e8s avoir interagi avec la page en la faisant d\u00e9filer ou en cliquant. Cliquez sur l’ic\u00f4ne de l’extension pour obtenir plus d’informations :<\/p>\n \u00c0 l’instar de LCP<\/a>, le rapport sur l’exp\u00e9rience des utilisateurs de Chrome<\/a> vous permet d’interroger les statistiques r\u00e9elles du FID enregistr\u00e9es dans diff\u00e9rents pays, connexions et appareils pour une URL sp\u00e9cifique.<\/p>\n La biblioth\u00e8que JavaScript web-vitals<\/a> peut \u00e9galement calculer les mesures FID pour des utilisateurs r\u00e9els sur votre site en production. Vous pouvez ajouter le script suivant \u00e0 votre HTML Les mauvais scores FID et TBT sont g\u00e9n\u00e9ralement caus\u00e9s par un code c\u00f4t\u00e9 client qui accapare le processeur, comme par exemple :<\/p>\n Par d\u00e9faut, les navigateurs fonctionnent sur un seul thread, qui ne peut traiter qu’une seule t\u00e2che \u00e0 la fois. Si l’ex\u00e9cution d’une fonction JavaScript prend une seconde, tous les autres processus de rendu sont bloqu\u00e9s pendant cette seconde. La page ne peut pas r\u00e9agir aux entr\u00e9es de l’utilisateur, mettre \u00e0 jour le DOM, afficher des animations, etc. M\u00eame les animations GIF peuvent \u00eatre bloqu\u00e9es dans les anciens navigateurs.<\/p>\n Un audit JavaScript c\u00f4t\u00e9 client peut identifier les probl\u00e8mes, mais il s’agit g\u00e9n\u00e9ralement de supprimer le code redondant et de s’assurer que les t\u00e2ches sont ex\u00e9cut\u00e9es rapidement.<\/p>\n Les conseils suivants vous aideront \u00e0 obtenir un meilleur score FID :<\/p>\n CLS mesure la stabilit\u00e9 visuelle de la page. En fait, le contenu de la page bouge-t-il ou saute-t-il inopin\u00e9ment, en particulier lors du chargement initial ?<\/p>\n CLS calcule un score lorsque des \u00e9l\u00e9ments se d\u00e9placent sans avertissement ni interaction de l’utilisateur. Vous avez probablement fait l’exp\u00e9rience de ce ph\u00e9nom\u00e8ne en lisant un article sur un appareil mobile : le texte saute soudainement hors de l’\u00e9cran et vous perdez votre emplacement. Les pires exemples peuvent vous amener \u00e0 cliquer sur un lien incorrect.<\/p>\n Les probl\u00e8mes de CLS sont les plus flagrants lorsqu’une grande image ou une publicit\u00e9 se charge au-dessus de la position de d\u00e9filement actuelle et qu’un espace \u00e0 hauteur z\u00e9ro s’agrandit instantan\u00e9ment de plusieurs centaines de pixels.<\/p>\n Les scores de Cumulative Layout Shift sont calcul\u00e9s en multipliant les mesures suivantes :<\/p>\n Google a apport\u00e9 des modifications \u00e0 la mesure CLS pour tenir compte des situations suivantes :<\/p>\n Les pages dont le score CLS est inf\u00e9rieur ou \u00e9gal \u00e0 0,1 sont consid\u00e9r\u00e9es comme bonnes (vert). Les pages qui d\u00e9passent 0,25 sont consid\u00e9r\u00e9es comme mauvaises (rouge) :<\/p>\n Les mesures CLS sont calcul\u00e9es dans le panneau DevTools Lighthouse<\/strong>, PageSpeed Insights<\/a> et les outils de mesure web.dev<\/a> :<\/p>\n L’extension Web Vitals<\/a> pour Google Chrome affiche \u00e9galement la mesure CLS :<\/p>\n \u00c0 l’instar de LCP<\/a> et FID<\/a>, le rapport sur l’exp\u00e9rience utilisateur de Chrome<\/a> vous permet d’interroger les statistiques r\u00e9elles de CLS enregistr\u00e9es dans diff\u00e9rents pays, connexions et appareils pour une URL sp\u00e9cifique.<\/p>\n La biblioth\u00e8que JavaScript web-vitals<\/a> peut \u00e9galement calculer les m\u00e9triques CLS pour des utilisateurs r\u00e9els sur votre site en production, tout comme elle le fait avec LCP et FID. Le script suivant pourrait \u00eatre ajout\u00e9 \u00e0 votre HTML Les mauvais r\u00e9sultats de CLS sont g\u00e9n\u00e9ralement dus \u00e0 des ressources de page \u00e0 chargement lent et \u00e0 des \u00e9l\u00e9ments DOM dynamiques ou non dimensionn\u00e9s :<\/p>\n Un audit c\u00f4t\u00e9 client peut permettre d’identifier les probl\u00e8mes, mais il s’agit g\u00e9n\u00e9ralement de s’assurer que l’espace est r\u00e9serv\u00e9 au contenu avant son t\u00e9l\u00e9chargement. Les conseils d’optimisation du serveur sugg\u00e9r\u00e9s pour Largest Contentful Paint<\/a> auront un certain effet b\u00e9n\u00e9fique, mais d’autres am\u00e9liorations sont possibles :<\/p>\nLes principaux facteurs de classement de Google<\/h2>\n
\n
Comment Google \u00e9value-t-il les performances web ?<\/h2>\n
\n
\n
Que sont les Core Web Vitals ?<\/h2>\n
\n
Largest Contentful Paint (LCP)<\/h2>\n
\n
<img><\/code>)<\/li>\n<image><\/code> int\u00e9gr\u00e9e dans <svg><\/code>)<\/li>\n<video><\/code>)<\/li>\nbackground-image url()<\/code>)<\/li>\n![\"Largest](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/lcp-rank.png\"){kind=icon}
<\/a>Les plus grands outils d’analyse de Largest Contentful Paint<\/h3>\n
![\"Rapport](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-lighthouse.png\")
<\/a>![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-lcp.png\")
<\/a>![\"DevTools](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/devtools-lcp-performance.png\")
<\/a>![\"Extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-lcp.png\")
<\/a>![\"Google](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/console-lcp.png\")
<\/a><head><\/code> HTML :<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getLCP } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetLCP(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\ngetLCP()<\/code> est une fonction asynchrone \u00e0 laquelle est transmise une fonction de rappel d\u00e9clench\u00e9e lorsque la valeur LCP a \u00e9t\u00e9 calcul\u00e9e (bien qu’elle puisse ne jamais se d\u00e9clencher si la page se charge dans un onglet en arri\u00e8re-plan). On passe \u00e0 la fonction de rappel un objet contenant :<\/p>\n\n
name<\/strong><\/code> : le nom de la mesure (\u00ab LCP \u00bb dans ce cas)<\/li>\nvalue<\/code><\/strong> : la valeur calcul\u00e9e<\/li>\nid<\/code><\/strong> : un ID unique repr\u00e9sentant cette mesure pour la page actuelle<\/li>\ndelta<\/code><\/strong> : le delta entre la valeur actuelle et la derni\u00e8re valeur rapport\u00e9e<\/li>\nentries<\/code><\/strong> : un tableau d’entr\u00e9es utilis\u00e9es dans le calcul de la valeur<\/li>\n<\/ul>\nCauses communes des mauvais scores Largest Contentful Paint<\/h3>\n
\n
Comment am\u00e9liorer les scores Largest Contentful Paint<\/h3>\n
\n
loading=\"lazy\"<\/code>. Ajoutez des attributs de largeur et de hauteur pour vous assurer qu’un espace appropri\u00e9 est r\u00e9serv\u00e9 sur la page avant que l’image ne termine son chargement.<\/li>\n<link><\/code> en haut de la page, puis chargez les autres feuilles de style de mani\u00e8re asynchrone.<\/li>\nFirst Input Delay (FID)<\/h2>\n
![\"First](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/fid-rank.png\"){kind=icon}
<\/a><\/p>\nOutils d’analyse First Input Delay<\/h3>\n
\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-fid.png\")
<\/a>![\"Extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-fid.png\")
<\/a><head><\/code> pour transmettre les mesures FID \u00e0 une fonction de rappel :<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getFID } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetFID(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCauses courantes des mauvais r\u00e9sultats de First Input Delay<\/h3>\n
\n
Comment am\u00e9liorer les scores First Input Delay<\/h3>\n
\n
Cumulative Layout Shift (CLS)<\/h2>\n
\n
\n
![\"Cumulative](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/cls-rank.png\"){kind=icon}
<\/a>Outils d’analyse du Cumulative Layout Shift<\/h3>\n
![\"PageSpeed](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/pagespeed-cls.png\")
<\/a>![\"Extension](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/08\/addon-cls.png\")
<\/a><head><\/code> pour sortir les mesures CLS vers une fonction de rappel :<\/p>\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>My page<\/title>\n<script type=\"module\">\nimport { getCLS } from 'https:\/\/unpkg.com\/web-vitals?module';\ngetCLS(console.log);\n<\/script>\n<!-- rest of page -->\n<\/code><\/pre>\nCauses courantes des mauvais scores Cumulative Layout Shift<\/h3>\n
\n
Comment am\u00e9liorer les scores Cumulative Layout Shift<\/h3>\n
\n
<img><\/code> et <iframe><\/code> ou utilisez la nouvelle propri\u00e9t\u00e9 CSS aspect-ratio<\/a> pour vous assurer qu’un espace appropri\u00e9 est r\u00e9serv\u00e9 sur la page avant le t\u00e9l\u00e9chargement des ressources.<\/li>\n<link><\/code> en haut de la page, puis chargez les feuilles de style suppl\u00e9mentaires de mani\u00e8re asynchrone.<\/li>\n