{"id":92904,"date":"2022-10-15T15:25:02","date_gmt":"2022-10-15T13:25:02","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/optimize-largest-contentful-paint\/"},"modified":"2020-10-12T06:13:38","modified_gmt":"2020-10-12T09:13:38","slug":"optimize-largest-contentful-paint","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/","title":{"rendered":"Optimiser la plus grande peinture de contenu"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table des mati\u00e8res<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Basculer la table des mati\u00e8res\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Basculer<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Slow-server-response-times\" >Temps de r\u00e9ponse du serveur lents<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Optimize-your-server\" >Optimisez votre serveur<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Route-users-to-a-nearby-CDN\" >Diriger les utilisateurs vers un CDN \u00e0 proximit\u00e9<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Cache-assets\" >Ressources de cache<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Serve-HTML-pages-cache-first\" >Servir les pages HTML en premier<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Establish-third-party-connections-early\" >\u00c9tablissez rapidement des connexions tierces<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Render-blocking-JavaScript-and-CSS\" >Rendu bloquant JavaScript et CSS<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Reduce-CSS-blocking-time\" >R\u00e9duisez le temps de blocage CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Minify-CSS\" >R\u00e9duire le CSS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Defer-non-critical-CSS\" >Diff\u00e9rer les CSS non critiques<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Inline-critical-CSS\" >CSS critique en ligne<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Reduce-JavaScript-blocking-time\" >R\u00e9duisez le temps de blocage de JavaScript<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Slow-resource-load-times\" >Temps de chargement des ressources lents<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Optimize-and-compress-images\" >Optimiser et compresser les images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Preload-important-resources\" >Pr\u00e9charger les ressources importantes<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Compress-text-files\" >Compresser les fichiers texte<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Adaptive-serving\" >Service adaptatif<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Cache-assets-using-a-service-worker\" >Mettre en cache les actifs \u00e0 l&#039;aide d&#039;un service worker<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Client-side-rendering\" >Rendu c\u00f4t\u00e9 client<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Minimize-critical-JavaScript\" >Minimisez le JavaScript critique<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Use-server-side-rendering\" >Utiliser le rendu c\u00f4t\u00e9 serveur<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimize-largest-contentful-paint\/#Use-pre-rendering\" >Utiliser le pr\u00e9-rendu<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Comment rendre votre contenu principal plus rapide.\n        <\/p>\n<p>\n          <time>5 mai 2020<\/time><br \/>\n            Mise \u00e0 jour <time>20 ao\u00fbt 2020<\/time>\n        <\/p>\n<\/header>\n<p>\n  <iframe loading=\"lazy\" title=\"Optimiser pour Core Web Vitals\" width=\"1080\" height=\"608\" src=\"https:\/\/www.youtube.com\/embed\/AQqFZ5t8uNc?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/p>\n<blockquote>\n<p>\n    Je ne vois aucun contenu utile! Pourquoi le chargement prend-il autant de temps? \ud83d\ude16\n  <\/p>\n<\/blockquote>\n<p>Un facteur contribuant \u00e0 une mauvaise exp\u00e9rience utilisateur est le temps qu&#039;il faut \u00e0 un utilisateur pour voir un contenu<br \/>\nrendu \u00e0 l&#039;\u00e9cran. First Contentful Paint (FCP) mesure combien de temps il<br \/>\nprend pour le contenu DOM initial \u00e0 rendre, mais il ne capture pas combien de temps il a fallu le plus grand<br \/>\n(g\u00e9n\u00e9ralement plus significatif) sur la page \u00e0 rendre.<\/p>\n<p>La plus grande peinture de contenu (LCP) est un Core Web<br \/>\nM\u00e9trique des valeurs vitales et mesure le moment o\u00f9 l&#039;\u00e9l\u00e9ment de contenu le plus important de la<br \/>\nla fen\u00eatre devient visible. Il peut \u00eatre utilis\u00e9 pour d\u00e9terminer quand le contenu principal de la page est termin\u00e9<br \/>\nrendu \u00e0 l&#039;\u00e9cran.<\/p>\n<picture><source srcset=\"https:\/\/web.dev\/..\/vitals\/lcp_8x2.svg\" media=\"(min-width: 640px)\"><img decoding=\"async\" class=\"w-screenshot w-screenshot--filled\" src=\"https:\/\/webdev.imgix.net\/vitals\/lcp_4x3.svg\" alt=\"Les bonnes valeurs LCP sont de 2,5 secondes, les mauvaises valeurs sont sup\u00e9rieures \u00e0 4,0 secondes et tout ce qui se trouve entre les deux doit \u00eatre am\u00e9lior\u00e9\"><br \/>\n<\/source><\/picture>\n<p>Les causes les plus courantes d&#039;un mauvais LCP sont:<\/p>\n<h2 id=\"slow-servers\"><span class=\"ez-toc-section\" id=\"Slow-server-response-times\"><\/span>Temps de r\u00e9ponse du serveur lents <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Plus il faut de temps \u00e0 un navigateur pour recevoir le contenu du serveur, plus le rendu prend du temps<br \/>\nquoi que ce soit sur l&#039;\u00e9cran. Un temps de r\u00e9ponse du serveur plus rapide am\u00e9liore directement chaque chargement de page<br \/>\nm\u00e9trique, y compris LCP.<\/p>\n<p>Avant toute chose, am\u00e9liorez comment et o\u00f9 votre serveur g\u00e8re votre contenu. Utiliser <strong>Temps pour la premi\u00e8re<br \/>\nOctet<\/strong> (TTFB) pour mesurer les temps de r\u00e9ponse de votre serveur. Vous pouvez<br \/>\nam\u00e9liorez votre TTFB de diff\u00e9rentes mani\u00e8res:<\/p>\n<ul>\n<li>Optimisez votre serveur<\/li>\n<li>Diriger les utilisateurs vers un CDN \u00e0 proximit\u00e9<\/li>\n<li>Ressources de cache<\/li>\n<li>Servir les pages HTML en premier<\/li>\n<li>\u00c9tablissez rapidement des connexions tierces<\/li>\n<\/ul>\n<h3 id=\"optimize-your-server\"><span class=\"ez-toc-section\" id=\"Optimize-your-server\"><\/span>Optimisez votre serveur <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ex\u00e9cutez-vous des requ\u00eates co\u00fbteuses qui prennent beaucoup de temps \u00e0 r\u00e9pondre \u00e0 votre serveur? Ou alors<br \/>\ny a-t-il d&#039;autres op\u00e9rations complexes qui se produisent c\u00f4t\u00e9 serveur qui retardent le processus de retour de la page<br \/>\ncontenu? L&#039;analyse et l&#039;am\u00e9lioration de l&#039;efficacit\u00e9 de votre code c\u00f4t\u00e9 serveur am\u00e9liorera directement le<br \/>\nle temps n\u00e9cessaire au navigateur pour recevoir les donn\u00e9es.<\/p>\n<p>Au lieu de simplement servir imm\u00e9diatement une page statique sur une demande de navigateur, de nombreux sites Web c\u00f4t\u00e9 serveur<br \/>\nles frameworks doivent cr\u00e9er la page Web de mani\u00e8re dynamique. En d&#039;autres termes, plut\u00f4t que d&#039;envoyer simplement un<br \/>\nfichier HTML complet qui est d\u00e9j\u00e0 pr\u00eat lorsque le navigateur le demande, les frameworks doivent s&#039;ex\u00e9cuter<br \/>\nlogique pour construire la page. Cela peut \u00eatre d\u00fb \u00e0 des r\u00e9sultats en attente d&#039;une requ\u00eate de base de donn\u00e9es ou m\u00eame<br \/>\ncar les composants doivent \u00eatre g\u00e9n\u00e9r\u00e9s dans le balisage par une infrastructure d&#039;interface utilisateur (telle que<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/react-dom-server.html\">R\u00e9agir<\/a>). De nombreux frameworks Web qui s&#039;ex\u00e9cutent sur le serveur<br \/>\navoir des conseils sur les performances que vous pouvez utiliser pour acc\u00e9l\u00e9rer ce processus.<\/p>\n<h3 id=\"route-users-to-a-nearby-cdn\"><span class=\"ez-toc-section\" id=\"Route-users-to-a-nearby-CDN\"><\/span>Diriger les utilisateurs vers un CDN \u00e0 proximit\u00e9 <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Un r\u00e9seau de diffusion de contenu (CDN) est un r\u00e9seau de serveurs r\u00e9partis dans de nombreux endroits diff\u00e9rents. Si<br \/>\nle contenu de votre page Web est h\u00e9berg\u00e9 sur un seul serveur, votre site Web se chargera plus lentement pendant<br \/>\nles utilisateurs qui sont g\u00e9ographiquement plus \u00e9loign\u00e9s parce que les requ\u00eates de leur navigateur doivent litt\u00e9ralement voyager<br \/>\nautour du monde. Pensez \u00e0 utiliser un CDN pour vous assurer que vos utilisateurs n\u2019ont jamais \u00e0 attendre le r\u00e9seau<br \/>\ndemandes \u00e0 des serveurs lointains.<\/p>\n<h3 id=\"cache-assets\"><span class=\"ez-toc-section\" id=\"Cache-assets\"><\/span>Ressources de cache <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si votre HTML est statique et n&#039;a pas besoin de changer \u00e0 chaque demande, la mise en cache peut l&#039;emp\u00eacher de<br \/>\nrecr\u00e9\u00e9 inutilement. En stockant une copie du code HTML g\u00e9n\u00e9r\u00e9 sur le disque, la mise en cache c\u00f4t\u00e9 serveur<br \/>\npeut r\u00e9duire le TTFB et minimiser l&#039;utilisation des ressources.<\/p>\n<p>En fonction de votre cha\u00eene d&#039;outils, il existe de nombreuses fa\u00e7ons d&#039;appliquer la mise en cache du serveur:<\/p>\n<ul>\n<li>Configurer les proxys inverses (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/varnish-cache.org\/\">Vernis<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.nginx.com\/\">nginx<\/a>) pour servir du contenu mis en cache ou agir en tant que serveur de cache lorsque<br \/>\ninstall\u00e9 devant un serveur d&#039;applications<\/li>\n<li>Configurez et g\u00e9rez votre fournisseur de cloud<br \/>\n(<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/firebase.google.com\/docs\/hosting\/manage-cache\">Firebase<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/aws.amazon.com\/caching\/\">AWS<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/azure\/architecture\/best-practices\/caching\">bleu azur<\/a>) comportement du cache<\/li>\n<li>Utilisez un CDN qui fournit des serveurs p\u00e9riph\u00e9riques afin que votre contenu soit mis en cache et stock\u00e9 plus pr\u00e8s de<br \/>\nvos utilisateurs<\/li>\n<\/ul>\n<h3 id=\"serve-html-pages-cache-first\"><span class=\"ez-toc-section\" id=\"Serve-HTML-pages-cache-first\"><\/span>Servir les pages HTML en premier <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Une fois install\u00e9, un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\">un service<br \/>\nouvrier<\/a> s&#039;ex\u00e9cute dans le navigateur<br \/>\narri\u00e8re-plan et peut intercepter les demandes du serveur. Ce niveau de contr\u00f4le programmatique du cache<br \/>\npermet de mettre en cache tout ou partie du contenu de la page HTML et de ne mettre \u00e0 jour le cache que lorsque le<br \/>\nle contenu a chang\u00e9.<\/p>\n<p>Le graphique suivant montre comment les distributions LCP ont \u00e9t\u00e9 r\u00e9duites sur un site utilisant ce mod\u00e8le:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-sw-cache-5521599' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-sw-caching-5521599.png'><figcaption class=\"w-figcaption\">La plus grande distribution Contentful Paint, pour les chargements de pages avec et sans un technicien de service - <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/philipwalton.com\/articles\/smaller-html-payloads-with-service-workers\/\">philipwalton.com<\/a><\/figcaption><\/figure>\n<p>Le graphique montre la distribution du LCP \u00e0 partir d&#039;un seul site au cours des 28 derniers jours, segment\u00e9e par<br \/>\n\u00e9tat du service worker. Notez \u00e0 quel point les chargements de page ont une valeur LCP plus rapide apr\u00e8s le premier HTML du cache<br \/>\nle service de page a \u00e9t\u00e9 introduit dans le technicien de service (partie bleue du graphique).<\/p>\n<h3 id=\"establish-third-party-connections-early\"><span class=\"ez-toc-section\" id=\"Establish-third-party-connections-early\"><\/span>\u00c9tablissez rapidement des connexions tierces <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Les demandes de serveur \u00e0 des origines tierces peuvent \u00e9galement avoir un impact sur LCP, en particulier si elles doivent afficher<br \/>\ncontenu critique sur la page. Utiliser <code>rel = &quot;pr\u00e9connecter&quot;<\/code> pour informer le navigateur que votre page a l&#039;intention de<br \/>\n\u00e9tablissez une connexion d\u00e8s que possible.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9connecter<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Vous pouvez aussi utiliser <code>dns-prefetch<\/code>  pour r\u00e9soudre plus rapidement les recherches DNS.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dns-prefetch<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Bien que les deux conseils fonctionnent diff\u00e9remment, pensez \u00e0 utiliser <code>dns-prefetch<\/code> comme solution de secours pour les navigateurs<br \/>\nne supporte pas <code>pr\u00e9connecter<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>diriger<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br>\u2026<br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9connecter<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>dns-prefetch<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>https:\/\/example.com<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>diriger<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"render-blocking-resources\"><span class=\"ez-toc-section\" id=\"Render-blocking-JavaScript-and-CSS\"><\/span>Rendu bloquant JavaScript et CSS <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Avant qu&#039;un navigateur puisse rendre un contenu, il doit analyser le balisage HTML dans une arborescence DOM. Le HTML<br \/>\nl&#039;analyseur se mettra en pause s&#039;il rencontre des feuilles de style externes (<code><\/code>) ou synchrone<br \/>\nBalises JavaScript (<code><\/code>).<\/p>\n<p>Les scripts et les feuilles de style sont tous deux des ressources bloquant le rendu qui retardent FCP, et par cons\u00e9quent LCP.<br \/>\nReportez tout JavaScript et CSS non critiques pour acc\u00e9l\u00e9rer le chargement du contenu principal de votre page Web.<\/p>\n<h3 id=\"reduce-css-blocking-time\"><span class=\"ez-toc-section\" id=\"Reduce-CSS-blocking-time\"><\/span>R\u00e9duisez le temps de blocage CSS <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Assurez-vous que seule la quantit\u00e9 minimale de CSS n\u00e9cessaire bloque le rendu sur votre site avec le<br \/>\nSuivant:<\/p>\n<ul>\n<li>R\u00e9duire le CSS<\/li>\n<li>Diff\u00e9rer les CSS non critiques<\/li>\n<li>CSS critique en ligne<\/li>\n<\/ul>\n<h3 id=\"minify-css\"><span class=\"ez-toc-section\" id=\"Minify-CSS\"><\/span>R\u00e9duire le CSS <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pour une meilleure lisibilit\u00e9, les fichiers CSS peuvent contenir des caract\u00e8res tels que l&#039;espacement, le retrait ou des commentaires.<br \/>\nCes caract\u00e8res sont tous inutiles pour le navigateur, et la r\u00e9duction de ces fichiers garantira que<br \/>\nils sont supprim\u00e9s. En fin de compte, r\u00e9duire la quantit\u00e9 de blocage CSS am\u00e9liorera toujours le temps<br \/>\nprend pour rendre enti\u00e8rement le contenu principal de la page (LCP).<\/p>\n<p>Si vous utilisez un bundler de modules ou un outil de construction, incluez un plugin appropri\u00e9 pour r\u00e9duire les fichiers CSS sur<br \/>\nchaque build:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-change-minify-css-7170870' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-change-minify-css-7170870.png'><figcaption class=\"w-figcaption\">Exemple d&#039;am\u00e9lioration du LCP: avant et apr\u00e8s la minification du CSS<\/figcaption><\/figure>\n<h3 id=\"defer-non-critical-css\"><span class=\"ez-toc-section\" id=\"Defer-non-critical-CSS\"><\/span>Diff\u00e9rer les CSS non critiques <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Utilisez le <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/coverage\">Couverture<\/a> onglet dans Chrome<br \/>\nDevTools pour trouver tout CSS inutilis\u00e9 sur votre page Web.<\/p>\n<p><img alt='panneau-de-couverture-css-4830925' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/coverage-panel-css-4830925.png'><\/p>\n<p>Optimiser:<\/p>\n<ul>\n<li>\n<p>Supprimez compl\u00e8tement tout CSS inutilis\u00e9 ou d\u00e9placez-le vers une autre feuille de style s&#039;il est utilis\u00e9 sur un autre<br \/>\npage de votre site.<\/p>\n<\/li>\n<li>\n<p>Pour tout CSS non n\u00e9cessaire pour le rendu initial, utilisez<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/filamentgroup\/loadCSS\/blob\/master\/README.md\">loadCSS<\/a> pour charger des fichiers<br \/>\nde mani\u00e8re asynchrone, qui exploite <code>rel = &quot;pr\u00e9charge&quot;<\/code>et <code>en charge<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>stylesheet.css<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>style<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">en charge<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>this.rel=<span class=\"token punctuation\">'<\/span>stylesheet<span class=\"token punctuation\">'<\/span><span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<\/ul>\n<figure class=\"w-figure\">\n  <img alt='lcp-diff\u00e9rer-css-8932491' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-defer-css-8932491.png'><figcaption class=\"w-figcaption\">Exemple d&#039;am\u00e9lioration du LCP: avant et apr\u00e8s le report du CSS non critique<\/figcaption><\/figure>\n<h3 id=\"inline-critical-css\"><span class=\"ez-toc-section\" id=\"Inline-critical-CSS\"><\/span>CSS critique en ligne <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Int\u00e9grez tout CSS de chemin critique utilis\u00e9 pour le contenu au-dessus de la ligne de flottaison en l&#039;incluant directement dans <code>.<\/code><\/p>\n<figure class=\"w-figure\">\n  <img alt='critique-css-8264750' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/critical-css-8264750.png' class=\"w-screenshot w-screenshot--filled\"><figcaption class=\"w-figcaption\">CSS critique int\u00e9gr\u00e9<\/figcaption><\/figure>\n<p>L&#039;int\u00e9gration de styles importants \u00e9limine le besoin de faire une demande aller-retour pour r\u00e9cup\u00e9rer les CSS critiques.<br \/>\nLe report du reste minimise le temps de blocage CSS.<\/p>\n<p>Si vous ne pouvez pas ajouter manuellement des styles en ligne \u00e0 votre site, utilisez une biblioth\u00e8que pour automatiser le processus. Quelque<br \/>\nexemples:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-critique-css-4439024' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-critical-css-4439024.png'><figcaption class=\"w-figcaption\">Exemple d&#039;am\u00e9lioration du LCP: avant et apr\u00e8s l&#039;int\u00e9gration du CSS critique<\/figcaption><\/figure>\n<h3 id=\"reduce-javascript-blocking-time\"><span class=\"ez-toc-section\" id=\"Reduce-JavaScript-blocking-time\"><\/span>R\u00e9duisez le temps de blocage de JavaScript <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>T\u00e9l\u00e9chargez et diffusez la quantit\u00e9 minimale de JavaScript n\u00e9cessaire aux utilisateurs. R\u00e9duire la quantit\u00e9 de<br \/>\nle blocage de JavaScript entra\u00eene un rendu plus rapide et, par cons\u00e9quent, un meilleur LCP.<\/p>\n<p>Cela peut \u00eatre accompli en optimisant vos scripts de diff\u00e9rentes mani\u00e8res:<\/p>\n<h2 id=\"slow-resource-load-times\"><span class=\"ez-toc-section\" id=\"Slow-resource-load-times\"><\/span>Temps de chargement des ressources lents <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Bien qu&#039;une augmentation du temps de blocage CSS ou JavaScript se traduise directement par une d\u00e9gradation des performances,<br \/>\nle temps n\u00e9cessaire pour charger de nombreux autres types de ressources peut \u00e9galement affecter les temps de peinture. Les types de<br \/>\nles \u00e9l\u00e9ments qui affectent le LCP sont:<\/p>\n<ul>\n<li><code>&lt;img&gt;<\/code> \u00e9l\u00e9ments<\/li>\n<li><code><\/code> \u00e9l\u00e9ments \u00e0 l&#039;int\u00e9rieur d&#039;un <code><\/code> \u00e9l\u00e9ment<\/li>\n<li><code><video><\/code> \u00e9l\u00e9ments (si sp\u00e9cifi\u00e9, le<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/video#attr-poster\">affiche<\/a> l&#039;image est<br \/>\nutilis\u00e9 pour mesurer le LCP)<\/li>\n<li>Un \u00e9l\u00e9ment avec une image d&#039;arri\u00e8re-plan charg\u00e9e via le<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/url()\"><code>URL ()<\/code><\/a> fonction (par opposition \u00e0 un CSS<br \/>\npente)<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Block-level_elements\">Niveau bloc<\/a> \u00e9l\u00e9ments<br \/>\ncontenant des n\u0153uds de texte ou d&#039;autres \u00e9l\u00e9ments de texte de niveau en ligne<\/li>\n<\/ul>\n<p>Le temps n\u00e9cessaire pour charger ces \u00e9l\u00e9ments s&#039;ils sont rendus au-dessus du pli aura un effet direct sur<br \/>\nLCP. Il existe plusieurs fa\u00e7ons de s&#039;assurer que ces fichiers sont charg\u00e9s le plus rapidement possible:<\/p>\n<ul>\n<li>Optimiser et compresser les images<\/li>\n<li>Pr\u00e9charger les ressources importantes<\/li>\n<li>Compresser les fichiers texte<\/li>\n<li>Fournissez diff\u00e9rents actifs en fonction de la connexion r\u00e9seau (service adaptatif)<\/li>\n<li>Mettre en cache les actifs \u00e0 l&#039;aide d&#039;un service worker<\/li>\n<\/ul>\n<h3 id=\"optimize-and-compress-images\"><span class=\"ez-toc-section\" id=\"Optimize-and-compress-images\"><\/span>Optimiser et compresser les images <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pour de nombreux sites, les images sont le plus grand \u00e9l\u00e9ment visible lorsque la page a fini de se charger. h\u00e9ros<br \/>\nles images, les grands carrousels ou les images de banni\u00e8res en sont tous des exemples courants.<\/p>\n<figure class=\"w-figure\">\n  <img alt='image-plus grand-\u00e9l\u00e9ment-1207643' width=\"300\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/image-largest-element-1207643.png'><figcaption>Image comme \u00e9l\u00e9ment de page le plus grand: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.google\/\">design.google<\/a><\/figcaption><\/figure>\n<p>L&#039;am\u00e9lioration du temps de chargement et de rendu de ces types d&#039;images acc\u00e9l\u00e9rera directement LCP. \u00c0<br \/>\nfaites ceci:<\/p>\n<ul>\n<li>Envisagez de ne pas utiliser d&#039;image en premier lieu. Si ce n&#039;est pas pertinent pour le contenu,<br \/>\nretirez-le.<\/li>\n<li>Compresser des images (avec Imagemin par exemple)<\/li>\n<li>Convertir les images dans des formats plus r\u00e9cents (JPEG 2000, JPEG XR ou WebP)<\/li>\n<li>Utilisez des images r\u00e9actives<\/li>\n<li>Pensez \u00e0 utiliser une image CDN<\/li>\n<\/ul>\n<div class=\"w-aside w-aside--note\">\n<p>Jetez un \u0153il \u00e0 Optimiser votre<br \/>\ndes images pour des guides et des ressources qui expliquent toutes ces techniques en d\u00e9tail.<\/p>\n<\/div>\n<h3 id=\"preload-important-resources\"><span class=\"ez-toc-section\" id=\"Preload-important-resources\"><\/span>Pr\u00e9charger les ressources importantes <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Parfois, des ressources importantes d\u00e9clar\u00e9es ou utilis\u00e9es dans un certain fichier CSS ou JavaScript peuvent \u00eatre<br \/>\nr\u00e9cup\u00e9r\u00e9 plus tard que vous le souhaiteriez, comme une police cach\u00e9e profond\u00e9ment dans l&#039;un des nombreux fichiers CSS d&#039;un<br \/>\napplication.<\/p>\n<p>Si vous savez qu&#039;une ressource particuli\u00e8re doit \u00eatre prioris\u00e9e, utilisez <code><\/code> pour le chercher<br \/>\nplus t\u00f4t. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Preloading_content#What_types_of_content_can_be_preloaded\">De nombreux types de<br \/>\nRessources<\/a><br \/>\npeut \u00eatre pr\u00e9charg\u00e9, mais vous devez d&#039;abord vous concentrer sur le pr\u00e9chargement critique<br \/>\ndes ressources, telles que des polices, des images ou des vid\u00e9os au-dessus de la ligne de flottaison,<br \/>\net CSS ou JavaScript du chemin critique.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>sc\u00e9nario<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>script.js<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>style<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>style.css<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>img.png<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>vid\u00e9o<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>vid.webm<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">taper<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>video\/webm<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><br><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span> <span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font.woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">taper<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>font\/woff2<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">crossorigin<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Depuis Chrome 73, le pr\u00e9chargement peut \u00eatre utilis\u00e9 avec des images r\u00e9actives pour combiner les deux<br \/>\nmotifs pour un chargement d&#039;image beaucoup plus rapide.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>relier<\/span><br><span class=\"token attr-name\">rel<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>pr\u00e9charge<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">as<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>image<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">href<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf.jpg<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">imagesrcset<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">taille d&#039;image<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>50vw<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"compress-text-files\"><span class=\"ez-toc-section\" id=\"Compress-text-files\"><\/span>Compresser les fichiers texte <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Algorithmes de compression, comme<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=whGwm0Lky2s&amp;feature=youtu.be&amp;t=14m11s\">Gzip<\/a> et<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/opensource.googleblog.com\/2015\/09\/introducing-brotli-new-compression.html\">Brotli<\/a>, pouvez<br \/>\nr\u00e9duire consid\u00e9rablement la taille des fichiers texte (HTML, CSS, JavaScript) lors de leur transfert entre<br \/>\nle serveur et le navigateur. Gzip est effectivement pris en charge dans tous les navigateurs et Brotli, qui fournit<br \/>\ndes r\u00e9sultats de compression encore meilleurs, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=brotli\">peut \u00eatre utilis\u00e9 dans presque tous les plus r\u00e9cents<br \/>\nnavigateurs<\/a>.<\/p>\n<p>La compression de vos ressources minimisera leur taille de livraison, am\u00e9liorera les temps de chargement et par cons\u00e9quent<br \/>\nLCP.<\/p>\n<ol>\n<li>Tout d&#039;abord, v\u00e9rifiez si votre serveur compresse d\u00e9j\u00e0 les fichiers automatiquement. La plupart des h\u00e9bergements<br \/>\nplates-formes, CDN et serveurs proxy inverses codent les actifs avec compression par d\u00e9faut ou<br \/>\nvous permettent de les configurer facilement.<\/li>\n<li>Si vous devez modifier votre serveur pour compresser des fichiers, envisagez d&#039;utiliser Brotli au lieu de gzip<br \/>\ncar il peut fournir de meilleurs taux de compression.<\/li>\n<li>Une fois que vous avez choisi un algorithme de compression \u00e0 utiliser, compressez les actifs \u00e0 l&#039;avance pendant la construction<br \/>\nprocessus au lieu d&#039;\u00eatre \u00e0 la vol\u00e9e comme ils sont demand\u00e9s par le navigateur. Cela minimise le serveur<br \/>\nsurcharge et \u00e9vite les retards lorsque les demandes sont effectu\u00e9es, en particulier lors de l&#039;utilisation de taux de compression \u00e9lev\u00e9s.<\/li>\n<\/ol>\n<figure class=\"w-figure\">\n  <img alt='lcp-compression-5003269' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-compression-5003269.png'><figcaption class=\"w-figcaption\">Exemple d&#039;am\u00e9lioration du LCP: avant et apr\u00e8s la compression Brotli <\/figcaption><\/figure>\n<h3 id=\"adaptive-serving\"><span class=\"ez-toc-section\" id=\"Adaptive-serving\"><\/span>Service adaptatif <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lors du chargement de ressources qui constituent le contenu principal d&#039;une page, il peut \u00eatre efficace de<br \/>\nr\u00e9cup\u00e9rer diff\u00e9rents actifs en fonction de l&#039;appareil de l&#039;utilisateur ou des conditions du r\u00e9seau. Cela peut \u00eatre fait en utilisant<br \/>\nles <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/netinfo\/\">Informations sur le r\u00e9seau<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/device-memory\/\">Appareil<br \/>\nM\u00e9moire<\/a>, et<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/workers.html#navigator.hardwareconcurrency\">Mat\u00e9riel<\/a><br \/>\nApis.<\/p>\n<p>Si vous disposez de ressources importantes essentielles pour le rendu initial, vous pouvez utiliser diff\u00e9rentes variantes<br \/>\nde la m\u00eame ressource en fonction de la connexion ou de l&#039;appareil de l&#039;utilisateur. Par exemple, vous pouvez afficher un<br \/>\nimage au lieu d&#039;une vid\u00e9o pour toute vitesse de connexion inf\u00e9rieure \u00e0 4G:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">si<\/span> <span class=\"token punctuation\">(<\/span>navigateur<span class=\"token punctuation\">.<\/span>lien <span class=\"token operator\">&amp;&amp;<\/span> navigateur<span class=\"token punctuation\">.<\/span>lien<span class=\"token punctuation\">.<\/span>effectiveType<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">si<\/span> <span class=\"token punctuation\">(<\/span>navigateur<span class=\"token punctuation\">.<\/span>lien<span class=\"token punctuation\">.<\/span>effectiveType <span class=\"token operator\">===<\/span> <span class=\"token string\">'4g'<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">else<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Une liste de propri\u00e9t\u00e9s utiles que vous pouvez utiliser:<\/p>\n<ul>\n<li><code>navigator.connection.effectiveType<\/code>: Type de connexion efficace<\/li>\n<li><code>navigator.connection.saveData<\/code>: \u00c9conomiseur de donn\u00e9es activ\u00e9 \/ d\u00e9sactiv\u00e9<\/li>\n<li><code>navigator.hardwareConcurrency<\/code>: Nombre de c\u0153urs du processeur<\/li>\n<li><code>navigator.deviceMemory<\/code>: M\u00e9moire de l&#039;appareil<\/li>\n<\/ul>\n<h3 id=\"cache-assets-using-a-service-worker\"><span class=\"ez-toc-section\" id=\"Cache-assets-using-a-service-worker\"><\/span>Mettre en cache les actifs \u00e0 l&#039;aide d&#039;un service worker <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Les techniciens de service peuvent \u00eatre utilis\u00e9s pour de nombreuses t\u00e2ches utiles, y compris la diffusion de r\u00e9ponses HTML plus petites comme<br \/>\nmentionn\u00e9 plus haut dans cet article. Ils peuvent \u00e9galement \u00eatre utilis\u00e9s pour mettre en cache toute ressource statique qui peut \u00eatre<br \/>\nservi au navigateur au lieu du r\u00e9seau lors de demandes r\u00e9p\u00e9t\u00e9es.<\/p>\n<p>La mise en cache des ressources critiques \u00e0 l&#039;aide d&#039;un technicien de service peut r\u00e9duire consid\u00e9rablement leurs temps de chargement,<br \/>\nen particulier pour les utilisateurs qui rechargent la page Web avec une connexion plus faible (ou m\u00eame y acc\u00e8dent hors ligne).<br \/>\nBiblioth\u00e8ques comme <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/\">Bo\u00eete de travail<\/a> peut faire le processus de<br \/>\nmettre \u00e0 jour les actifs pr\u00e9cach\u00e9s plus facilement que d&#039;\u00e9crire un service worker personnalis\u00e9 pour g\u00e9rer cela vous-m\u00eame.<\/p>\n<h2 id=\"client-side-rendering\"><span class=\"ez-toc-section\" id=\"Client-side-rendering\"><\/span>Rendu c\u00f4t\u00e9 client <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>De nombreux sites utilisent la logique JavaScript c\u00f4t\u00e9 client pour afficher les pages directement dans le navigateur. Cadres et<br \/>\nbiblioth\u00e8ques, comme <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">R\u00e9agir<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/angular.io\/\">Angulaire<\/a>, et<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/vuejs.org\/\">Vue<\/a>, ont facilit\u00e9 la cr\u00e9ation d&#039;applications d&#039;une seule page qui g\u00e8rent<br \/>\ndiff\u00e9rentes facettes d&#039;une page Web enti\u00e8rement sur le client plut\u00f4t que sur le serveur.<\/p>\n<p>Si vous cr\u00e9ez un site qui est principalement rendu sur le client, vous devez vous m\u00e9fier de l&#039;effet qu&#039;il<br \/>\npeut avoir sur LCP si un gros bundle JavaScript est utilis\u00e9. Si les optimisations ne sont pas en place pour emp\u00eacher<br \/>\nil, les utilisateurs peuvent ne pas voir ou interagir avec le contenu de la page tant que tout le JavaScript critique n&#039;a pas<br \/>\ntermin\u00e9 le t\u00e9l\u00e9chargement et l&#039;ex\u00e9cution.<\/p>\n<p>Lors de la cr\u00e9ation d&#039;un site rendu c\u00f4t\u00e9 client, tenez compte des optimisations suivantes:<\/p>\n<ul>\n<li>Minimisez le JavaScript critique<\/li>\n<li>Utiliser le rendu c\u00f4t\u00e9 serveur<\/li>\n<li>Utiliser le pr\u00e9-rendu<\/li>\n<\/ul>\n<h3 id=\"minimize-critical-javascript\"><span class=\"ez-toc-section\" id=\"Minimize-critical-JavaScript\"><\/span>Minimisez le JavaScript critique <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Si le contenu de votre site ne devient visible, ou avec lequel il est possible d&#039;interagir, qu&#039;apr\u00e8s un certain temps<br \/>\nJavaScript est t\u00e9l\u00e9charg\u00e9: il devient encore plus important de r\u00e9duire la taille de votre bundle car<br \/>\nautant que possible. Cela peut \u00eatre fait par:<\/p>\n<ul>\n<li>R\u00e9duire le JavaScript<\/li>\n<li>Report de JavaScript inutilis\u00e9<\/li>\n<li>Minimiser les polyfills inutilis\u00e9s<\/li>\n<\/ul>\n<p>Revenez \u00e0 la section R\u00e9duire le temps de blocage JavaScript pour en savoir plus sur<br \/>\nces optimisations.<\/p>\n<h3 id=\"use-server-side-rendering\"><span class=\"ez-toc-section\" id=\"Use-server-side-rendering\"><\/span>Utiliser le rendu c\u00f4t\u00e9 serveur <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Minimiser la quantit\u00e9 de JavaScript doit toujours \u00eatre la premi\u00e8re chose sur laquelle se concentrer pour les sites<br \/>\nprincipalement rendu par le client. Cependant, vous devez \u00e9galement envisager de combiner une exp\u00e9rience de rendu de serveur pour<br \/>\nam\u00e9liorer autant que possible LCP.<\/p>\n<p>Ce concept fonctionne en utilisant le serveur pour rendre l&#039;application en HTML, o\u00f9 le client<br \/>\n\u00ab<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.org\/docs\/react-hydration\/\">hydrate<\/a>\u00bbTout le JavaScript et les donn\u00e9es requises<br \/>\nsur le m\u00eame contenu DOM. Cela peut am\u00e9liorer LCP en garantissant que le contenu principal de la page est le premier<br \/>\nrendu sur le serveur plut\u00f4t que uniquement sur le client, mais il y a quelques inconv\u00e9nients:<\/p>\n<ul>\n<li>Maintenir la m\u00eame application rendue en JavaScript sur le serveur et le client peut<br \/>\naugmenter la complexit\u00e9.<\/li>\n<li>L&#039;ex\u00e9cution de JavaScript pour rendre un fichier HTML sur le serveur augmentera toujours le serveur<br \/>\ntemps de r\u00e9ponse (TTFB) par rapport \u00e0 la simple diffusion de pages statiques \u00e0 partir du serveur.<\/li>\n<li>Une page rendue par le serveur peut sembler interagir avec, mais elle ne peut r\u00e9pondre \u00e0 aucun<br \/>\nentr\u00e9e de l&#039;utilisateur jusqu&#039;\u00e0 ce que tout le JavaScript c\u00f4t\u00e9 client soit ex\u00e9cut\u00e9. Bref, \u00e7a peut faire <strong>Temps de<br \/>\nInteractif<\/strong> (TTI) pire.<\/li>\n<\/ul>\n<h3 id=\"use-pre-rendering\"><span class=\"ez-toc-section\" id=\"Use-pre-rendering\"><\/span>Utiliser le pr\u00e9-rendu <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Le pr\u00e9-rendu est une technique distincte qui est moins complexe que le rendu c\u00f4t\u00e9 serveur et aussi<br \/>\nfournit un moyen d&#039;am\u00e9liorer LCP dans votre application. Un navigateur sans t\u00eate, qui est un navigateur sans<br \/>\ninterface utilisateur, est utilis\u00e9 pour g\u00e9n\u00e9rer des fichiers HTML statiques de chaque route pendant la construction. Ces fichiers<br \/>\npeuvent ensuite \u00eatre exp\u00e9di\u00e9s avec les bundles JavaScript n\u00e9cessaires \u00e0 l&#039;application.<\/p>\n<p>Avec le pr\u00e9-rendu, TTI est toujours n\u00e9gativement impact\u00e9 mais les temps de r\u00e9ponse du serveur ne sont pas aussi affect\u00e9s que<br \/>\nils seraient avec une solution de rendu c\u00f4t\u00e9 serveur qui rend chaque page dynamiquement seulement apr\u00e8s<br \/>\nc&#039;est demand\u00e9.<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-prerendering-3562107' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-prerendering-3562107.png'><figcaption class=\"w-figcaption\">Exemple d&#039;am\u00e9lioration du LCP: avant et apr\u00e8s le pr\u00e9-rendu<\/figcaption><\/figure>\n<div class=\"w-aside w-aside--note\">\n<p>Pour une plong\u00e9e plus approfondie dans les diff\u00e9rentes architectures de rendu serveur, jetez un \u0153il \u00e0 <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2019\/02\/rendering-on-the-web\">Rendu sur le<br \/>\nla toile<\/a>.<\/p>\n<\/div>\n<p>Un certain nombre d&#039;outils sont disponibles pour mesurer et d\u00e9boguer LCP:<\/p>\n<ul>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Phare 6.0<\/a> inclut le support pour<br \/>\nmesurer le LCP dans un laboratoire.<\/p>\n<p><img alt='phare-2324548' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lighthouse-2324548.jpg'><\/p>\n<\/li>\n<li>\n<p>le <strong>Timings<\/strong> section de la<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/evaluate-performance\">Performance<\/a><br \/>\npanneau dans Chrome DevTools comprend un marqueur LCP et vous montre \u00e0 quel \u00e9l\u00e9ment est associ\u00e9<br \/>\nLCP lorsque vous survolez le <strong>N\u0153ud associ\u00e9<\/strong> domaine.<\/p>\n<p><img alt='lcp-chrome-devtools-1981471' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-chrome-devtools-1981471.png'><\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-user-experience-report\">Rapport d&#039;exp\u00e9rience utilisateur Chrome<\/a><br \/>\nfournit des valeurs LCP r\u00e9elles agr\u00e9g\u00e9es au niveau de l&#039;origine<\/p>\n<\/li>\n<\/ul>\n<p><em>Merci \u00e0 Philip Walton, Katie Hempenius, Kayce Basques et Ilya Grigorik pour leurs critiques.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Comment rendre votre contenu principal plus rapidement. 5 mai 2020 Mis \u00e0 jour le 20 ao\u00fbt 2020 Je ne vois aucun contenu utile\u00a0! Pourquoi le chargement est-il si long ? \ud83d\ude16 Un\u2026<\/p>","protected":false},"author":1,"featured_media":92905,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-92904","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Optimize Largest Contentful Paint - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can&#039;t see any useful content! Why does it take so long to load? \ud83d\ude16 One factor\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimize Largest Contentful Paint\" \/>\n<meta property=\"og:description\" content=\"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can&#039;t see any useful content! Why does it take so long to load? \ud83d\ude16 One factor\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-15T13:25:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Optimize Largest Contentful Paint\",\"datePublished\":\"2022-10-15T13:25:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\"},\"wordCount\":2488,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"fr-FR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\",\"name\":\"Optimize Largest Contentful Paint - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"datePublished\":\"2022-10-15T13:25:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/10\\\/hero2-4461504.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero2-4461504-4002585-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Optimize Largest Contentful Paint - R Marketing Digital","description":"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor","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:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/","og_locale":"fr_FR","og_type":"article","og_title":"Optimize Largest Contentful Paint","og_description":"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor","og_url":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-15T13:25:02+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Optimize Largest Contentful Paint","datePublished":"2022-10-15T13:25:02+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/"},"wordCount":2488,"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","articleSection":["Dev"],"inLanguage":"fr-FR"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/","url":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/","name":"Optimize Largest Contentful Paint - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","datePublished":"2022-10-15T13:25:02+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can't see any useful content! Why does it take so long to load? \ud83d\ude16 One factor","inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/hero2-4461504.jpg","width":1200,"height":360,"caption":"hero2-4461504-4002585-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"Marketing num\u00e9rique","description":"Agence de r\u00e9f\u00e9rencement | Publicit\u00e9 sur les r\u00e9seaux sociaux | Gestion de communaut\u00e9","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"Marketing num\u00e9rique","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/92904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/comments?post=92904"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/posts\/92904\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media\/92905"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/media?parent=92904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/categories?post=92904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/fr\/wp-json\/wp\/v2\/tags?post=92904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}