{"id":36168,"date":"2020-01-21T00:20:25","date_gmt":"2020-01-21T08:20:25","guid":{"rendered":"https:\/\/kinsta.com\/?p=65587&#038;preview=true&#038;preview_id=65587"},"modified":"2025-10-03T17:11:49","modified_gmt":"2025-10-03T16:11:49","slug":"google-pagespeed-insights","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/","title":{"rendered":"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100"},"content":{"rendered":"<p><a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google PageSpeed Insights<\/a> est sans aucun doute un outil utile pour les webmasters, les d\u00e9veloppeurs et les propri\u00e9taires de sites de tous types. Cependant, nous avons remarqu\u00e9 que beaucoup de gens passent des heures \u00e0 \u00eatre obs\u00e9d\u00e9s par l&rsquo;optimisation de leur site, afin d&rsquo;essayer d&rsquo;obtenir un score de 100\/100 \u00e0 ce test.<\/p>\n<p>La v\u00e9rit\u00e9 est que ce n&rsquo;est pas la fa\u00e7on dont Google PageSpeed Insights est cens\u00e9 \u00eatre utilis\u00e9, ni n&rsquo;est une poursuite qui en vaut la peine. Si vous vous concentrez sur la mise en \u0153uvre des recommandations de la plateforme au lieu de vous concentrer sur le chiffre en haut de la page, vous cr\u00e9erez beaucoup plus d&rsquo;avantages pour votre site.<\/p>\n<p>Cet article est un guide complet sur l&rsquo;utilisation optimale de Google PageSpeed Insights. Nous vous expliquerons comment Google utilise votre score et comment int\u00e9grer les recommandations que vous recevez.<\/p>\n<p>Commen\u00e7ons !<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Qu&rsquo;est-ce que PageSpeed Insights de Google ?<\/h2>\n<p><a href=\"https:\/\/pagespeed.web.dev\/\">Google PageSpeed Insights<\/a> est un outil utilis\u00e9 pour tester les performances d&rsquo;un site web. Vous pouvez saisir n&rsquo;importe quelle URL et la faire analyser.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights.png\" alt=\"google pagespeed insights\" width=\"1500\" height=\"718\"><figcaption class=\"wp-caption-text\">Google PageSpeed Insights<\/figcaption><\/figure>\n<p>Google fournit ensuite une note globale sur 100 pour le site web que vous avez test\u00e9, en se basant sur plusieurs bonnes pratiques d&rsquo;optimisation des performances.<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/score-de-pagespeed-insights.png\" alt=\"Score de Google PageSpeed Insights\" width=\"1500\" height=\"830\"><figcaption class=\"wp-caption-text\">Score de Google PageSpeed Insights<\/figcaption><\/figure>\n<p>En plus de ce r\u00e9sultat, vous verrez \u00e9galement plusieurs recommandations de Google sur la fa\u00e7on d&rsquo;am\u00e9liorer vos performances (et donc votre score PageSpeed Insights).<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/recommandations-de-pagespeed-insight.png\" alt=\"Recommandations de Google PageSpeed Insights\" width=\"1500\" height=\"1197\"><figcaption class=\"wp-caption-text\">Recommandations de Google PageSpeed Insights<\/figcaption><\/figure>\n<p>\u00c0 partir de 2018, les scores de PageSpeed Insights sont calcul\u00e9s via <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lighthouse<\/a>, l&rsquo;outil open source et automatis\u00e9 de Google pour am\u00e9liorer la qualit\u00e9 globale des pages web. Cette plateforme peut \u00e9valuer toutes sortes de facteurs, dont la performance, l&rsquo;accessibilit\u00e9, les <a href=\"https:\/\/kinsta.com\/fr\/blog\/applications-web-progressives\/\">applications web progressives<\/a>, et plus encore.<\/p>\n<p>Pour voir l&rsquo;\u00e9valuation compl\u00e8te de votre site par Lighthouse, vous pouvez utiliser <a href=\"https:\/\/web.dev\/measure\/\" target=\"_blank\" rel=\"noopener noreferrer\">l&rsquo;outil de mesure de Google<\/a> :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-measure.png\" alt=\"Outil d'audit Google Webmasters Measure\" width=\"1500\" height=\"898\"><figcaption class=\"wp-caption-text\">Outil d&rsquo;audit Google Webmasters Measure<\/figcaption><\/figure>\n<p>Outre la r\u00e9alisation d&rsquo;un audit de performance similaire \u00e0 celui effectu\u00e9 par Google PageSpeed Insights, vous obtiendrez des notes pour l&rsquo;accessibilit\u00e9, les meilleures pratiques et <a href=\"https:\/\/kinsta.com\/fr\/blog\/que-veut-dire-referencement-seo\/\" target=\"_blank\" rel=\"noopener noreferrer\">l\u2019optimisation pour les moteurs de recherche (SEO)<\/a>.<\/p>\n<h2>La v\u00e9rit\u00e9 sur le score de 100\/100 dans Google PageSpeed Insights<\/h2>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 au d\u00e9but de cet article, nous voyons de nombreux propri\u00e9taires et d\u00e9veloppeurs de sites qui deviennent obs\u00e9d\u00e9s par l&rsquo;obtention d&rsquo;un score parfait sur PageSpeed Insights. Malheureusement, ces gens ont tendance \u00e0 n\u00e9gliger l&rsquo;aspect le plus important des r\u00e9sultats du test : les recommandations.<\/p>\n<p>Bien que vous deviez certainement vous efforcer d&rsquo;am\u00e9liorer le plus possible les temps de chargement de votre site web, <strong>obtenir un 100\/100 dans Google PageSpeed Insights n&rsquo;est pas vraiment important<\/strong>. Pour commencer, il ne s&rsquo;agit m\u00eame pas du test de performance le plus complet.<\/p>\n<p>Contrairement \u00e0 PageSpeed Insights, <a href=\"https:\/\/kinsta.com\/fr\/blog\/test-vitesse-pingdom\/\" target=\"_blank\" rel=\"noopener noreferrer\">Pingdom Tools<\/a> vous permet de tester les performances de votre site depuis diff\u00e9rents endroits :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/resultats-des-pingdom.png\" alt=\"R\u00e9sultats des tests de vitesse des outils Pingdom\" width=\"1500\" height=\"913\"><figcaption class=\"wp-caption-text\">R\u00e9sultats des tests de vitesse des outils Pingdom<\/figcaption><\/figure>\n<p>Vous pouvez \u00e9galement ex\u00e9cuter des tests sur des platesformes telles que <a href=\"https:\/\/kinsta.com\/fr\/blog\/test-vitesse-gtmetrix\/\" target=\"_blank\" rel=\"noopener noreferrer\">GTmetrix<\/a> (qui combine vos scores de PageSpeed Insights et <a href=\"http:\/\/yslow.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">YSlow<\/a>) et <a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebPageTest<\/a>. Il y a de fortes chances que vos scores dans ces diff\u00e9rents outils ne correspondent pas exactement, ce qui vous montre \u00e0 quel point ces chiffres peuvent \u00eatre arbitraires.<\/p>\n<p><strong>Ce qui compte vraiment, c&rsquo;est la vitesse r\u00e9elle de votre site web<\/strong>. Pour mettre les choses en perspective, nous avons vu des sites avec des temps de chargement moyens de moins de 500 millisecondes (ce qui est extr\u00eamement rapide !) qui n&rsquo;ont pas un score de 100\/100 sur PageSpeed Insights.<\/p>\n<p>L&rsquo;autre facteur qui devrait influencer votre approche de l&rsquo;optimisation de la vitesse est <a href=\"https:\/\/blog.teamtreehouse.com\/perceived-performance\" target=\"_blank\" rel=\"noopener noreferrer\">la performance per\u00e7ue<\/a> de votre site. Vos visiteurs ne se soucient pas de votre score Google PageSpeed Insights. Ils veulent juste pouvoir visualiser votre contenu le plus rapidement possible.<\/p>\n<p>Le but r\u00e9el de tester les performances de votre site avec Google PageSpeed Insights n&rsquo;est pas d&rsquo;obtenir un score \u00e9lev\u00e9. Il s&rsquo;agit plut\u00f4t de trouver des points probl\u00e9matiques sur votre site, afin de les optimiser et de diminuer vos temps de chargement r\u00e9els et per\u00e7us.<\/p>\n<h2>Comment Google utilise PageSpeed Insights<\/h2>\n<p>En plus d&rsquo;influencer l&rsquo;exp\u00e9rience utilisateur de votre site (UX), la <a href=\"https:\/\/kinsta.com\/fr\/blog\/conseils-optimisation-taux-conversion\/#4-vitesse-de-chargement-de-page\" target=\"_blank\" rel=\"noopener noreferrer\">performance joue \u00e9galement un r\u00f4le dans le r\u00e9f\u00e9rencement<\/a>. \u00c9tant donn\u00e9 que PageSpeed Insights est g\u00e9r\u00e9 par le moteur de recherche le plus important et le plus populaire au monde, il va sans dire que votre score pourrait avoir un certain effet sur votre classement dans les pages de r\u00e9sultats des <a href=\"https:\/\/kinsta.com\/fr\/blog\/moteurs-recherche-alternatifs\/\">moteurs de recherche<\/a> (SERP) (ou au moins sur Google lui-m\u00eame).<\/p>\n<p>La r\u00e9alit\u00e9 est que Google utilise PageSpeed Insights pour d\u00e9terminer les classements &#8211; en quelque sorte. La vitesse du site est un facteur de classement, tout simplement. Votre score au test de performance peut vous donner une assez bonne id\u00e9e de votre position sur ce front.<\/p>\n<p>Cependant, Google ne prend pas seulement en compte le chiffre dans le cercle en haut de vos r\u00e9sultats PageSpeed. L&rsquo;atteinte d&rsquo;un 100\/100 ne vous garantit pas une place de choix dans les SERPs.<\/p>\n\n<p>Cela dit, vous pouvez toujours mettre \u00e0 profit les r\u00e9sultats de PageSpeed Insights pour am\u00e9liorer votre r\u00e9f\u00e9rencement. Par exemple, depuis 2018, <a href=\"https:\/\/webmasters.googleblog.com\/2018\/01\/using-page-speed-in-mobile-search.html\">la vitesse des pages mobiles a \u00e9t\u00e9 un facteur de classement pour Google<\/a>. Vous remarquerez que votre test de performance fournit des donn\u00e9es \u00e0 la fois pour la version de bureau et la version mobile de votre site :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/onglet-mobile-dans-pagespeed-insights.png\" alt=\"Onglet Mobile dans Google PageSpeed Insights\" width=\"1500\" height=\"830\"><figcaption class=\"wp-caption-text\">Onglet Mobile dans Google PageSpeed Insights<\/figcaption><\/figure>\n<p>Puisque plus de <a href=\"https:\/\/neilpatel.com\/blog\/loading-time\/\" target=\"_blank\" rel=\"noopener noreferrer\">73 % des utilisateurs d&rsquo;Internet mobile<\/a> affirment avoir rencontr\u00e9 un site trop long \u00e0 charger, les informations de l&rsquo;onglet Google PageSpeed Insights <strong>Mobile<\/strong> sont pr\u00e9cieuses. En utilisant les recommandations pour <a href=\"https:\/\/kinsta.com\/fr\/apprendre\/accelerer-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">la r\u00e9duction des temps de chargement<\/a> sur les smartphones et autres appareils devrait vous donner un avantage concurrentiel.<\/p>\n<h2>Recommandations de Google PageSpeed Insights (24 fa\u00e7ons d&rsquo;am\u00e9liorer les performances)<\/h2>\n<p>Nous avons beaucoup parl\u00e9 des recommandations de Google PageSpeed Insights dans cet article. Ils sont la r\u00e9elle alimentation de vos r\u00e9sultats de test de performance, et ont beaucoup plus de valeur que votre score r\u00e9el. C&rsquo;est pourquoi nous leur avons d\u00e9di\u00e9 le reste de cet article.<\/p>\n<p>Avant de nous plonger dans les suggestions individuelles, vous devez cependant comprendre la diff\u00e9rence entre vos <strong>donn\u00e9es de terrain<\/strong> et vos <strong>donn\u00e9es de laboratoire<\/strong>. Les premi\u00e8res comparent votre site aux autres dans le rapport d&rsquo;exp\u00e9rience utilisateur Chrome des 30 derniers jours.<\/p>\n<p>Il y a aussi deux graphiques qui montrent o\u00f9 votre moyenne entre le <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/first-contentful-paint\/\" target=\"_blank\" rel=\"noopener noreferrer\">First Contentful Paint (FCP)<\/a> et le <a href=\"https:\/\/web.dev\/fid\/\" target=\"_blank\" rel=\"noopener noreferrer\">First Imput Delay (FID)<\/a> tombe :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/donnees-de-terrain.png\" alt=\"Donn\u00e9es de terrain de Google PageSpeed Insights\" width=\"1500\" height=\"565\"><figcaption class=\"wp-caption-text\">Donn\u00e9es de terrain de Google PageSpeed Insights<\/figcaption><\/figure>\n<p>Dans l&rsquo;image ci-dessus, le FCP de notre site est \u00e0 peu pr\u00e8s le m\u00eame que 45\u00a0% des sites du 75e percentile, et notre FID est \u00e0 peu pr\u00e8s le m\u00eame que 9\u00a0% du 95e percentile.<\/p>\n<p><strong>Lab Data<\/strong> montre des donn\u00e9es sp\u00e9cifiques pour un chargement de page simul\u00e9 :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/donees-de-laboratoire.png\" alt=\"Donn\u00e9es de laboratoire de Google PageSpeed Insights\" width=\"1500\" height=\"465\"><figcaption class=\"wp-caption-text\">Donn\u00e9es de laboratoire de Google PageSpeed Insights<\/figcaption><\/figure>\n<p>Vous remarquerez que nos <strong>donn\u00e9es de terrain<\/strong> et de <strong>laboratoire<\/strong> <a href=\"https:\/\/developers.google.com\/speed\/docs\/insights\/v5\/about#faq\">ne correspondent pas exactement<\/a>. C&rsquo;est tout \u00e0 fait normal. Les <strong>donn\u00e9es de laboratoire<\/strong> sont cr\u00e9\u00e9es dans des conditions fixes, tandis que les <strong>donn\u00e9es de terrain<\/strong> utilisent les vitesses de chargement r\u00e9elles recueillies au fil du temps.<\/p>\n<p>Lorsqu&rsquo;on les examine ensemble, les <strong>donn\u00e9es de terrain<\/strong> et les <strong>donn\u00e9es de laboratoire<\/strong> devraient vous donner une id\u00e9e des temps de chargement r\u00e9els de votre site. Comme nous l&rsquo;avons d\u00e9j\u00e0 mentionn\u00e9, c&rsquo;est encore plus important que votre score global de PageSpeed, vous devrez donc faire attention \u00e0 ces chiffres.<\/p>\n<p>Apr\u00e8s avoir pris en compte ces informations, il est temps de commencer \u00e0 am\u00e9liorer les performances de votre site gr\u00e2ce aux recommandations de Google PageSpeed.<\/p>\n<div><\/div><kinsta-auto-toc list-style=\"decimal\" selector=\"h3\" count-number=\"24\" sub-toc=\"true\"><\/kinsta-auto-toc>\n<h3>1. Eliminate render-blocking resources<\/h3>\n<p>L&rsquo;une des recommandations les plus courantes de Google PageSpeed Insights est d&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/eliminer-javascript-css-bloquant-rendu\/\">\u00e9liminer les ressources qui bloquent le rendu<\/a> :<\/p>\n<figure style=\"width: 1476px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/eliminer-d-ressources-bloquant-le-rendu.png\" alt=\"Recommandation d\u2019\u00e9liminer les ressources bloquant le rendu\" width=\"1476\" height=\"468\"><figcaption class=\"wp-caption-text\">Recommandation d\u2019\u00e9liminer les ressources bloquant le rendu<\/figcaption><\/figure>\n<p>Il s&rsquo;agit de scripts JavaScript et CSS qui emp\u00eachent le chargement rapide de votre page. Le navigateur du visiteur doit t\u00e9l\u00e9charger et traiter ces fichiers avant de pouvoir afficher le reste de la page, donc en avoir beaucoup \u00ab\u00a0au-dessus du pli\u00a0\u00bb peut avoir un impact n\u00e9gatif sur la vitesse de votre site.<\/p>\n<p>Vous pouvez en apprendre davantage sur cette question dans notre guide pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/eliminer-javascript-css-bloquant-rendu\/\" target=\"_blank\" rel=\"noopener noreferrer\">\u00e9liminer les scripts bloquant le rendu<\/a>. En ce qui concerne Google, il y a deux solutions que vous devriez envisager :<\/p>\n<ul>\n<li>Si vous n&rsquo;avez pas beaucoup de JavaScript ou de <a href=\"https:\/\/kinsta.com\/fr\/blog\/css-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">CSS<\/a>, vous pouvez les mettre en ligne pour vous d\u00e9barrasser de cet avertissement. Ce processus consiste \u00e0 incorporer votre JavaScript ou CSS dans votre fichier HTML. Vous pouvez le faire avec une extension comme <a href=\"https:\/\/kinsta.com\/fr\/blog\/reglages-autoptimize\/\" target=\"_blank\" rel=\"noopener noreferrer\">Autoptimiser<\/a>. Cependant, cela n&rsquo;est vraiment valable que pour les tr\u00e8s petits sites. La plupart des sites <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-que-wordpress\/\">WordPress<\/a> ont suffisamment de JavaScript pour que cette m\u00e9thode puisse r\u00e9ellement vous ralentir.<\/li>\n<li>L&rsquo;autre option est de <a href=\"https:\/\/kinsta.com\/fr\/blog\/defer-parsing-of-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">diff\u00e9rer votre JavaScript<\/a>. Cet attribut t\u00e9l\u00e9charge votre fichier JavaScript pendant l&rsquo;analyse HTML, mais ne l&rsquo;ex\u00e9cute qu&rsquo;une fois l&rsquo;analyse termin\u00e9e. De plus, les scripts avec cet attribut s&rsquo;ex\u00e9cutent dans l&rsquo;ordre d&rsquo;apparition sur la page.<\/li>\n<\/ul>\n<p>Vous trouverez une liste des ressources les plus touch\u00e9es par ce probl\u00e8me sous la recommandation dans vos r\u00e9sultats de PageSpeed.<\/p>\n<p><strong>Regardez <a href=\"https:\/\/www.youtube.com\/watch?v=ElpcjGBgTGk\">cette vid\u00e9o<\/a> pour en savoir plus sur la fa\u00e7on d&rsquo;\u00e9liminer les ressources qui bloquent le rendu :<\/strong><br \/>\n<kinsta-video src=\"https:\/\/www.youtube.com\/watch?v=ElpcjGBgTGk\"><\/kinsta-video><\/p>\n<h3>2. Avoid chaining critical requests<\/h3>\n<p>Le concept de <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/critical-request-chains\/\" target=\"_blank\" rel=\"noopener noreferrer\">cha\u00eenage des requ\u00eates critiques<\/a> est li\u00e9 au Critical Rendering Path (chemin de rendu critique ou CRP) et \u00e0 la fa\u00e7on dont les navigateurs chargent vos pages. Certains \u00e9l\u00e9ments &#8211; tels que le JavaScript et le CSS dont nous avons parl\u00e9 plus haut &#8211; doivent \u00eatre charg\u00e9s compl\u00e8tement avant que votre page ne devienne visible.<\/p>\n<p>Dans le cadre de cette suggestion, Google PageSpeed Insights vous montrera les cha\u00eenes de requ\u00eate sur la page que vous analysez :<\/p>\n<figure style=\"width: 1496px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/eviter-d-enchainer.png\" alt=\"Recommandation d\u2019\u00e9viter d'encha\u00eener les demandes critiques\" width=\"1496\" height=\"1302\"><figcaption class=\"wp-caption-text\">Recommandation d\u2019\u00e9viter d&rsquo;encha\u00eener les demandes critiques<\/figcaption><\/figure>\n<p>Ce diagramme vous montrera la s\u00e9rie de requ\u00eates d\u00e9pendantes qui doivent \u00eatre satisfaites avant que votre page ne devienne visible. Il vous indiquera \u00e9galement la taille de chaque ressource. Id\u00e9alement, vous souhaitez minimiser le nombre de requ\u00eates d\u00e9pendantes, ainsi que leur taille.<\/p>\n<p>Plusieurs m\u00e9thodes permettant d&rsquo;atteindre ces objectifs sont couvertes par d&rsquo;autres recommandations dont il est question dans le pr\u00e9sent article, notamment<\/p>\n<ul>\n<li>\u00c9liminer les ressources bloquant le rendu<\/li>\n<li>Diff\u00e9rer les images hors \u00e9cran<\/li>\n<li>R\u00e9duire le CSS et le <a href=\"https:\/\/kinsta.com\/fr\/blog\/minifier-javascript\/\">JavaScript<\/a><\/li>\n<\/ul>\n<p>En outre, vous pouvez optimiser l&rsquo;ordre dans lequel les assets sont charg\u00e9s, afin de raccourcir le CRP. Cela signifie qu&rsquo;il faut d\u00e9placer le contenu au-dessus du pli vers le haut de votre fichier HTML. Vous pouvez en apprendre plus sur l&rsquo;optimisation du CRP dans notre article, \u00ab\u00a0<em><a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-chemin-rendu-critique\/\" target=\"_blank\" rel=\"noopener noreferrer\">Comment optimiser le chemin de rendu critique dans WordPress<\/a><\/em>\u00a0\u00bb.<\/p>\n<p>Il est important de noter qu&rsquo;il n&rsquo;y a pas un nombre magique de cha\u00eenes de requ\u00eates critiques sur lesquelles vous devez travailler. Google PageSpeed Insights ne consid\u00e8re pas cet audit comme \u00ab\u00a0r\u00e9ussi\u00a0\u00bb ou \u00ab\u00a0\u00e9chou\u00e9\u00a0\u00bb, contrairement \u00e0 beaucoup de ses autres recommandations. Ces informations sont simplement mises \u00e0 disposition pour vous aider \u00e0 am\u00e9liorer les temps de chargement.<\/p>\n<h3>3. Keep requests counts low and transfer sizes small<\/h3>\n<p>Plus les navigateurs doivent faire de requ\u00eates pour charger vos pages, et plus les ressources que votre serveur renvoie en r\u00e9ponse sont importantes, plus votre site web prend du temps \u00e0 se charger. Par cons\u00e9quent, il est logique que Google vous recommande de r\u00e9duire le nombre de requ\u00eates n\u00e9cessaires et de diminuer la taille de vos ressources.<\/p>\n<p>Comme la recommandation<strong> \u00c9viter d&rsquo;encha\u00eener les requ\u00eates critiques<\/strong>, celle-ci ne se traduit pas par un \u00ab\u00a0succ\u00e8s\u00a0\u00bb ou un \u00ab\u00a0\u00e9chec\u00a0\u00bb. Au lieu de cela, vous verrez simplement une liste du nombre de requ\u00eates faites et de leurs tailles :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/nombre-de-requetes-petite-taille.png\" alt=\"Recommandation pour maintenir le nombre de requ\u00eates \u00e0 un niveau bas et les tailles de transfert de petite taille\" width=\"1500\" height=\"997\"><figcaption class=\"wp-caption-text\">Recommandation pour maintenir le nombre de requ\u00eates \u00e0 un niveau bas et les tailles de transfert de petite taille<\/figcaption><\/figure>\n<p>Il n&rsquo;y a pas de nombre id\u00e9al de requ\u00eates ou de tailles maximales \u00e0 garder \u00e0 l&rsquo;esprit. Google vous recommande plut\u00f4t de d\u00e9finir ces normes pour vous-m\u00eame en cr\u00e9ant un budget de performance. Il s&rsquo;agit d&rsquo;un ensemble d&rsquo;objectifs d\u00e9finis qui peuvent \u00eatre li\u00e9s \u00e0 des aspects tels que :<\/p>\n<ul>\n<li>La taille maximale des images<\/li>\n<li>Le nombre de polices web utilis\u00e9es<\/li>\n<li>Le nombre de ressources externes auxquelles vous faites appel<\/li>\n<li>La taille des scripts et des frameworks<\/li>\n<\/ul>\n<p>La cr\u00e9ation d&rsquo;un budget de performance vous donne un ensemble de normes auxquelles vous devez vous conformer. Lorsque vous d\u00e9passez votre budget, vous pouvez alors d\u00e9cider d&rsquo;\u00e9liminer ou d&rsquo;optimiser les ressources pour vous en tenir \u00e0 vos directives pr\u00e9d\u00e9termin\u00e9es. Vous pouvez <a href=\"https:\/\/web.dev\/your-first-performance-budget\/\" target=\"_blank\" rel=\"noopener noreferrer\">en savoir plus sur la cr\u00e9ation d&rsquo;un tel outil<\/a> dans le guide de Google.<\/p>\n<h3>4. Minify CSS<\/h3>\n<p>Les fichiers CSS sont souvent plus volumineux que n\u00e9cessaire, afin de les rendre plus faciles \u00e0 lire pour les humains. Ils peuvent inclure divers retours \u00e0 la ligne et des espaces qui ne sont pas n\u00e9cessaires pour que les ordinateurs puissent comprendre leur contenu.<\/p>\n<p>La minification de votre CSS est le processus de condenser vos fichiers en \u00e9liminant les caract\u00e8res, les espaces et les doublons inutiles. Google recommande cette pratique car elle r\u00e9duit la taille de vos fichiers CSS et peut donc am\u00e9liorer la vitesse de chargement :<\/p>\n<figure style=\"width: 1456px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/minifier-le-css.png\" alt=\"Recommandation de minifier le CSS\" width=\"1456\" height=\"382\"><figcaption class=\"wp-caption-text\">Recommandation de minifier le CSS<\/figcaption><\/figure>\n<p>Pour minifier vos fichiers CSS, nous vous recommandons d&rsquo;utiliser une extension telle que <a href=\"https:\/\/kinsta.com\/fr\/blog\/reglages-autoptimize\/#css-options\">Autoptimize<\/a> ou <a href=\"https:\/\/wp-rocket.me\/\">WP Rocket<\/a>.<\/p>\n<h3>5. Minify JavaScript<\/h3>\n<p>Tout comme vous pouvez r\u00e9duire la taille des fichiers CSS gr\u00e2ce \u00e0 la minification, il en va de m\u00eame pour vos fichiers JavaScript :<\/p>\n<figure style=\"width: 1456px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/minifier-le-javascript.png\" alt=\"Recommandation de minifier le JavaScript\" width=\"1456\" height=\"380\"><figcaption class=\"wp-caption-text\">Recommandation de minifier le JavaScript<\/figcaption><\/figure>\n<p>Autoptimiser ou WP Rocket peut \u00e9galement g\u00e9rer cette t\u00e2che pour votre site WordPress.<\/p>\n<h3>6. Remove unused CSS<\/h3>\n<p>Tout code dans votre feuille de style est un contenu qui doit \u00eatre charg\u00e9 pour que votre page devienne visible aux utilisateurs. S&rsquo;il y a des CSS sur votre site qui ne sont pas vraiment utiles, cela nuit inutilement \u00e0 vos performances.<\/p>\n<p>C&rsquo;est pourquoi Google recommande de <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/unused-css-rules\/\" target=\"_blank\" rel=\"noopener noreferrer\">supprimer les CSS non utilis\u00e9s<\/a> :<\/p>\n<figure style=\"width: 1452px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/supprimer-css-non-utilise.png\" alt=\"Recommandation de supprimer le CSS non utilis\u00e9\" width=\"1452\" height=\"552\"><figcaption class=\"wp-caption-text\">Recommandation de supprimer le CSS non utilis\u00e9<\/figcaption><\/figure>\n<p>La solution ici est essentiellement la m\u00eame que celle pour \u00e9liminer les CSS bloquant le rendu. Vous pouvez mettre en ligne ou diff\u00e9rer les styles de la mani\u00e8re la plus logique pour vos pages. Vous pouvez \u00e9galement utiliser un outil tel que <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/\" target=\"_blank\" rel=\"noopener noreferrer\">Chrome DevTools<\/a> pour <a href=\"https:\/\/developer.chrome.com\/docs\/devtools\/coverage\/\" target=\"_blank\" rel=\"noopener noreferrer\">trouver les CSS non utilis\u00e9s<\/a> devant \u00eatre optimis\u00e9s.<\/p>\n<h3>7. Minimize main-thread work<\/h3>\n<p>Le \u00ab\u00a0fil conducteur (ou Main Thread)\u00a0\u00bb est l&rsquo;\u00e9l\u00e9ment principal du navigateur d&rsquo;un utilisateur qui est responsable de la transformation du code en une page web avec laquelle les visiteurs peuvent interagir. Il analyse et ex\u00e9cute le HTML, le CSS et le JavaScript. De plus, il est charg\u00e9 de g\u00e9rer les interactions avec les utilisateurs.<\/p>\n<p>Cela signifie que, lorsque le fil conducteur travaille dans le code de votre site, il ne peut pas \u00e9galement traiter les requ\u00eates des utilisateurs. Si le travail du fil conducteur de votre site prend trop de temps, cela peut entra\u00eener une mauvaise UX et des temps de chargement de page lents.<\/p>\n<p>Google PageSpeed signale les pages qui prennent plus de quatre secondes pour compl\u00e9ter le travail du fil conducxteur et pr\u00e9senter une page web utilisable :<\/p>\n<figure style=\"width: 1452px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/minimiser-le-travail-du-fil-conducteur.png\" alt=\"Recommandation de minimiser le travail du fil conducteur\" width=\"1452\" height=\"254\"><figcaption class=\"wp-caption-text\">Recommandation de minimiser le travail du fil conducteur<\/figcaption><\/figure>\n<p>Certaines des m\u00e9thodes utilis\u00e9es pour r\u00e9duire le travail du fil conducteur ont d\u00e9j\u00e0 \u00e9t\u00e9 couvertes dans d&rsquo;autres sections de cet article, notamment<\/p>\n<ul>\n<li>Minification du code<\/li>\n<li>Suppression du code non utilis\u00e9<\/li>\n<li>Impl\u00e9menter le cache<\/li>\n<\/ul>\n<p>Cependant, vous pouvez \u00e9galement envisager de fractionner le code. Ce processus consiste \u00e0 d\u00e9composer votre JavaScript en paquets qui s&rsquo;ex\u00e9cutent quand ils sont n\u00e9cessaires, au lieu de demander aux navigateurs de les charger tous avant que la page ne devienne interactive.<\/p>\n<p><a href=\"https:\/\/webpack.js.org\/guides\/code-splitting\/\" target=\"_blank\" rel=\"noopener noreferrer\">Webpack<\/a> est souvent utilis\u00e9 pour impl\u00e9menter le fractionnement de code. Veuillez noter qu&rsquo;il s&rsquo;agit d&rsquo;une technique assez avanc\u00e9e qui n&rsquo;est g\u00e9n\u00e9ralement pas recommand\u00e9e aux d\u00e9butants.<\/p>\n<h3>8. Reduce JavaScript execution time<\/h3>\n<p>L&rsquo;ex\u00e9cution de JavaScript est souvent le contributeur le plus important au travail sur les fils conducteurs. PageSpeed Insights a une recommandation s\u00e9par\u00e9e pour vous alerter si cette t\u00e2che a un impact significatif sur la performance de votre site :<\/p>\n<figure style=\"width: 1452px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/reduire-le-temps-d-execution-de-javascript.png\" alt=\"Recommandation de r\u00e9duire le temps d'ex\u00e9cution de JavaScript\" width=\"1452\" height=\"254\"><figcaption class=\"wp-caption-text\">Recommandation de r\u00e9duire le temps d&rsquo;ex\u00e9cution de JavaScript<\/figcaption><\/figure>\n<p>Les m\u00e9thodes sugg\u00e9r\u00e9es ci-dessus pour r\u00e9duire le travail du fil conducteur devraient \u00e9galement r\u00e9soudre cet avertissement dans vos r\u00e9sultats de PageSpeed.<\/p>\n<h3>9. Server response times are low (TTFB)<\/h3>\n<p>Le d\u00e9lai avant le premier octet (Time to First Byte ou TTFB) est une mesure du temps qu&rsquo;il faut \u00e0 un navigateur pour recevoir le premier octet de donn\u00e9es en retour du serveur de votre site apr\u00e8s avoir fait une requ\u00eate. Bien que cela ne soit pas la m\u00eame chose que la vitesse globale de votre site, un faible TTFB est naturellement bon pour les performances de votre site.<\/p>\n<p>Par cons\u00e9quent, la r\u00e9duction des temps de r\u00e9ponse des serveurs fait partie des recommandations de Google PageSpeed Insights. Si vous \u00eates en mesure d&rsquo;obtenir un faible TTFB, vous verrez ce message sous <strong>V\u00e9rifications r\u00e9ussies<\/strong> :<\/p>\n<figure style=\"width: 1464px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/message.png\" alt=\"Message pour les temps de r\u00e9ponse du serveur sont faibles\" width=\"1464\" height=\"382\"><figcaption class=\"wp-caption-text\">Message pour les temps de r\u00e9ponse du serveur sont faibles<\/figcaption><\/figure>\n<p>Plusieurs facteurs peuvent influencer votre TTFB. Voici quelques strat\u00e9gies pour les r\u00e9duire :<\/p>\n<ul>\n<li>Choisir un <a href=\"https:\/\/kinsta.com\/fr\/tarifs\/\">h\u00e9bergeur web de haute qualit\u00e9<\/a> qui met l&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/hebergement-wordpress\/\">accent sur la vitesse<\/a><\/li>\n<li>Utiliser des th\u00e8mes et des extensions l\u00e9gers<\/li>\n<li>R\u00e9duire le nombre d\u2019extensions install\u00e9es sur votre site<\/li>\n<li>Utiliser un r\u00e9seau de diffusion de contenu (Content Delivery Network ou CDN)<\/li>\n<li>Mettre en \u0153uvre la mise en cache du navigateur<\/li>\n<li>S\u00e9lectionner un fournisseur de syst\u00e8me de noms de domaine (DNS) solide<\/li>\n<\/ul>\n<p>Notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/ttfb\/\" target=\"_blank\" rel=\"noopener noreferrer\">article sur TTFB<\/a> est une excellente ressource pour plus de d\u00e9tails sur l&rsquo;optimisation dans ce domaine.<\/p>\n<h3>10. Properly size images<\/h3>\n<p>Les fichiers m\u00e9dias tels que les images peuvent \u00eatre un v\u00e9ritable frein \u00e0 la performance de votre site. Les dimensionner correctement est un moyen simple de r\u00e9duire vos temps de chargement :<\/p>\n<figure style=\"width: 1458px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/taille-correcte-des-images.png\" alt=\"Recommandation de taille correcte des images\" width=\"1458\" height=\"512\"><figcaption class=\"wp-caption-text\">Recommandation de taille correcte des images<\/figcaption><\/figure>\n<p>Si votre page comprend des images plus grandes que n\u00e9cessaire, le CSS est utilis\u00e9 pour les redimensionner de mani\u00e8re appropri\u00e9e. Cela prend plus de temps que le simple chargement des images \u00e0 la bonne taille au d\u00e9part, ce qui a un impact sur les performances de votre page.<\/p>\n<p>Pour r\u00e9soudre ce probl\u00e8me, vous pouvez soit t\u00e9l\u00e9verser des images aux tailles appropri\u00e9es, soit utiliser des \u00ab\u00a0images responsives\u00a0\u00bb. Cela implique la cr\u00e9ation d&rsquo;images de tailles diff\u00e9rentes pour divers appareils.<\/p>\n<p>Vous pouvez le faire en utilisant <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/HTML\/Multimedia_and_embedding\/Responsive_images\">l&rsquo;attribut<strong> srcset<\/strong><\/a>, qui est ajout\u00e9 aux balises <strong>&lt;img&gt;<\/strong> pour sp\u00e9cifier des fichiers images alternatifs de tailles diff\u00e9rentes. Les navigateurs peuvent lire cette liste, d\u00e9terminer quelle option est la meilleure pour l&rsquo;\u00e9cran actuel et fournir cette version de votre image.<\/p>\n<p>Par exemple, disons que vous avez une image d&rsquo;en-t\u00eate et que vous voulez la rendre responsive. Vous pouvez en t\u00e9l\u00e9verser trois versions de 800, 480 et 320 pixels de large. Ensuite, vous appliqueriez l&rsquo;attribut<strong> srcset,<\/strong> comme ceci :<\/p>\n<pre><code class=\"language-html\">&lt;img srcset=\"header-image-800w.jpg 880w,\n\t\tHeader-image-480w.jpg 480w,\n\t\tHeader-image-320w.jpg 320w\"\n\tsizes=\"(max-width: 320px) 280px,\n\t\t(max-width: 480px) 440px,\n\t\t800px\"\n\tsrc=\"header-image-800w.jpg\"&gt;<\/code><\/pre>\n<p>L&rsquo;attribut <strong>srcset<\/strong> sp\u00e9cifie les diff\u00e9rents fichiers disponibles, et l&rsquo;attribut<strong> sizes<\/strong> indique aux navigateurs lequel doit \u00eatre utilis\u00e9 en fonction de la taille d&rsquo;\u00e9cran actuelle.<\/p>\n<h3>11. Defer offscreen images<\/h3>\n<p>Le processus de diff\u00e9rer des images hors \u00e9cran est plus commun\u00e9ment appel\u00e9 \u00ab\u00a0chargement paresseux (ou Lazy Loading)\u00a0\u00bb. Cela signifie qu&rsquo;au lieu de faire en sorte que le navigateur charge toutes les images d&rsquo;une page avant d&rsquo;afficher le contenu ci-dessus, il ne charge que celles qui sont imm\u00e9diatement visibles.<\/p>\n<p>Moins de chargement avant que la page ne devienne visible signifie de meilleures performances, c&rsquo;est pourquoi Google recommande cette m\u00e9thode :<\/p>\n<figure style=\"width: 1452px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/differer-les-images-hors-ecran.png\" alt=\"Recommandation de diff\u00e9rer les images hors \u00e9cran\" width=\"1452\" height=\"416\"><figcaption class=\"wp-caption-text\">Recommandation de diff\u00e9rer les images hors \u00e9cran<\/figcaption><\/figure>\n<p>Il existe de nombreuses extensions WordPress con\u00e7ues sp\u00e9cialement pour le chargement paresseux, notamment <a href=\"https:\/\/wordpress.org\/plugins\/a3-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">a3 Lazy Load<\/a> et <a href=\"https:\/\/wordpress.org\/plugins\/rocket-lazy-load\/\" target=\"_blank\" rel=\"noopener noreferrer\">Lazy Load by WP Rocket<\/a>. Diverses extensions d&rsquo;optimisation d&rsquo;images et de performances tels qu&rsquo;<a href=\"https:\/\/kinsta.com\/fr\/blog\/reglages-autoptimize\/#image-optimization-in-autoptimize\">Autoptimize ont \u00e9galement des fonctions de chargement paresseux<\/a>. Consultez notre guide complet sur le <a href=\"https:\/\/kinsta.com\/fr\/blog\/lazy-load-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">chargement paresseux d&rsquo;images et de vid\u00e9os sur WordPress<\/a>.<\/p>\n<h3>12. Efficiently encode images<\/h3>\n<p>Comme nous l&rsquo;avons mentionn\u00e9 plus t\u00f4t dans cet article, les images ont un impact significatif sur la performance de votre site. Une des meilleures pratiques d&rsquo;optimisation les plus \u00e9l\u00e9mentaires que vous pouvez souhaiter est <a href=\"https:\/\/kinsta.com\/fr\/blog\/compression-avec-perte\/\" target=\"_blank\" rel=\"noopener noreferrer\">la compression<\/a> qui peut aider \u00e0 r\u00e9duire la taille de vos fichiers pour qu&rsquo;ils se chargent plus rapidement. C&rsquo;est aussi la principale m\u00e9thode pour suivre la recommandation de Google d&rsquo;<strong>encoder efficacement les images<\/strong> :<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/encodage-efficace-des-images.png\" alt=\"Recommandation d'encodage efficace des images\" width=\"1454\" height=\"336\"><figcaption class=\"wp-caption-text\">Recommandation d&rsquo;encodage efficace des images<\/figcaption><\/figure>\n<p>L&rsquo;essentiel est d&rsquo;obtenir des fichiers de taille aussi r\u00e9duite que possible, sans sacrifier la qualit\u00e9 des images elles-m\u00eames. Des extensions telles que <a href=\"https:\/\/wordpress.org\/plugins\/imagify\/\">Imagify<\/a> et <a href=\"https:\/\/wordpress.org\/plugins\/wp-smushit\/\">Smush<\/a> peuvent vous aider dans cette t\u00e2che. Vous pouvez en apprendre davantage plus \u00e0 leur sujet dans notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/optimiser-les-images-pour-le-web\/\">guide pour l&rsquo;optimisation des images<\/a>.<\/p>\n<p>D&rsquo;autres recommandations qui influencent la r\u00e9ussite ou l&rsquo;\u00e9chec de l&rsquo;audit d&rsquo;<strong>encodage efficace des images<\/strong> incluent :<\/p>\n<ul>\n<li>Servir des images \u00e0 la bonne taille<\/li>\n<li>Mise en \u0153uvre du chargement paresseux (report des images hors \u00e9cran)<\/li>\n<li>Conversion des images aux formats de fichiers de la prochaine g\u00e9n\u00e9ration, comme WebP<\/li>\n<li>Utilisation de formats vid\u00e9o pour le contenu anim\u00e9, tels que les GIF<\/li>\n<\/ul>\n<p>En plus de compresser vos images, vous pouvez suivre les \u00e9tapes pour r\u00e9aliser ces suggestions comme d\u00e9crit ailleurs dans cet article.<\/p>\n<h3>13. Serve images in next-gen formats<\/h3>\n<p>Certains formats de fichier image se chargent plus rapidement que d&rsquo;autres. Malheureusement, ce ne sont pas les formats <strong>PNG<\/strong> ou <strong>JPEG<\/strong> les plus courants. Les <a href=\"https:\/\/kinsta.com\/fr\/blog\/webp\/\" target=\"_blank\" rel=\"noopener noreferrer\">images <strong>WebP<\/strong><\/a> deviennent la nouvelle norme, et Google PageSpeed vous informera si vos images n&rsquo;y adh\u00e8rent pas :<\/p>\n<figure style=\"width: 1452px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/images-formats.png\" alt=\"Recommandation de servir les images dans les formats de prochaine g\u00e9n\u00e9ration\" width=\"1452\" height=\"368\"><figcaption class=\"wp-caption-text\">Recommandation de servir les images dans les formats de prochaine g\u00e9n\u00e9ration<\/figcaption><\/figure>\n<p>Cette recommandation peut sembler difficile \u00e0 suivre, car vous avez probablement d\u00e9j\u00e0 de nombreuses images sur votre site. Heureusement, il existe des extensions qui peuvent aider. Par exemple, Imagify et Smush offrent tous deux une fonction de conversion WebP.<\/p>\n<h3>14. Use video formats for animated content<\/h3>\n<p>Les GIFs peuvent \u00eatre <a href=\"https:\/\/kinsta.com\/fr\/blog\/gifs-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">une forme efficace de contenu visuel<\/a> dans une vari\u00e9t\u00e9 de situations. Les parcours de tutoriel, les \u00e9valuations de fonctionnalit\u00e9s et m\u00eame les animations humoristiques peuvent tous \u00e9lever vos articles et les rendre plus agr\u00e9ables et plus pr\u00e9cieux pour les lecteurs.<\/p>\n<p>Malheureusement, ces avantages ont un co\u00fbt pour votre performance. Les GIFs sont exigeants \u00e0 charger, c&rsquo;est pourquoi PageSpeed Insights recommande plut\u00f4t de fournir du contenu vid\u00e9o :<\/p>\n<figure style=\"width: 1452px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/formats-vidoe.png\" alt=\"Recommandation d\u2019utiliser les formats vid\u00e9o pour le contenu anim\u00e9\" width=\"1452\" height=\"434\"><figcaption class=\"wp-caption-text\">Recommandation d\u2019utiliser les formats vid\u00e9o pour le contenu anim\u00e9<\/figcaption><\/figure>\n<p>Malheureusement, la conversion des GIFs en formats vid\u00e9o n&rsquo;est pas le processus le plus simple. Tout d&rsquo;abord, vous devrez d\u00e9cider quel type de vid\u00e9o vous voulez utiliser :<\/p>\n<ul>\n<li><strong>MP4 :<\/strong> Produit des fichiers l\u00e9g\u00e8rement plus volumineux, mais est compatible avec la <a href=\"https:\/\/kinsta.com\/fr\/parts-de-marche-des-navigateurs\/\">plupart des principaux navigateurs<\/a>.<\/li>\n<li><strong>WebM :<\/strong> Le format vid\u00e9o le plus optimis\u00e9, bien qu&rsquo;il soit peu compatible avec les navigateurs.<\/li>\n<\/ul>\n<p>Une fois que vous avez fait le choix le plus judicieux pour votre site, vous devrez convertir les formats de fichiers. La meilleure fa\u00e7on de le faire est de passer par la ligne de commande. Pour commencer, installez <a href=\"https:\/\/www.ffmpeg.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">FFmpeg<\/a>. C&rsquo;est un outil open-source pour la conversion des formats de fichiers :<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/ffmpeg.png\" alt=\"Outil de conversion du format de fichier FFmpeg pour la vid\u00e9o et l'audio\" width=\"1500\" height=\"897\"><figcaption class=\"wp-caption-text\">Outil de conversion du format de fichier FFmpeg pour la vid\u00e9o et l&rsquo;audio<\/figcaption><\/figure>\n<p>Ensuite, ouvrez votre interface de ligne de commande et ex\u00e9cutez la commande suivante :<\/p>\n<pre><code>ffmpeg -i input.gif output.mp4<\/code><\/pre>\n<p>Ceci convertira le GIF avec le nom de fichier <strong>input.gif<\/strong> en une vid\u00e9o MP4 avec le nom de fichier <strong>output.mp4<\/strong>. Le changement de format n&rsquo;est cependant qu&rsquo;un d\u00e9but. Vous devez maintenant int\u00e9grer la vid\u00e9o obtenue sur votre site de mani\u00e8re \u00e0 ce qu&rsquo;elle apparaisse comme un GIF anim\u00e9.<\/p>\n<h4>Int\u00e9gration de contenu vid\u00e9o pour les animations<\/h4>\n<p>Comme vous l&rsquo;avez probablement remarqu\u00e9 si vous avez d\u00e9j\u00e0 vu un GIF, ils sont l\u00e9g\u00e8rement diff\u00e9rents des vid\u00e9os normales. En g\u00e9n\u00e9ral, ils se lancent automatiquement et tournent en boucle, et ils sont toujours sans son. L&rsquo;int\u00e9gration de votre nouveau fichier MP4 ou WebM sur votre site ne produira pas ces fonctionnalit\u00e9s.<\/p>\n<p>Cependant, vous <em>pouvez<\/em> les recr\u00e9er avec un code tr\u00e8s simple. T\u00e9l\u00e9versez votre vid\u00e9o dans votre biblioth\u00e8que de m\u00e9dias, puis ajoutez ce qui suit \u00e0 la page ou \u00e0 l\u2019article o\u00f9 vous voulez inclure votre GIF :<\/p>\n<pre><code>&lt;video autoplay loop muted playsinline&gt;\n&lt;source src=\"output.mp4\" type=\"video\/mp4\"&gt;\n&lt;\/video&gt;<\/code><\/pre>\n<p>Cela appliquera les attributs sp\u00e9cifi\u00e9s \u00e0 votre vid\u00e9o, la faisant appara\u00eetre plus \u00abcomme un GIF\u00a0\u00bb. Il suffit d&rsquo;adapter le nom et le type de fichier pour qu&rsquo;il corresponde \u00e0 celui de votre ressource. Pour plus de d\u00e9tails sur ce sujet, nous vous sugg\u00e9rons de lire le guide de Google sur <a href=\"https:\/\/web.dev\/replace-gifs-with-videos\/\" target=\"_blank\" rel=\"noopener noreferrer\">la conversion des GIFs<\/a>\u00a0en vid\u00e9os.<\/p>\n<h3>15. Ensure text remains visible during webfont load<\/h3>\n<p>Comme les images, les polices ont tendance \u00e0 \u00eatre de gros fichiers qui prennent beaucoup de temps \u00e0 charger. Dans certains cas, les navigateurs peuvent masquer votre texte jusqu&rsquo;\u00e0 ce que la police que vous utilisez se charge compl\u00e8tement, ce qui entra\u00eenera cette recommandation de Google PageSpeed Insights :<\/p>\n<figure style=\"width: 1458px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/chargement-de-la-police-web.png\" alt=\"Recommandation de s'assurer que le texte reste visible pendant le chargement de la police web\" width=\"1458\" height=\"244\"><figcaption class=\"wp-caption-text\">Recommandation de s&rsquo;assurer que le texte reste visible pendant le chargement de la police web<\/figcaption><\/figure>\n<p><a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/font-display\/\">Google vous conseille<\/a> de r\u00e9soudre ce probl\u00e8me en appliquant la directive <strong>swap<\/strong> de Font-Display dans votre style<strong> @font-face<\/strong>. Pour ce faire, acc\u00e9dez \u00e0 votre feuille de style (<strong>style.css<\/strong>) et ajoutez ce qui suit apr\u00e8s l&rsquo;attribut <strong>src<\/strong> sous <strong>@font-face<\/strong> :<\/p>\n<p>font-display: swap<\/p>\n<p>Vous pouvez en apprendre davantage sur l&rsquo;optimisation des polices web dans notre article \u00ab\u00a0<em><a href=\"https:\/\/kinsta.com\/fr\/blog\/comment-changer-polices-wordpress\/#optimize\" target=\"_blank\" rel=\"noopener noreferrer\">Comment changer les polices dans WordPress<\/a>\u00a0<\/em>\u00bb et notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/polices-local\/\" target=\"_blank\" rel=\"noopener noreferrer\">guide approfondi sur l&rsquo;h\u00e9bergement des polices locales<\/a>.<\/p>\n<h3>16. Enable text compression<\/h3>\n<p>La recommandation de Google PageSpeed Insights relative \u00e0 l\u2019<strong>activation de la <\/strong><strong>compression de texte<\/strong> se r\u00e9f\u00e8re \u00e0 l&rsquo;utilisation de la compression GZIP :<\/p>\n<figure style=\"width: 1456px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/activer-la-compression-de-texte.png\" alt=\"Recommandation d\u2019activer la compression de texte\" width=\"1456\" height=\"376\"><figcaption class=\"wp-caption-text\">Recommandation d\u2019activer la compression de texte<\/figcaption><\/figure>\n<p>Dans certains cas (comme vous pouvez le voir dans l&rsquo;image ci-dessus), la compression de texte sera automatiquement activ\u00e9e sur votre serveur. Si ce n&rsquo;est pas le cas pour votre site, vous avez plusieurs options pour suivre cette recommandation.<\/p>\n<p>La premi\u00e8re consiste \u00e0 installer une extension avec une fonction de compression GZIP. WP Rocket est une solution viable si vous \u00eates pr\u00eat \u00e0 payer pour cela.<\/p>\n<p>Vous pouvez \u00e9galement compresser votre texte manuellement. Cela implique de modifier votre fichier<a href=\"https:\/\/kinsta.com\/fr\/blog\/fichier-htaccess-wordpress\/\"><strong> .htaccess<\/strong><\/a>, ce qui peut \u00eatre risqu\u00e9, donc assurez-vous d&rsquo;avoir une sauvegarde r\u00e9cente sous la main.<\/p>\n<p>La plupart des sites WordPress fonctionnent sur des serveurs Apache. Le code pour <a href=\"https:\/\/kinsta.com\/fr\/blog\/activer-gzip-compression\/\" target=\"_blank\" rel=\"noopener noreferrer\">l&rsquo;activation de la compression GZIP<\/a> ressemble \u00e0 ceci :<\/p>\n<pre><code class=\"apacheconf\">  # Compress HTML, CSS, JavaScript, Text, XML and fonts\n  AddOutputFilterByType DEFLATE application\/javascript\n  AddOutputFilterByType DEFLATE application\/rss+xml\n  AddOutputFilterByType DEFLATE application\/vnd.ms-fontobject\n  AddOutputFilterByType DEFLATE application\/x-font\n  AddOutputFilterByType DEFLATE application\/x-font-opentype\n  AddOutputFilterByType DEFLATE application\/x-font-otf\n  AddOutputFilterByType DEFLATE application\/x-font-truetype\n  AddOutputFilterByType DEFLATE application\/x-font-ttf\n  AddOutputFilterByType DEFLATE application\/x-javascript\n  AddOutputFilterByType DEFLATE application\/xhtml+xml\n  AddOutputFilterByType DEFLATE application\/xml\n  AddOutputFilterByType DEFLATE font\/opentype\n  AddOutputFilterByType DEFLATE font\/otf\n  AddOutputFilterByType DEFLATE font\/ttf\n  AddOutputFilterByType DEFLATE image\/svg+xml\n  AddOutputFilterByType DEFLATE image\/x-icon\n  AddOutputFilterByType DEFLATE text\/css\n  AddOutputFilterByType DEFLATE text\/html\n  AddOutputFilterByType DEFLATE text\/javascript\n  AddOutputFilterByType DEFLATE text\/plain\n  AddOutputFilterByType DEFLATE text\/xml\n\n  # Remove browser bugs (only needed for really old browsers)\n  BrowserMatch ^Mozilla\/4 gzip-only-text\/html\n  BrowserMatch ^Mozilla\/4\\.0[678] no-gzip\n  BrowserMatch \\bMSIE !no-gzip !gzip-only-text\/html\n  Header append Vary User-Agent\n<\/code><\/pre>\n<p>Vous devriez l&rsquo;ajouter apr\u00e8s <strong>#END<\/strong> dans votre fichier <strong>.htaccess. <\/strong>Si vous avez votre site WordPress sur un serveur Nginx, vous devriez plut\u00f4t ajouter le code suivant \u00e0 votre fichier<strong> nginx.conf<\/strong><\/p>\n<pre><code class=\"nginx\">36 gzip on;\n37 gzip_disable \"MSIE [1-6]\\.(?!.*SV1)\";\n38 gzip_vary on;\n39 gzip_types text\/plain text\/css text\/javascript application\/javascript application\/x-javascript;<\/code><\/pre>\n<p>Si vous souhaitez v\u00e9rifier la compression du texte de votre site, nous vous sugg\u00e9rons d&rsquo;utiliser un outil tel que <a href=\"https:\/\/www.giftofspeed.com\/gzip-test\/\" target=\"_blank\" rel=\"noopener noreferrer\">GiftOfSpeed<\/a>\u00a0:<\/p>\n<figure style=\"width: 1500px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/controle-giftofspeed.png\" alt=\"Contr\u00f4le GiftOfSpeed de compression GZIP\" width=\"1500\" height=\"884\"><figcaption class=\"wp-caption-text\">Contr\u00f4le GiftOfSpeed de compression GZIP<\/figcaption><\/figure>\n<p>Cela vous permettra de savoir si la compression GZIP a bien \u00e9t\u00e9 impl\u00e9ment\u00e9e, ainsi que le type de serveur sur lequel votre site tourne et quelques autres d\u00e9tails cl\u00e9s.<\/p>\n<h3>17. Preconnect to required origins<\/h3>\n<p>Il y a de fortes chances que vous ayez au moins une ressource tierce sur votre site &#8211; Google Analytics en est un exemple courant. Les navigateurs peuvent mettre du temps \u00e0 \u00e9tablir une connexion avec ces ressources, ce qui ralentit la vitesse de chargement.<\/p>\n<p>L&rsquo;utilisation des attributs de<strong> pr\u00e9-connexion<\/strong> peut indiquer imm\u00e9diatement aux navigateurs qu&rsquo;il y a des scripts tiers sur votre page qui doivent \u00eatre charg\u00e9s. Le processus de requ\u00eate peut alors s&rsquo;enclencher d\u00e8s que possible, am\u00e9liorant ainsi votre performance.<\/p>\n<p>Si Google estime que votre page pourrait b\u00e9n\u00e9ficier de cette technique, vous verrez la suggestion de<strong> pr\u00e9-connexion aux origines n\u00e9cessaires<\/strong> :<\/p>\n<figure style=\"width: 1454px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/pre-connexion-aux-origines-necessaires.png\" alt=\"Recommandation de pr\u00e9-connexion aux origines n\u00e9cessaires\" width=\"1454\" height=\"254\"><figcaption class=\"wp-caption-text\">Recommandation de pr\u00e9-connexion aux origines n\u00e9cessaires<\/figcaption><\/figure>\n<p>Il y a plusieurs fa\u00e7ons de mettre en \u0153uvre cette strat\u00e9gie d&rsquo;optimisation. Si vous \u00eates \u00e0 l&rsquo;aise avec la modification de vos fichiers de th\u00e8me WordPress, vous pouvez ajouter une balise de lien \u00e0 votre fichier<strong> header.php. <\/strong>Voici un exemple :<\/p>\n<pre><code class=\"language-html\">&lt;link rel=\u201cpreconnect\u201d href=\u201cexample.com\u201d&gt;<\/code><\/pre>\n<p>Dans ce cas, la balise indique aux navigateurs qu&rsquo;ils doivent \u00e9tablir une connexion \u00e0 <strong>exemple.com <\/strong>le plus rapidement possible. Google PageSpeed Insights r\u00e9pertorie toutes les ressources pertinentes pour lesquelles vous devez ajouter des balises de lien avec des attributs de pr\u00e9-connexion.<\/p>\n<p>L&rsquo;autre option est d&rsquo;utiliser une extension pour obtenir le m\u00eame effet. <a href=\"https:\/\/perfmatters.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Perfmatters<\/a> inclut une fonction de pr\u00e9-connexion (avertissement : je suis l&rsquo;un des fondateurs de Perfmatters). WP Rocket et <a href=\"https:\/\/wordpress.org\/plugins\/pre-party-browser-hints\/\">Pr\u00e9* Party Resource Hints<\/a> comprennent une fonctionnalit\u00e9 similaire.<\/p>\n<h3>18. Preload key requests<\/h3>\n<p>Comme pour la recommandation de <strong>pr\u00e9-connexion aux origines n\u00e9cessaires<\/strong>, suivre cette suggestion vous permet de minimiser le nombre de requ\u00eates que les navigateurs doivent faire au serveur de votre site. Cependant, plut\u00f4t que de se connecter \u00e0 des ressources tierces, le <strong>pr\u00e9chargement de requ\u00eates cl\u00e9s<\/strong> se r\u00e9f\u00e8re au chargement des ressources critiques sur votre propre serveur :<\/p>\n<figure id=\"attachment_65557\" aria-describedby=\"caption-attachment-65557\" style=\"width: 1446px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65557\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/prechargeent-des-requetes-cles.png\" alt=\"Recommandation de pr\u00e9chargement des requ\u00eates cl\u00e9s\" width=\"1446\" height=\"250\"><figcaption id=\"caption-attachment-65557\" class=\"wp-caption-text\">Recommandation de pr\u00e9chargement des requ\u00eates cl\u00e9s<\/figcaption><\/figure>\n<p>La mise en \u0153uvre de cette technique est \u00e9galement tr\u00e8s similaire \u00e0 la recommandation pr\u00e9c\u00e9dente. Vous pouvez ajouter \u00e0 votre fichier<strong> header.php<\/strong> des balises de liens sp\u00e9cifiant les ressources list\u00e9es dans PageSpeed Insights :<\/p>\n<pre><code class=\"language-html\">&lt;link rel=\u201cpreload\u201d href=\u201cexample.com\u201d&gt;<\/code><\/pre>\n<p>Vous pouvez \u00e9galement incorporer cette balise en utilisant Perfmatters, WP Rocket ou Pre* Party Resource Hints.<\/p>\n<h3>19. Avoid multiple page redirects<\/h3>\n<p>Les redirections sont utilis\u00e9es lorsque vous voulez qu&rsquo;une URL pointe vers une autre. Elles sont couramment employ\u00e9es lorsque vous d\u00e9placez ou supprimez une page de votre site. Bien qu&rsquo;il n&rsquo;y ait rien de mal \u00e0 utiliser les redirections en g\u00e9n\u00e9ral, elles causent des retards suppl\u00e9mentaires dans le temps de chargement.<\/p>\n<p>Si vous avez <a href=\"https:\/\/kinsta.com\/fr\/blog\/err_too_many_redirects\/\">trop de redirections<\/a> sur votre site, vous pouvez voir cette recommandation dans Google PageSpeed Insights :<\/p>\n<figure id=\"attachment_65559\" aria-describedby=\"caption-attachment-65559\" style=\"width: 1460px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65559\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/redirections-multiples-de-page.png\" alt=\"Recommandation d\u2019\u00e9viter les redirections multiples de page\" width=\"1460\" height=\"204\"><figcaption id=\"caption-attachment-65559\" class=\"wp-caption-text\">Recommandation d\u2019\u00e9viter les redirections multiples de page<\/figcaption><\/figure>\n<p>La seule chose que vous pouvez faire en r\u00e9ponse \u00e0 cette recommandation est de vous assurer que vous n&rsquo;utilisez les redirections que lorsque c&rsquo;est absolument n\u00e9cessaire. Vous pouvez en apprendre plus sur le processus de cr\u00e9ation dans notre article, <em>\u00ab\u00a0<\/em><a href=\"https:\/\/kinsta.com\/fr\/blog\/redirections-wordpress\/\"><em>Redirections WordPress \u2013 Meilleures pratiques pour de meilleures performances<\/em><\/a> \u00bb.<\/p>\n<h3>20. Serve\u00a0 Static assets with an efficient cache policy<\/h3>\n<p>Si vous utilisez Google PageSpeed Insights depuis un certain temps, vous connaissez peut-\u00eatre mieux cette recommandation sous le nom d&rsquo;avertissement de <strong>influence de mise en cache du navigateur<\/strong>. Dans la version 5, il est maintenant labelis\u00e9 comme <strong>Serve Static Assets With an Efficient Cache Policy<\/strong> :<\/p>\n<figure id=\"attachment_65553\" aria-describedby=\"caption-attachment-65553\" style=\"width: 1452px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65553\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/politique-de-mise-en-cache-efficace.png\" alt=\"Recommandation d\u2019actifs statiques du serveur avec une politique de mise en cache efficace\" width=\"1452\" height=\"338\"><figcaption id=\"caption-attachment-65553\" class=\"wp-caption-text\">Recommandation d\u2019actifs statiques du serveur avec une politique de mise en cache efficace<\/figcaption><\/figure>\n<p>Cette suggestion comporte quelques couches que nous devons examiner. La premi\u00e8re est la signification de la mise en cache. En bref, il s&rsquo;agit d&rsquo;un processus par lequel les navigateurs enregistrent des copies de vos pages, afin qu&rsquo;elles puissent \u00eatre charg\u00e9es plus rapidement lors des prochaines visites.<\/p>\n<p>La fa\u00e7on la plus courante dont les sites WordPress impl\u00e9mentent la mise en cache utilise <a href=\"https:\/\/kinsta.com\/fr\/blog\/plugins-cache-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">des extensions<\/a>. WP Rocket et <a href=\"https:\/\/kinsta.com\/fr\/blog\/w3-total-cache\/\">W3 Total Cache<\/a> sont des options populaires.<\/p>\n<p>Cependant, certains h\u00e9bergeurs, dont nous <a href=\"https:\/\/kinsta.com\/fr\/blog\/cache-wordpress\/\">ici chez Kinsta<\/a>, activent la mise en cache via leurs serveurs. En fait, tous nos clients peuvent activer gratuitement le <a href=\"https:\/\/kinsta.com\/fr\/blog\/cache-edge\/\">cache edge<\/a>, une fonctionnalit\u00e9 qui r\u00e9duit de plus de 50 % en moyenne le temps n\u00e9cessaire pour fournir le code HTML de leurs pages web aux visiteurs du site.<\/p>\n<p>Veuillez v\u00e9rifier si c&rsquo;est le cas de votre h\u00e9bergeur avant d&rsquo;installer une extension de mise en cache.<\/p>\n\n<p>Une fois que vous avez activ\u00e9 la mise en cache pour votre site, vous pouvez vous pr\u00e9occuper de la deuxi\u00e8me partie de cette recommandation, qui est l&rsquo;\u00a0\u00ab\u00a0efficacit\u00e9\u00a0\u00bb de votre politique de cache. Les navigateurs vident p\u00e9riodiquement leurs caches pour les rafra\u00eechir avec des copies mises \u00e0 jour.<\/p>\n<p>Id\u00e9alement, vous voulez que cette p\u00e9riode soit \u00e9lev\u00e9e plut\u00f4t que basse. Si vous videz la m\u00e9moire cache de votre site toutes les deux heures, cela va \u00e0 l&rsquo;encontre du but recherch\u00e9 par cette technique. Vous pouvez optimiser la p\u00e9riode d&rsquo;expiration de votre cache en utilisant les en-t\u00eates<strong> Cache-Control<\/strong> et <strong>Expires.<\/strong><\/p>\n<h4>Ajout d&rsquo;en-t\u00eates de contr\u00f4le du cache<\/h4>\n<p>Utilisez le code suivant pour ajouter des en-t\u00eates Cache-Control dans Nginx :<\/p>\n<pre><code class=\"nginx\">location ~* \\.(js|css|png|jpg|jpeg|gif|svg|ico)$ {\n expires 30d;\n add_header Cache-Control \"public, no-transform\";\n}<\/code><\/pre>\n<p>Vous devriez ajouter ceci au fichier de configuration de votre serveur. Dans l&rsquo;exemple ci-dessus, les types de fichiers sp\u00e9cifi\u00e9s sont d\u00e9finis pour expirer apr\u00e8s 30 jours.<\/p>\n<p>Ceux qui ont <a href=\"https:\/\/kinsta.com\/fr\/blog\/qu-est-ce-qu-apache\/\">des serveurs Apache<\/a> devraient plut\u00f4t utiliser ce code dans leurs fichiers<strong> .htaccess :<\/strong><\/p>\n<pre><code class=\"apacheconf\">&lt;filesMatch \".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$\"&gt;\nHeader set Cache-Control \"max-age=84600, public\"\n&lt;\/filesMatch&gt;<\/code><\/pre>\n<p>Ajoutez ce code avant <strong>#BEGIN WordPress<\/strong> ou apr\u00e8s <strong>#END WordPress<\/strong>. Dans cet exemple, la p\u00e9riode d&rsquo;expiration du cache est fix\u00e9e \u00e0 84 600 secondes.<\/p>\n<h4>Ajout d&rsquo;en-t\u00eates Expires<\/h4>\n<p>Les en-t\u00eates <strong>Cache-Control <\/strong>sont \u00e0 peu pr\u00e8s la norme maintenant. Cependant, certains outils (dont GTMetrix) v\u00e9rifient encore les en-t\u00eates<strong> Expires.<\/strong><\/p>\n<p>Vous pouvez <a href=\"https:\/\/kinsta.com\/fr\/blog\/ajouter-expires-headers-wordpress\/\">ajouter des en-t\u00eates expires<\/a> \u00e0 un serveur Nginx en incorporant ce qui suit dans votre bloc serveur :<\/p>\n<pre><code class=\"nginx\">location ~*  \\.(jpg|jpeg|gif|png|svg)$ {\n        expires 365d;\n    }\n\n    location ~*  \\.(pdf|css|html|js|swf)$ {\n        expires 2d;\n    }<\/code><\/pre>\n<p>Vous devez d\u00e9finir diff\u00e9rentes dur\u00e9es d&rsquo;expiration en fonction des types de fichiers. Les serveurs Apache produiront les m\u00eames r\u00e9sultats si vous ajoutez ce code \u00e0 votre fichier<strong> .htaccess <\/strong>:<\/p>\n<pre><code class=\"apacheconf\">## EXPIRES HEADER CACHING ##\n&lt;IfModule mod_expires.c&gt;\nExpiresActive On\nExpiresByType image\/jpg \"access 1 year\"\nExpiresByType image\/jpeg \"access 1 year\"\nExpiresByType image\/gif \"access 1 year\"\nExpiresByType image\/png \"access 1 year\"\nExpiresByType image\/svg \"access 1 year\"\nExpiresByType text\/css \"access 1 month\"\nExpiresByType application\/pdf \"access 1 month\"\nExpiresByType application\/javascript \"access 1 month\"\nExpiresByType application\/x-javascript \"access 1 month\"\nExpiresByType application\/x-shockwave-flash \"access 1 month\"\nExpiresByType image\/x-icon \"access 1 year\"\nExpiresDefault \"access 2 days\"\n&lt;\/IfModule&gt;\n## EXPIRES HEADER CACHING ##<\/code><\/pre>\n<p>Encore une fois, vous devez ajouter ce code soit avant <strong>#BEGIN WordPress <\/strong>ou apr\u00e8s <strong>#END WordPress<\/strong>.<\/p>\n<h4>Mise en cache efficace de Google Analytics<\/h4>\n<p>Ironiquement, le <a href=\"https:\/\/kinsta.com\/fr\/blog\/google-analytics-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">script Google Analytics que vous avez peut-\u00eatre ajout\u00e9 aux en-t\u00eates de vos pages<\/a> afin de suivre le comportement des utilisateurs a une p\u00e9riode d&rsquo;expiration du cache de seulement deux heures. Il est probable que, si des mises \u00e0 jour sont apport\u00e9es \u00e0 la plateforme, les utilisateurs auront rapidement acc\u00e8s aux changements.<\/p>\n<p>Ce script appara\u00eetra dans la liste des ressources n\u00e9cessitant votre attention sous la rubrique <strong>Serve static assets <\/strong>avec une recommandation de <strong>politique de cache efficace. <\/strong>Comme il appartient \u00e0 un tiers, vous ne pouvez pas modifier la p\u00e9riode d&rsquo;expiration avec les en-t\u00eates<strong> Cache-Control<\/strong> ou <strong>Expires.<\/strong><\/p>\n<p>Si c&rsquo;est le seul script list\u00e9 sous cette recommandation, vous pouvez quand m\u00eame r\u00e9ussir l&rsquo;audit :<\/p>\n<figure id=\"attachment_65558\" aria-describedby=\"caption-attachment-65558\" style=\"width: 1466px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65558\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/cache-efficace-reussi.png\" alt=\"Audit de politique de cache efficace r\u00e9ussi\" width=\"1466\" height=\"544\"><figcaption id=\"caption-attachment-65558\" class=\"wp-caption-text\">Audit de politique de cache efficace r\u00e9ussi<\/figcaption><\/figure>\n<p>Cependant, comme nous l&rsquo;avons not\u00e9 tout au long de cet aarticle, votre score sur PageSpeed est moins important que votre performance r\u00e9elle et per\u00e7ue. Afin de servir efficacement cette ressource, vous pouvez envisager d&rsquo;h\u00e9berger Google Analytics localement.<\/p>\n<p>Des extensions telles que <a href=\"https:\/\/wordpress.org\/plugins\/host-analyticsjs-local\/\" target=\"_blank\" rel=\"noopener noreferrer\">Complete Analytics Optimization Suite (CAOS)<\/a> et Perfmatters vous permettront de le faire. Vous pouvez en savoir plus sur le processus dans notre <a href=\"https:\/\/kinsta.com\/fr\/blog\/leverage-browser-caching\/\" target=\"_blank\" rel=\"noopener noreferrer\">guide complet<\/a> pour cette suggestion de PageSpeed.<\/p>\n<h3>21. Reduce the impact of third-party code<\/h3>\n<p>Nous avons maintenant mentionn\u00e9 quelques fa\u00e7ons diff\u00e9rentes dont les scripts tiers peuvent avoir un impact n\u00e9gatif sur vos performances et entra\u00eener l&rsquo;\u00e9chec des audits de PageSpeed Insights. Id\u00e9alement, il est pr\u00e9f\u00e9rable de limiter votre d\u00e9pendance \u00e0 ces outils afin de pr\u00e9venir les effets ind\u00e9sirables.<\/p>\n<p>Cependant, dans certains cas, la meilleure solution pour r\u00e9pondre \u00e0 un besoin de votre site est d&rsquo;incorporer un script tiers. Google Analytics en est un excellent exemple. Les autres incluent :<\/p>\n<ul>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/medias-sociaux-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">Boutons de partage sur les r\u00e9seaux sociaux<\/a> et les flux<\/li>\n<li>Int\u00e9grations de vid\u00e9os YouTube<\/li>\n<li><a href=\"https:\/\/kinsta.com\/fr\/blog\/iframe-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">iFrames pour les publicit\u00e9s et autres contenus<\/a><\/li>\n<li>Biblioth\u00e8ques pour JavaScript, les polices et autres \u00e9l\u00e9ments<\/li>\n<\/ul>\n<p>Dans les cas o\u00f9 vous jugez n\u00e9cessaire l&rsquo;utilisation d&rsquo;un script tiers, il est important de r\u00e9duire quand m\u00eame son impact sur les performances de votre site, comme vous le diront les r\u00e9sultats de votre analyse PageSpeed :<\/p>\n<figure id=\"attachment_65555\" aria-describedby=\"caption-attachment-65555\" style=\"width: 1468px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65555\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/reduire-code-de-tiers.png\" alt=\"Recommandation de r\u00e9duire l'impact d'un code tiers\" width=\"1468\" height=\"348\"><figcaption id=\"caption-attachment-65555\" class=\"wp-caption-text\">Recommandation de r\u00e9duire l&rsquo;impact d&rsquo;un code tiers<\/figcaption><\/figure>\n<p>Pour charger du code tiers plus efficacement, vous pouvez envisager l&rsquo;une des techniques que nous avons d\u00e9j\u00e0 mentionn\u00e9es dans cet article :<\/p>\n<ul>\n<li>Diff\u00e9rer le chargement de JavaScript<\/li>\n<li>Utiliser des balises de lien avec des attributs de<strong> pr\u00e9-connexion<\/strong><\/li>\n<li>Scripts tiers auto-h\u00e9berg\u00e9s (comme nous l&rsquo;avons d\u00e9crit ci-dessus avec Google Analytics)<\/li>\n<\/ul>\n<p>Ces m\u00e9thodes devraient minimiser l&rsquo;impact sur la performance de votre site.<\/p>\n<h3>22. Avoids enormous network payloads<\/h3>\n<p>Cette recommandation est particuli\u00e8rement pertinente pour vos visiteurs mobiles. Les charges utiles (ou Paypload) importantes peuvent n\u00e9cessiter l&rsquo;utilisation d&rsquo;un plus grand nombre de donn\u00e9es mobiles, ce qui co\u00fbte de l&rsquo;argent \u00e0 vos utilisateurs. La minimisation du nombre de requ\u00eates r\u00e9seau n\u00e9cessaires pour atteindre vos pages peut permettre d&rsquo;\u00e9viter cela :<\/p>\n<figure id=\"attachment_65552\" aria-describedby=\"caption-attachment-65552\" style=\"width: 1452px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65552\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/charges-utiles-importantes-du-reseau.png\" alt=\"Recommandation d\u2019\u00e9viter les charges utiles importantes du r\u00e9seau\" width=\"1452\" height=\"420\"><figcaption id=\"caption-attachment-65552\" class=\"wp-caption-text\">Recommandation d\u2019\u00e9viter les charges utiles importantes du r\u00e9seau<\/figcaption><\/figure>\n<p>Google recommande de limiter la taille totale de votre octet \u00e0 1 600 Ko ou moins. Les m\u00e9thodes les plus couramment utilis\u00e9es pour atteindre cet objectif se trouvent tout au long de cet article, notamment :<\/p>\n<ul>\n<li>Diff\u00e9rer les CSS, JavaScript et les images qui se trouvent sous le pli<\/li>\n<li>Minifier le code<\/li>\n<li>Compresser les fichiers d&rsquo;images<\/li>\n<li>Utiliser le format WebP pour les images<\/li>\n<li>Impl\u00e9menter la mise en cache<\/li>\n<\/ul>\n<p>Suivez les \u00e9tapes pertinentes pour ces strat\u00e9gies, et vous devriez r\u00e9ussir cet audit sans effort suppl\u00e9mentaire.<\/p>\n<h3>23. User Timing marks and measures<\/h3>\n<p>Cette recommandation n&rsquo;est pertinente que si vous utilisez l\u2019<a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/user-timings\/\" target=\"_blank\" rel=\"noopener noreferrer\">API de synchronisation de l&rsquo;utilisateur (User Timing)<\/a>. Cet outil cr\u00e9e des horodatages pour vous aider \u00e0 \u00e9valuer la performance de votre JavaScript. Si vous avez configur\u00e9 l&rsquo;API pour votre site, vous verrez vos marques et mesures sous cette rubrique dans PageSpeed Insights :<\/p>\n<figure id=\"attachment_65574\" aria-describedby=\"caption-attachment-65574\" style=\"width: 1500px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65574\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/user-timing.png\" alt=\"Recommandation de marques et mesures du chronom\u00e9trage de l\u2019utlisateur\" width=\"1500\" height=\"727\"><figcaption id=\"caption-attachment-65574\" class=\"wp-caption-text\">Recommandation de marques et mesures du chronom\u00e9trage de l\u2019utlisateur<\/figcaption><\/figure>\n<p>Comme vous pouvez le voir, c&rsquo;est une autre suggestion de Google qui n&rsquo;aboutit pas \u00e0 un \u00ab\u00a0succ\u00e8s\u00a0\u00bb ou \u00e0 un \u00ab\u00a0\u00e9chec\u00a0\u00bb. PageSpeed Insights rend simplement ces informations facilement r\u00e9cup\u00e9rables, de sorte que vous pouvez les utiliser pour \u00e9valuer les domaines qui peuvent n\u00e9cessiter une optimisation.<\/p>\n<p>Si vous \u00eates int\u00e9ress\u00e9 par l&rsquo;int\u00e9gration de l&rsquo;API User Timing dans votre site WordPress, vous pouvez en apprendre plus dans le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/User_Timing_API\/Using_the_User_Timing_API\" target=\"_blank\" rel=\"noopener noreferrer\">guide Mozilla sur le sujet<\/a>.<\/p>\n<h3>24. Avoid an excessive DOM size<\/h3>\n<p>En termes simples, le DOM est la fa\u00e7on dont les navigateurs transforment le HTML en objets. Elle implique l&rsquo;utilisation d&rsquo;une structure arborescente compos\u00e9e de n\u0153uds individuels qui repr\u00e9sentent chacun un objet. Naturellement, plus le DOM de votre page est grand, plus le chargement sera long.<\/p>\n<p>Si votre page d\u00e9passe certains <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/performance\/dom-size\/\">standards concernant la taille du DOM<\/a>, il recommandera de r\u00e9duire le nombre de n\u0153uds ainsi que la <a href=\"https:\/\/web.dev\/reduce-the-scope-and-complexity-of-style-calculations\/\" target=\"_blank\" rel=\"noopener noreferrer\">complexit\u00e9 de votre style CSS<\/a> :<\/p>\n<figure id=\"attachment_65570\" aria-describedby=\"caption-attachment-65570\" style=\"width: 1458px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-65570\" src=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/eviter-une-taille-de-dom-excessive.png\" alt=\"Recommandation d\u2019\u00e9viter une taille de DOM excessive\" width=\"1458\" height=\"252\"><figcaption id=\"caption-attachment-65570\" class=\"wp-caption-text\">Recommandation d\u2019\u00e9viter une taille de DOM excessive<\/figcaption><\/figure>\n<p>Un coupable commun si vous avez \u00ab\u00a0\u00e9chou\u00e9\u00a0\u00bb \u00e0 cet audit dans PageSpeed Insights est votre th\u00e8me WordPress. Les th\u00e8mes lourds ajoutent souvent de grands volumes d&rsquo;\u00e9l\u00e9ments au DOM, et peuvent \u00e9galement inclure un style alambiqu\u00e9 qui ralentit votre site. Si c&rsquo;est le cas, vous devrez peut-\u00eatre <a href=\"https:\/\/kinsta.com\/fr\/blog\/modifier-theme-wordpress\/\" target=\"_blank\" rel=\"noopener noreferrer\">changer de th\u00e8me<\/a>.<\/p>\n\n<h2>R\u00e9sum\u00e9<\/h2>\n<p>Google PageSpeed Insights devrait \u00eatre un \u00e9l\u00e9ment essentiel de votre bo\u00eete \u00e0 outils pour webmasters. Cependant, se fixer sur votre score et \u00eatre obs\u00e9d\u00e9 par l&rsquo;id\u00e9e d&rsquo;atteindre les 100\/100 tant convoit\u00e9s n&rsquo;est probablement pas la meilleure utilisation de votre temps. Cela peut vous \u00e9loigner d&rsquo;autres t\u00e2ches importantes qui pourraient vous apporter des avantages plus significatifs.<\/p>\n<p>Dans cet article, nous avons abord\u00e9 les fa\u00e7ons dont votre score Google PageSpeed est important et ne l&rsquo;est pas. Nous avons \u00e9galement partag\u00e9 quelques br\u00e8ves directives pour mettre en \u0153uvre les recommandations de la plateforme sur votre site, afin d&rsquo;am\u00e9liorer ses performances.<\/p>\n<p>Vous avez des questions sur Google PageSpeed Insights ou sur l&rsquo;optimisation des performances de votre site ? Posez vos questions dans la section des commentaires ci-dessous !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google PageSpeed Insights est sans aucun doute un outil utile pour les webmasters, les d\u00e9veloppeurs et les propri\u00e9taires de sites de tous types. Cependant, nous avons &#8230;<\/p>\n","protected":false},"author":38,"featured_media":36205,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[271,46],"topic":[1034],"class_list":["post-36168","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-pagespeed","tag-webperf","topic-performance-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100<\/title>\n<meta name=\"description\" content=\"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100\" \/>\n<meta property=\"og:description\" content=\"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fm.brianleejackson\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-21T08:20:25+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-03T16:11:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Brian Jackson\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png\" \/>\n<meta name=\"twitter:creator\" content=\"@brianleejackson\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Jackson\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"36 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/\"},\"author\":{\"name\":\"Brian Jackson\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\"},\"headline\":\"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100\",\"datePublished\":\"2020-01-21T08:20:25+00:00\",\"dateModified\":\"2025-10-03T16:11:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/\"},\"wordCount\":7062,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png\",\"keywords\":[\"pagespeed\",\"webperf\"],\"articleSection\":[\"Tutoriels sur la performance WordPress\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/\",\"name\":\"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png\",\"datePublished\":\"2020-01-21T08:20:25+00:00\",\"dateModified\":\"2025-10-03T16:11:49+00:00\",\"description\":\"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png\",\"width\":1460,\"height\":730,\"caption\":\"Google PageSpeed Insights\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Performance de WordPress\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/performance-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7\",\"name\":\"Brian Jackson\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g\",\"caption\":\"Brian Jackson\"},\"description\":\"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fm.brianleejackson\",\"https:\/\/www.linkedin.com\/in\/brianleejackson\",\"https:\/\/x.com\/brianleejackson\"],\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/brianjackson\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100","description":"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/","og_locale":"fr_FR","og_type":"article","og_title":"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100","og_description":"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.","og_url":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_author":"https:\/\/www.facebook.com\/fm.brianleejackson","article_published_time":"2020-01-21T08:20:25+00:00","article_modified_time":"2025-10-03T16:11:49+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png","type":"image\/png"}],"author":"Brian Jackson","twitter_card":"summary_large_image","twitter_description":"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png","twitter_creator":"@brianleejackson","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Brian Jackson","Dur\u00e9e de lecture estim\u00e9e":"36 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/"},"author":{"name":"Brian Jackson","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7"},"headline":"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100","datePublished":"2020-01-21T08:20:25+00:00","dateModified":"2025-10-03T16:11:49+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/"},"wordCount":7062,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png","keywords":["pagespeed","webperf"],"articleSection":["Tutoriels sur la performance WordPress"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/","url":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/","name":"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png","datePublished":"2020-01-21T08:20:25+00:00","dateModified":"2025-10-03T16:11:49+00:00","description":"Un score de 100\/100 sur Google PageSpeed insights ? Voici comment utiliser ces informations sur la vitesse pour am\u00e9liorer les performances de votre site.","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2020\/01\/google-pagespeed-insights-1.png","width":1460,"height":730,"caption":"Google PageSpeed Insights"},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/google-pagespeed-insights\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Performance de WordPress","item":"https:\/\/kinsta.com\/fr\/sujets\/performance-wordpress\/"},{"@type":"ListItem","position":3,"name":"Google PageSpeed Insights : La v\u00e9rit\u00e9 sur le score 100\/100"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d&#039;h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/079824c00ccc2b7141504f27ea63bef7","name":"Brian Jackson","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/79623d815f4ed4c8c2457392d728cb16?s=96&d=mm&r=g","caption":"Brian Jackson"},"description":"Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.","sameAs":["https:\/\/www.facebook.com\/fm.brianleejackson","https:\/\/www.linkedin.com\/in\/brianleejackson","https:\/\/x.com\/brianleejackson"],"url":"https:\/\/kinsta.com\/fr\/blog\/author\/brianjackson\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/38"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=36168"}],"version-history":[{"count":17,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36168\/revisions"}],"predecessor-version":[{"id":79834,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/36168\/revisions\/79834"}],"alternate":[{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/it"},{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/en"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/fr"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/es"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/de"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/nl"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/jp"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/dk"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/translations\/se"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/36168\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/36205"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=36168"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=36168"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=36168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}