{"id":20433,"date":"2024-03-01T12:02:33","date_gmt":"2024-03-01T11:02:33","guid":{"rendered":"https:\/\/www.sortlist.fr\/blog\/?p=20433"},"modified":"2024-08-08T21:50:09","modified_gmt":"2024-08-08T19:50:09","slug":"largest-contentful-paint","status":"publish","type":"post","link":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/","title":{"rendered":"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024"},"content":{"rendered":"     \n    <div id=\"module_key_takeaways--block_6ea48574e8626afd0d6a544059620c06\" class=\"sl_custom_module module_key_takeaways is_preview\">\n        <div class=\"module_key_takeaways__wrapper\">\n            \n\n<p><strong>Points-cl\u00e9s :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>D\u00e9finition et importance du LCP<\/strong> : Le Largest Contentful Paint (LCP) mesure le temps de chargement du plus grand \u00e9l\u00e9ment visible sur une page, essentiel pour une bonne exp\u00e9rience utilisateur et un meilleur classement Google.<\/li>\n\n\n\n<li><strong>\u00c9l\u00e9ments influen\u00e7ant le LCP<\/strong> : Les images, vid\u00e9os, grands blocs de texte, et \u00e9l\u00e9ments avec images de fond sont pris en compte dans le calcul du LCP, influen\u00e7ant directement la vitesse per\u00e7ue de chargement d&rsquo;une page.<\/li>\n\n\n\n<li><strong>Impact sur SEO et conversions<\/strong> : Un bon LCP am\u00e9liore le r\u00e9f\u00e9rencement et les taux de conversion en r\u00e9duisant le taux de rebond et en augmentant l&rsquo;engagement utilisateur.<\/li>\n\n\n\n<li><strong>Outils de mesure du LCP<\/strong> : Des outils comme PageSpeed Insights, Chrome DevTools, et WebPageTest permettent d&rsquo;\u00e9valuer et d&rsquo;am\u00e9liorer le LCP pour optimiser la performance web.<\/li>\n\n\n\n<li><strong>Strat\u00e9gies d&rsquo;optimisation du LCP<\/strong> : Optimiser les images, r\u00e9duire les scripts JavaScript et CSS, utiliser des CDN, et choisir un bon h\u00e9bergeur sont essentiels pour am\u00e9liorer le LCP.<\/li>\n\n\n\n<li><strong>Maintien du LCP lors des mises \u00e0 jour<\/strong> : Des tests de performance r\u00e9guliers et une surveillance continue du LCP apr\u00e8s les mises \u00e0 jour du site sont cruciaux pour conserver une UX optimale et un bon r\u00e9f\u00e9rencement.<\/li>\n<\/ul>\n\n\n        <\/div>\n    <\/div>\n\n\n\n\n<p>Les Core web vitals regroupent un ensemble d\u2019indicateurs qui servent \u00e0 mesurer la <strong>qualit\u00e9 de l\u2019exp\u00e9rience utilisateur<\/strong> sur un site internet. Ils \u00e9voluent avec le temps et sont utilis\u00e9s par Google pour \u00e9valuer le r\u00e9f\u00e9rencement des pages web dans ses r\u00e9sultats de recherche. Parmi les m\u00e9triques qui les composent figure le <strong>Largest Contentful Paint<\/strong> ou LCP. D\u00e9couvrez, ci-dessous, diff\u00e9rentes m\u00e9thodes pour l&rsquo;am\u00e9liorer. Si vous pr\u00e9f\u00e9rez, faire appel \u00e0 une <a href=\"https:\/\/www.sortlist.fr\/seo\/france-fr\">agence SEO<\/a> est une option plus simple pour optimiser son LCP.<\/p>\n\n\n\n<p>Concr\u00e8tement, c\u2019est quoi&nbsp;? Comment le calculer&nbsp;? Quels sont les diff\u00e9rents outils et techniques pour l\u2019analyser&nbsp;? Comment l\u2019optimiser&nbsp;? Voici tout ce que vous devez absolument conna\u00eetre sur le Largest contentful paint.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Qu\u2019est-ce que le LCP&nbsp;?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finition<\/h3>\n\n\n\n<p>Le Largest Contentful Paint est une <strong>mesure de performance<\/strong> utilis\u00e9e pour \u00e9valuer le temps qu\u2019il faut pour qu\u2019un utilisateur voie le contenu principal d\u2019une page web. Plus pr\u00e9cis\u00e9ment, il mesure le temps \u00e9coul\u00e9 entre le d\u00e9but du chargement d\u2019une page et le moment o\u00f9 <strong>le plus grand \u00e9l\u00e9ment visible<\/strong> de cette page est enti\u00e8rement rendu dans la fen\u00eatre d\u2019affichage.<\/p>\n\n\n\n<p>Un LCP rapide est important, car il contribue \u00e0 une meilleure <a href=\"https:\/\/www.sortlist.fr\/blog\/ameliorer-son-experience-utilisateur\/\" target=\"_blank\" rel=\"noreferrer noopener\">exp\u00e9rience utilisateur<\/a>. Ce qui peut se traduire par un meilleur classement dans la SERP et une bonne r\u00e9tention des visiteurs. Cela rend \u00e9galement le site internet plus accessible, notamment pour les utilisateurs avec des connexions lentes ou des appareils mobiles moins puissants.<\/p>\n\n\n\n<p>En tout cas, il s\u2019agit d\u2019un des indicateurs cl\u00e9s de performance (KPI) utilis\u00e9s dans le cadre de l\u2019initiative <strong>Web Vitals de Google<\/strong>, qui vise \u00e0 aider les propri\u00e9taires de sites web \u00e0 optimiser l\u2019UX en fournissant des directives de performance sp\u00e9cifiques.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quels sont les \u00e9l\u00e9ments pris en compte pour le calcul du Largest Contentful Paint&nbsp;?<\/h3>\n\n\n\n<p>Le Largest Contentful Paint repr\u00e9sente la vitesse \u00e0 laquelle le plus grand \u00e9l\u00e9ment de contenu visible appara\u00eet dans l\u2019espace d\u2019affichage d\u2019une page web. Les \u00e9l\u00e9ments mesur\u00e9s par le LCP peuvent varier d\u2019un site \u00e0 l\u2019autre, mais concernent g\u00e9n\u00e9ralement&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Les images<\/strong> (&amp;lt;img&amp;gt; ou &amp;lt;image&amp;gt; \u00e0 l\u2019int\u00e9rieur d\u2019un \u00e9l\u00e9ment &amp;lt;svg&amp;gt;). Ce sont souvent les plus grands \u00e9l\u00e9ments sur une page.<\/li>\n\n\n\n<li><strong>Les vid\u00e9os<\/strong> (&amp;lt;video&amp;gt;). Elles s\u2019int\u00e8grent dans les \u00e9l\u00e9ments de contenu pour le LCP, en particulier si elles occupent une grande partie au-dessus de la ligne de flottaison.<\/li>\n\n\n\n<li><strong>Le niveau bloc<\/strong> contenant des text nodes ou n\u0153uds de texte. Les grands blocs de texte, tels que les titres et les paragraphes, sont pris en compte si leur taille est significative.<\/li>\n\n\n\n<li>Les \u00e9l\u00e9ments avec une <strong>image de fond charg\u00e9e via la fonction url<\/strong> () (par opposition \u00e0 un d\u00e9grad\u00e9 CSS).<\/li>\n<\/ul>\n\n\n\n<p>Quelle que soit la nature de l\u2019\u00e9l\u00e9ment, seule la taille qui s\u2019affiche dans l\u2019\u00e9cran est mesur\u00e9e. Si celui-ci s\u2019\u00e9tend au-del\u00e0 de la fen\u00eatre d\u2019affichage ou est tronqu\u00e9, on ne consid\u00e8re pas ces parties. Ainsi, le Largest Contentful Paint exclut le contenu masqu\u00e9, mais aussi les images avec une faible densit\u00e9 de pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Qu\u2019est-ce qu\u2019un bon ou mauvais LCP&nbsp;?<\/h3>\n\n\n\n<p>Pour d\u00e9finir la qualit\u00e9 du LCP, il faut tout simplement se r\u00e9f\u00e9rer \u00e0 la vitesse de chargement de la page sur un site web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/score-lcp.svg\" alt=\"mesure du score largest contentful paint\" class=\"wp-image-20446\"\/><\/figure>\n\n\n\n<p>Un bon Largest Contentful Paint est g\u00e9n\u00e9ralement consid\u00e9r\u00e9 comme \u00e9tant <strong>inf\u00e9rieur \u00e0 2,5 secondes \u00e0 75&nbsp;% du temps<\/strong>. Cela signifie que le temps de chargement du contenu principal de la page est relativement court. L\u2019id\u00e9al serait toutefois d\u2019avoir un <strong>score en dessous de 1,2 seconde<\/strong> pour ne pas avoir \u00e0 effectuer des am\u00e9liorations.<\/p>\n\n\n\n<p>Un tel LCP favorise une meilleure satisfaction des utilisateurs et peut avoir un impact positif sur le classement dans les r\u00e9sultats de recherche. Et pour cause, Google privil\u00e9gie les sites offrant une UX optimale.<\/p>\n\n\n\n<p>En revanche, on parle d\u2019un mauvais Largest Contentful Paint lorsqu\u2019il est <strong>sup\u00e9rieur \u00e0 4 secondes<\/strong>. Cette lenteur dans le temps de chargement peut avoir diverses origines. On peut citer la lenteur du temps de r\u00e9ponse du serveur, le rendu c\u00f4t\u00e9 client, l\u2019ajout de CSS et de JavaScript, les ressources volumineuses, etc.<\/p>\n\n\n\n<p>Quoi qu\u2019il en soit, un LCP m\u00e9diocre est susceptible d\u2019entra\u00eener une frustration chez les utilisateurs, d\u2019augmenter le <a href=\"https:\/\/www.sortlist.fr\/blog\/taux-de-rebond\/\" target=\"_blank\" rel=\"noreferrer noopener\">taux de rebond<\/a> et de nuire \u00e0 la perception de la cr\u00e9dibilit\u00e9 du site internet. Cela peut m\u00eame avoir des r\u00e9percussions n\u00e9gatives sur le classement dans la SERP, car les moteurs de recherche accordent de plus en plus d\u2019importance \u00e0 la performance web dans leurs algorithmes de classement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment le LCP affecte vos SEO et taux de conversion&nbsp;?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Lien entre LCP, classement Google et engagement des utilisateurs<\/h3>\n\n\n\n<p>Le LCP constitue un facteur de r\u00e9f\u00e9rencement important pour Google puisqu\u2019il est directement li\u00e9 \u00e0 l\u2019exp\u00e9rience utilisateur. En effet, depuis 2020, l\u2019algorithme de classement de Google se focalise sur trois aspects de l\u2019exp\u00e9rience utilisateur. La vitesse de chargement d\u2019une page, mesur\u00e9e en partie par le LCP, est l\u2019un des indicateurs cl\u00e9s de cette exp\u00e9rience. Cette m\u00e9trique a donc le pouvoir d\u2019influencer le <strong>positionnement d\u2019un site web<\/strong> dans les pages de r\u00e9sultats de recherche.<\/p>\n\n\n\n<p>En regardant la SERP, vous verrez qu\u2019une page avec un LCP \u00e9lev\u00e9 sera mal class\u00e9e par rapport \u00e0 une autre avec un LCP plus bas. D\u2019ailleurs, lorsqu\u2019elle prend trop de temps \u00e0 charger, l\u2019internaute risque de ne pas y rester suffisamment longtemps. Et un utilisateur qui quitte une page avant qu\u2019elle ne soit compl\u00e8tement charg\u00e9e sera toujours moins enclin \u00e0 convertir, c\u2019est-\u00e0-dire \u00e0 <strong>effectuer une action souhait\u00e9e<\/strong>, comme acheter un produit ou s\u2019abonner \u00e0 un service.<\/p>\n\n\n\n<p>Par cons\u00e9quent, un mauvais LCP entra\u00eene une baisse du <a href=\"https:\/\/www.sortlist.fr\/blog\/taux-de-transformation\/\" target=\"_blank\" rel=\"noreferrer noopener\">taux de conversion<\/a> ainsi qu\u2019une augmentation du taux de rebond. Dans le cas contraire, il permet d\u2019am\u00e9liorer le <a href=\"https:\/\/www.sortlist.fr\/blog\/taux-de-retention\/\" target=\"_blank\" rel=\"noreferrer noopener\">taux de r\u00e9tention<\/a> des utilisateurs et le temps pass\u00e9 sur la page. Ce qui va, par la m\u00eame occasion, augmenter le trafic organique vers le site web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Importance du LCP dans l\u2019exp\u00e9rience utilisateur<\/h3>\n\n\n\n<p>Le Largest Contentful Paint joue un r\u00f4le crucial dans l\u2019exp\u00e9rience utilisateur d\u2019un site web. En tant que mesure de la vitesse de chargement du contenu principal d\u2019une page, il a un effet direct sur la perception et la satisfaction des utilisateurs.<\/p>\n\n\n\n<p>Voici quelques raisons pour lesquelles il tient une place importante dans l\u2019UX&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Premi\u00e8re impression<\/strong>. Le LCP repr\u00e9sente le premier contact visuel de l\u2019utilisateur avec le contenu principal de la page. Une r\u00e9ponse imm\u00e9diate va alors cr\u00e9er une premi\u00e8re impression positive, tandis qu\u2019un chargement lent peut susciter de la frustration et de l\u2019impatience.<\/li>\n\n\n\n<li><strong>Engagement<\/strong>. Les visiteurs ont plus de chance de rester sur un site web et d\u2019explorer son contenu lorsque les pages s\u2019affichent rapidement. Un bon LCP favorise de ce fait un engagement plus \u00e9lev\u00e9 en incitant les utilisateurs \u00e0 interagir davantage avec le site.<\/li>\n\n\n\n<li><strong>Conversions<\/strong>. Les sites web avec des temps de chargement moins lents ont tendance \u00e0 g\u00e9n\u00e9rer plus de conversions, que ce soit des ventes, des inscriptions ou d\u2019autres actions souhait\u00e9es. Comme un excellent LCP fournit une UX positive, cela permettra d\u2019optimiser le taux de conversions.<\/li>\n\n\n\n<li><strong>Satisfaction globale<\/strong>. En fin de compte, un LCP rapide contribue \u00e0 une UX globale plus agr\u00e9able. Les utilisateurs appr\u00e9cient les sites qui r\u00e9pondent rapidement \u00e0 leurs besoins et offrent un acc\u00e8s facile au contenu recherch\u00e9.<\/li>\n<\/ul>\n\n\n\n<p>En d\u00e9finitive, le Largest Contentful Paint s\u2019av\u00e8re essentiel pour maintenir l\u2019engagement, encourager la r\u00e9tention des visiteurs et garantir leur satisfaction.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tudes de cas&nbsp;: Impact du LCP sur les performances des sites<\/h3>\n\n\n\n<p>Dans une page web, le plus grand \u00e9l\u00e9ment est susceptible de changer au moment du chargement \u00e9tant donn\u00e9 que ce dernier se fait le plus souvent par \u00e9tapes. Concr\u00e8tement, apr\u00e8s avoir dessin\u00e9 le premier frame, le navigateur envoie un <em><strong>PerformanceEntry<\/strong><\/em> (en l\u2019occurrence, une entr\u00e9e <em>largest-contentful-paint<\/em>) qui d\u00e9termine le plus grand \u00e9l\u00e9ment de la page. Puis, il refait la m\u00eame action quand cet \u00e9l\u00e9ment change et ainsi de suite.<\/p>\n\n\n\n<p>Prenons l\u2019exemple d\u2019une page compos\u00e9e d\u2019un texte et d\u2019une image. Au d\u00e9but, le navigateur peut uniquement charger le texte, avant d\u2019envoyer une entr\u00e9e <em>largest-contentful-paint<\/em> faisant r\u00e9f\u00e9rence \u00e0 un &amp;lt;h1&amp;gt;. L\u2019image appara\u00eet ensuite dans la fen\u00eatre d\u2019affichage, c\u2019est \u00e0 ce moment qu\u2019une seconde entr\u00e9e <em>largest-contentful-paint<\/em>, avec la propri\u00e9t\u00e9 <em>element<\/em> qui fait r\u00e9f\u00e9rence \u00e0 une &amp;lt;img&amp;gt;, est transmise.<\/p>\n\n\n\n<p>Afin de r\u00e9duire les co\u00fbts du calcul et d\u2019envoi des <em>PerformanceEntry<\/em>, l\u2019\u00e9l\u00e9ment le plus important de la page, dont la taille ou la position a \u00e9t\u00e9 modifi\u00e9e, ne donne pas lieu \u00e0 de <strong>nouveaux candidats au LCP<\/strong>. En d\u2019autres termes, les \u00e9l\u00e9ments initialement invisibles \u00e0 l\u2019\u00e9cran, mais qui s\u2019y affichent ult\u00e9rieurement, ne sont pas pris en compte. Aussi, les \u00e9l\u00e9ments pr\u00e9sents de base dans la fen\u00eatre d\u2019affichage, puis supprim\u00e9s, gardent toujours leur taille originelle dans l\u2019\u00e9cran.<\/p>\n\n\n\n<p>En pratique, voici comment cela se pr\u00e9sente&nbsp;:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exemple 1<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"749\" height=\"589\" src=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp.png\" alt=\"exemples de fonctionnement du lcp\" class=\"wp-image-20453\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp.png 749w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-50x39.png 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-288x226.png 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-576x453.png 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-339x267.png 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-678x533.png 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-373x293.png 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-746x587.png 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-691x543.png 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-478x376.png 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-516x406.png 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-1-lcp-680x535.png 680w\" sizes=\"auto, (max-width: 749px) 100vw, 749px\" \/><\/figure><\/div>\n\n\n<p>Dans la premi\u00e8re s\u00e9rie d\u2019images, nous pouvons voir que l\u2019\u00e9l\u00e9ment le plus grand (marqu\u00e9 en vert) change trois fois lors du chargement. Dans ce cas, du nouveau contenu est ajout\u00e9 au DOM (Document Object Model) \u00e0 chaque fois. Cela vient modifier la structure et l\u2019affichage des \u00e9l\u00e9ments de la page web. Dans la deuxi\u00e8me s\u00e9rie d\u2019images, on observe une transformation de la mise en page. Le plus grand \u00e9l\u00e9ment se retire de l\u2019\u00e9cran pour laisser place \u00e0 un autre LCP candidat.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Exemple 2<\/h4>\n\n\n\n<p>Il faut tout de m\u00eame savoir que l\u2019\u00e9l\u00e9ment le plus volumineux ne s\u2019affiche pas toujours tardivement.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"751\" height=\"591\" src=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp.png\" alt=\"exemples de fonctionnement du lcp\" class=\"wp-image-20454\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp.png 751w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-50x39.png 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-288x227.png 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-576x453.png 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-339x267.png 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-678x534.png 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-373x294.png 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-746x587.png 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-691x544.png 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-478x376.png 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-516x406.png 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-2-lcp-680x535.png 680w\" sizes=\"auto, (max-width: 751px) 100vw, 751px\" \/><\/figure><\/div>\n\n\n<p>Dans la premi\u00e8re chronologie du LCP sur Instagram, le logo constitue l\u2019\u00e9l\u00e9ment le plus grand et appara\u00eet tr\u00e8s t\u00f4t, bien que d\u2019autres \u00e9l\u00e9ments s\u2019ajoutent au fur et \u00e0 mesure du chargement de la page. De m\u00eame pour le deuxi\u00e8me exemple, o\u00f9 le texte est lisible avant m\u00eame que les images et le logo de Google ne soient visibles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment analyser le LCP (outils et techniques)&nbsp;?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Outils recommand\u00e9s pour mesurer le LCP<\/h3>\n\n\n\n<p>Le Largest Contentful Paint peut \u00eatre calcul\u00e9 en utilisant des outils de terrain ou de laboratoire. En voici quelques-uns&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/pagespeed.web.dev\/?hl=fr\" target=\"_blank\" rel=\"noreferrer noopener\">PageSpeed Insights<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/devtools?hl=fr\" target=\"_blank\" rel=\"noreferrer noopener\">Chrome DevTools<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/www.webpagetest.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">WebPageTest<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/gtmetrix.com\/\">GTmetrix<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/developer.chrome.com\/docs\/crux?hl=fr\" target=\"_blank\" rel=\"noreferrer noopener\">Rapport d\u2019exp\u00e9rience utilisateur Chrome<\/a><\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">PageSpeed Insights<\/h4>\n\n\n\n<p>PageSpeed Insights est un outil fourni par Google qui analyse la <strong>performance d\u2019une page web sur mobile et sur ordinateur<\/strong>. Il donne des recommandations pour am\u00e9liorer la vitesse de chargement et affiche le LCP parmi d\u2019autres KPI.<\/p>\n\n\n\n<p>Pour mesurer le Largest Contentful Paint \u00e0 partir de ce programme, il convient d\u2019ouvrir Google PageSpeed Insights dans le navigateur, d\u2019entrer l\u2019URL de la page \u00e0 tester et de cliquer sur \u00ab&nbsp;Analyser&nbsp;\u00bb. Une fois l\u2019analyse termin\u00e9e, vous verrez le score LCP de votre page.<\/p>\n\n\n\n<p>Ci-dessous un exemple avec l&rsquo;URL du site du magazine de mode ELLE.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1017\" height=\"671\" src=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights.png\" alt=\"exemple mesure du score lcp\" class=\"wp-image-20455\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights.png 1017w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-768x507.png 768w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-50x33.png 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-288x190.png 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-576x380.png 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-339x224.png 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-678x447.png 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-373x246.png 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-746x492.png 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-691x456.png 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-973x642.png 973w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-478x315.png 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-956x631.png 956w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-516x340.png 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/exemple-pagespeed-insights-680x449.png 680w\" sizes=\"auto, (max-width: 1017px) 100vw, 1017px\" \/><\/figure><\/div>\n\n\n<p>Pour identifier l\u2019\u00e9l\u00e9ment utilis\u00e9 par Google pour mesurer le LCP, rendez-vous dans la section <em>\u00c9l\u00e9ment identifi\u00e9 comme \u00ab\u00a0Largest Contentful&nbsp;Paint\u00a0\u00bb<\/em>, dans l\u2019onglet <em>Diagnostics.<\/em><\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"941\" height=\"456\" data-id=\"20461\" src=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp.png\" alt=\"exemple d'\u00e9l\u00e9ment identifi\u00e9 comme lcp\" class=\"wp-image-20461\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp.png 941w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-768x372.png 768w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-50x24.png 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-288x140.png 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-576x279.png 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-339x164.png 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-678x329.png 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-373x181.png 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-746x362.png 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-691x335.png 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-478x232.png 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-516x250.png 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/element-lcp-680x330.png 680w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/figure>\n<\/figure>\n\n\n\n<h4 class=\"wp-block-heading\">Chrome DevTools<\/h4>\n\n\n\n<p>Cet outil de d\u00e9veloppement int\u00e9gr\u00e9 \u00e0 Google Chrome propose une section <em>Performance<\/em> qui permet d\u2019enregistrer et d\u2019analyser les performances d\u2019une page web. Il donne acc\u00e8s \u00e0 des <strong>m\u00e9triques d\u00e9taill\u00e9es<\/strong>, dont le LCP, pour \u00e9valuer les performances de chargement.<\/p>\n\n\n\n<p>Pour l\u2019utiliser, suivez les \u00e9tapes ci-apr\u00e8s&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Ouvrir le navigateur Chrome et acc\u00e9der \u00e0 la page \u00e0 tester<\/li>\n\n\n\n<li>Ouvir les Chrome DevTools (F12 ou clic droit &gt; \u00ab&nbsp;Inspecter&nbsp;\u00bb &gt; onglet \u00ab&nbsp;Performance&nbsp;\u00bb)<\/li>\n\n\n\n<li>Cliquer sur l\u2019onglet <em>Performance<\/em>, puis sur <em>Recharger<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>\u00c0 l\u2019issue de l\u2019analyse, vous pouvez voir le score LCP de la page web en s\u00e9lectionnant la section <em>R\u00e9seau<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">WebPage Test<\/h4>\n\n\n\n<p>Il s\u2019agit d\u2019un service en ligne, \u00e0 la fois gratuit et complet, d\u00e9di\u00e9 aux tests de performances d\u2019un site web <strong>depuis diff\u00e9rentes localisations et sur diff\u00e9rents navigateurs<\/strong>. Il r\u00e9v\u00e8le des donn\u00e9es d\u00e9taill\u00e9es sur le temps de chargement, le LCP et d\u2019autres m\u00e9triques des Core web vitals. L\u2019utilisateur a m\u00eame la possibilit\u00e9 de b\u00e9n\u00e9ficier de conseils pour am\u00e9liorer les performances de sa page.<\/p>\n\n\n\n<p>Pour d\u00e9terminer le Largest Contentful Paint d\u2019une page sur WebPage Test, il faut&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Se rendre sur webpagetest.org<\/li>\n\n\n\n<li>Entrer l\u2019URL de la page \u00e0 tester<\/li>\n\n\n\n<li>S\u00e9lectionner la localisation et le navigateur<\/li>\n\n\n\n<li>Cliquer sur <em>D\u00e9marrer le test<\/em><\/li>\n\n\n\n<li>Acc\u00e9der \u00e0 l\u2019onglet <em>R\u00e9sum\u00e9<\/em> pour voir le r\u00e9sultat.<\/li>\n<\/ul>\n\n\n\n<p>Si vous souhaitez afficher une analyse plus approfondie du LCP, cliquez sur l\u2019onglet <em>D\u00e9tails<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">GTmetrix<\/h4>\n\n\n\n<p>Cet outil utilise un navigateur web r\u00e9el pour charger la page du site internet. Il calcule le LCP en mesurant le temps r\u00e9el n\u00e9cessaire pour afficher le plus grand \u00e9l\u00e9ment de contenu visible. GTmetrix propose \u00e9galement des <strong>analyses du r\u00e9f\u00e9rencement<\/strong> et offre des <strong>rapports complets<\/strong> et personnalisables.<\/p>\n\n\n\n<p>Pour exploiter ce logiciel, vous devez acc\u00e9der \u00e0 gtmetrix.com, saisir l\u2019URL du site web et cliquer sur <em>Analyser. <\/em>L\u2019\u00e9tat du LCP appara\u00eetra alors dans l\u2019onglet <em>Performances<\/em>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1554\" height=\"722\" src=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix.png\" alt=\"page d'accueil gtmetrix\" class=\"wp-image-20464\" srcset=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix.png 1554w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-768x357.png 768w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-1536x714.png 1536w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-50x23.png 50w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-288x134.png 288w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-576x268.png 576w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-339x158.png 339w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-678x315.png 678w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-373x173.png 373w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-746x347.png 746w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-691x321.png 691w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-1382x642.png 1382w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-973x452.png 973w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-1048x487.png 1048w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-478x222.png 478w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-956x444.png 956w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-516x240.png 516w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-1032x479.png 1032w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-680x316.png 680w, https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/page-daccueil-gtmetrix-1360x632.png 1360w\" sizes=\"auto, (max-width: 1554px) 100vw, 1554px\" \/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">Rapport d\u2019exp\u00e9rience utilisateur Chrome<\/h4>\n\n\n\n<p>Le rapport d\u2019exp\u00e9rience utilisateur Chrome (CrUX) est une source de donn\u00e9es pr\u00e9cieuse pour mesurer le Largest Contentful Paint d\u2019un site. Il regroupe des <strong>donn\u00e9es r\u00e9elles collect\u00e9es aupr\u00e8s d\u2019utilisateurs <\/strong>Chrome qui visitent un site en particulier.<\/p>\n\n\n\n<p>Voici les \u00e9tapes \u00e0 suivre&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Acc\u00e9der \u00e0 la <a href=\"https:\/\/search.google.com\/search-console\/about?hl=fr\" target=\"_blank\" rel=\"noreferrer noopener\">Search Console Google<\/a><\/li>\n\n\n\n<li>S\u00e9lectionner le site web \u00e0 tester<\/li>\n\n\n\n<li>Cliquer sur <em>Exp\u00e9rience utilisateur<\/em><\/li>\n\n\n\n<li>Cliquer sur <em>Core Web Vitals<\/em><\/li>\n\n\n\n<li>Consulter le rapport <em>Largest Contentful Paint<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Le rapport LCP g\u00e9n\u00e8re un certain nombre d\u2019informations telles que la distribution des scores LCP pour diff\u00e9rentes pages du site, la comparaison du score LCP avec celui d\u2019autres sites ou encore des suggestions d\u2019am\u00e9lioration.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Interpr\u00e9tation des r\u00e9sultats de LCP<\/h3>\n\n\n\n<p>Ce genre d\u2019interpr\u00e9tation implique de comprendre ce que les r\u00e9sultats signifient en termes d\u2019UX et de performance du site internet. Certains points sont alors \u00e0 consid\u00e9rer, comme le temps de chargement et la qualit\u00e9 de l\u2019UX.<\/p>\n\n\n\n<p>Comme \u00e9voqu\u00e9 plus haut dans cet article, le temps indiqu\u00e9 par le LCP repr\u00e9sente la dur\u00e9e \u00e9coul\u00e9e depuis le d\u00e9but du chargement de la page jusqu\u2019\u00e0 ce que le plus grand \u00e9l\u00e9ment de contenu visible soit <strong>enti\u00e8rement rendu \u00e0 l\u2019\u00e9cran<\/strong>. Plus ce temps est court, meilleure est l\u2019exp\u00e9rience pour l\u2019utilisateur. Cela signifie aussi que les utilisateurs voient d\u2019embl\u00e9e le contenu principal de la page. Ce qui r\u00e9duit le risque de frustration et encourage l\u2019engagement sur le site.<\/p>\n\n\n\n<p>Pour rappel, le Largest Contentful Paint est class\u00e9 en 3 cat\u00e9gories&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Bon (&lt;= 2,5 secondes)&nbsp;: chargement rapide<\/li>\n\n\n\n<li>Moyen (2,5 \u00e0 4 secondes)&nbsp;: chargement un peu lent, mais toujours acceptable<\/li>\n\n\n\n<li>Mauvais (&gt;= 4 secondes)&nbsp;: chargement tr\u00e8s lent.<\/li>\n<\/ul>\n\n\n\n<p>Afin d\u2019identifier les performances les plus lentes et les opportunit\u00e9s d\u2019am\u00e9lioration, n\u2019h\u00e9sitez pas \u00e0 comparer le LCP des diff\u00e9rentes pages de votre site internet. Vous pouvez m\u00eame le comparer \u00e0 celui des concurrents pour voir comment vous vous situez.<\/p>\n\n\n\n<p>Dans tous les cas, il para\u00eet judicieux d\u2019analyser le Largest Contentful Paint en conjonction avec d\u2019autres m\u00e9triques des Core web vitals, \u00e0 savoir le <strong>First Contentful Paint (FCP)<\/strong> et le <strong>Cumulative Layout Shift (CLS)<\/strong>. Ensemble, ces KPI projettent une image plus compl\u00e8te de la rapidit\u00e9 de chargement et de la stabilit\u00e9 visuelle de votre site web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment am\u00e9liorer le LCP&nbsp;?<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c9tapes d\u00e9taill\u00e9es pour l\u2019optimisation du LCP<\/h3>\n\n\n\n<p>Les causes d\u2019un mauvais LCP sont innombrables, les plus courantes \u00e9tant la lenteur du chargement des ressources, le rendu c\u00f4t\u00e9 client et les ressources bloquant le rendu. N\u00e9anmoins, il existe plusieurs m\u00e9thodes pour pallier ces probl\u00e8mes et am\u00e9liorer le Largest Contentful Paint (LCP) d\u2019une page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Optimiser les images<\/h4>\n\n\n\n<p>Les images peuvent ralentir consid\u00e9rablement le chargement d\u2019une page. De fait, les fichiers d\u2019images volumineux n\u00e9cessitent plus de temps pour \u00eatre t\u00e9l\u00e9charg\u00e9s et affich\u00e9s \u00e0 l\u2019\u00e9cran, voil\u00e0 pourquoi le rendu du contenu principal de la page est retard\u00e9.<\/p>\n\n\n\n<p>La solution id\u00e9ale serait donc de <strong>r\u00e9duire la taille des images<\/strong> sans sacrifier la qualit\u00e9 visuelle en utilisant des outils de compression comme <a href=\"https:\/\/jpegmini.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">JPEGmini<\/a>, <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">TinyPNG<\/a> ou <a href=\"https:\/\/imagify.io\/fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">Imagify<\/a>. Vous pouvez \u00e9galement adopter des formats d\u2019image plus r\u00e9cents comme WebP qui offrent une meilleure compression que les formats traditionnels comme JPEG et PNG. Ce type de format peut r\u00e9duire la taille des images de 25 \u00e0 35&nbsp;% sans perte de qualit\u00e9 visible.<\/p>\n\n\n\n<p>En outre, pensez \u00e0 indiquer les <strong>dimensions des images dans le code HTML<\/strong> \u00e0 l\u2019aide des attributs \u00ab&nbsp;width&nbsp;\u00bb et \u00ab&nbsp;height&nbsp;\u00bb pour \u00e9viter le retraitement de la mise en page lors de leur chargement. Cela va permettre au navigateur de r\u00e9server l\u2019espace n\u00e9cessaire pour les contenus visuels avant leur chargement.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Minimiser les codes JavaScript et CSS<\/h4>\n\n\n\n<p>Les scripts JavaScript volumineux peuvent requ\u00e9rir un temps de traitement suppl\u00e9mentaire, de telle mani\u00e8re qu\u2019ils retardent le chargement des \u00e9l\u00e9ments de la page. Il en va de m\u00eame pour les r\u00e8gles CSS complexes ou co\u00fbteuses en calcul. \u00c0 cet effet, il semble utile de <strong>supprimer toutes fonctionnalit\u00e9s non utilis\u00e9es<\/strong> en se servant de biblioth\u00e8ques l\u00e9g\u00e8res et en minifiant le code pour r\u00e9duire sa taille de t\u00e9l\u00e9chargement.<\/p>\n\n\n\n<p>Les pratiques de codage inefficaces qui pourraient ralentir l\u2019ex\u00e9cution du code JavaScript sont \u00e0 \u00e9viter, comme les boucles longues ou les op\u00e9rations de traitement intensives sur le thread principal. Les styles qui risqueraient de ralentir le chargement initial de la page sont aussi \u00e0 bannir pour avoir un bon rendu CSS.<\/p>\n\n\n\n<p>Plus particuli\u00e8rement, <strong>limitez l\u2019utilisation de propri\u00e9t\u00e9s CSS<\/strong> qui affectent le layout de la page, telles que \u00ab&nbsp;position&nbsp;: absolute&nbsp;\u00bb ou \u00ab&nbsp;float&nbsp;\u00bb, car elles peuvent conduire \u00e0 un recalcul de la mise en page et entraver le rendu du contenu principal. Priorisez les styles essentiels et d\u00e9placez ceux non critiques vers des fichiers externes ou utilisez des techniques comme le Critical CSS pour charger d\u2019abord les styles indispensables au rendu initial de la page.<\/p>\n\n\n\n<p>Dans certains cas, la <strong>combinaison de plusieurs fichiers JavaScript et CSS<\/strong> en un seul fichier entra\u00eene une r\u00e9duction du nombre de requ\u00eates HTTP n\u00e9cessaires au chargement de la page.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Utiliser un CDN (Content Delivery Network)<\/h4>\n\n\n\n<p>Un CDN est un r\u00e9seau de serveurs distribu\u00e9s \u00e0 travers le monde qui stocke et diffuse des copies de contenus web. Son utilisation contribue \u00e0 optimiser le Largest Contentful Paint gr\u00e2ce \u00e0 une <strong>livraison efficace des ressources statiques<\/strong> (images, fichiers CSS et scripts JavaScript) \u00e0 partir de serveurs situ\u00e9s plus pr\u00e8s des utilisateurs. C\u2019est cette r\u00e9duction de distance qui va effectivement minimiser le temps de latence et parfaire le temps de chargement d\u2019un site internet.<\/p>\n\n\n\n<p>Par ailleurs, les CDN sont souvent dot\u00e9s de fonctionnalit\u00e9s avanc\u00e9es pour acc\u00e9l\u00e9rer le chargement des pages, entre autres la mise en cache des ressources et la compression des fichiers. L\u2019autre avantage de ces CDN, c\u2019est qu\u2019ils peuvent toujours rendre un <strong>site disponible malgr\u00e9 une panne de serveur<\/strong>. De plus, ils ont la capacit\u00e9 de rediriger une partie du trafic de votre site vers ses serveurs. Ce qui peut r\u00e9duire la charge sur le serveur principal et am\u00e9liorer ses performances.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mettre en cache les ressources<\/h4>\n\n\n\n<p>Le chargement des ressources comme les images et les fichiers CSS \u00e0 chaque visite d\u2019un utilisateur peut d\u00e9boucher sur un LCP plus long. En utilisant le cache du navigateur, vous conservez des copies locales de vos donn\u00e9es en vue de les charger plus rapidement lors des prochaines visites.<\/p>\n\n\n\n<p>Pour ce faire, nous vous recommandons de <strong>configurer les directives de mise en cache<\/strong>. Les en-t\u00eates de cache indiquent au navigateur combien de temps il peut stocker une copie de votre contenu en cache. Vous pouvez les d\u00e9finir pour diff\u00e9rentes ressources statiques.<\/p>\n\n\n\n<p>\u00c0 noter que l\u2019activation de la mise en cache du navigateur se fait manuellement ou \u00e0 l\u2019aide de <strong>plug-ins pour WordPress<\/strong> (WP Rocket, Cache Enabler, W3 Total Cache, WP Fastest Cache, etc.).<\/p>\n\n\n\n<p>Parmi les outils les plus utilis\u00e9s pour la mise en cache, on peut citer&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/varnish-cache.org\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Varnish Cache<\/strong><\/a>&nbsp;: serveur de mise en cache HTTP open source tr\u00e8s performant. Il peut \u00eatre param\u00e9tr\u00e9 en tant que proxy avant vos serveurs web pour mettre en cache le contenu.<\/li>\n\n\n\n<li><a href=\"https:\/\/redis.io\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Redis<\/strong><\/a>&nbsp;: base de donn\u00e9es cl\u00e9-valeur en m\u00e9moire utilisable pour la mise en cache des donn\u00e9es. Il est souvent utilis\u00e9 conjointement avec d\u2019autres serveurs pour acc\u00e9l\u00e9rer la distribution du contenu.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.nginx.com\/resources\/wiki\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Nginx<\/strong><\/a>&nbsp;: serveur web modifiable pour la mise en cache du contenu statique et dynamique \u00e0 l\u2019aide de directives de configuration telles que proxy_cache et fastcgi_cache.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Choisir une police web performante<\/h4>\n\n\n\n<p>L\u2019int\u00e9gration de plusieurs variantes de polices ou de polices personnalis\u00e9es peut g\u00eaner la vitesse de rendu du contenu principal de la page. Ce qui va plus ou moins affecter le Largest Contentful Paint, d\u2019o\u00f9 l\u2019importance de les optimiser.<\/p>\n\n\n\n<p>Le moyen le plus simple consiste \u00e0 <strong>h\u00e9berger les polices web localement<\/strong> ou \u00e0 <strong>utiliser un service de webfont<\/strong> comme <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Google Fonts<\/a> pour les charger de mani\u00e8re asynchrone. En parall\u00e8le, limitez le nombre de polices que vous utilisez sur votre page. Et surtout, n\u2019incluez pas de polices personnalis\u00e9es pour les petits \u00e9l\u00e9ments de texte qui pourraient \u00eatre rendus plus efficacement avec des polices syst\u00e8me g\u00e9n\u00e9riques.<\/p>\n\n\n\n<p>D\u2019autre part, pensez \u00e0 <strong>utiliser le CSS font-display<\/strong> pour charger les polices web en diff\u00e9r\u00e9. De cette fa\u00e7on, elles ne seront charg\u00e9es que lorsqu\u2019elles seront n\u00e9cessaires. Avec ces quelques conseils sur le choix de la police, vous avez la possibilit\u00e9 d\u2019am\u00e9liorer le score LCP de votre site.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Opter pour un fournisseur d\u2019h\u00e9bergement fiable<\/h4>\n\n\n\n<p>Un bon fournisseur d\u2019h\u00e9bergement web garantit des performances de serveur optimales, avec des temps de r\u00e9ponse rapides et une disponibilit\u00e9 \u00e9lev\u00e9e. En effet, ce type de prestataire investit dans une <strong>infrastructure robuste et \u00e9volutive<\/strong>, avec des serveurs bien configur\u00e9s, des r\u00e9seaux performants et des syst\u00e8mes de stockage efficaces. Cette infrastructure solide l\u2019aide \u00e0 minimiser les temps d\u2019arr\u00eat et les ralentissements, impactant directement le LCP.<\/p>\n\n\n\n<p>Il faut aussi savoir qu\u2019un fournisseur d\u2019h\u00e9bergement int\u00e8gre des <strong>strat\u00e9gies d\u2019optimisation de ressources<\/strong>, comme la mise en cache intelligente, la compression de fichiers et l\u2019utilisation de CDN. Ces techniques, comme nous l\u2019avons vu, favorisent l\u2019acc\u00e9l\u00e9ration du chargement des ressources statiques. De quoi r\u00e9duire efficacement le Largest Contentful Paint.<\/p>\n\n\n\n<p>Pour couronner le tout, un h\u00e9bergeur fiable dispose d\u2019un <strong>support technique r\u00e9actif et comp\u00e9tent<\/strong>. En cas de probl\u00e8mes de performance du serveur, d\u2019erreurs de configuration ou d\u2019autres probl\u00e8mes pouvant affecter le LCP, une \u00e9quipe qualifi\u00e9e saura apporter les solutions ad\u00e9quates dans les plus brefs d\u00e9lais.<\/p>\n\n\n\n<p>Afin de trouver le service d\u2019h\u00e9bergement qui vous convient le mieux, voici quelques bonnes pratiques&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Rechercher des avis clients<\/strong>. Les avis clients donnent un aper\u00e7u de ce que les autres utilisateurs pensent de la performance et de la cr\u00e9dibilit\u00e9 de l\u2019h\u00e9bergeur.<\/li>\n\n\n\n<li><strong>Comparer les fonctionnalit\u00e9s<\/strong>. Les fonctionnalit\u00e9s propos\u00e9es par les h\u00e9bergeurs ne se valent pas toutes. Celles-ci doivent pouvoir r\u00e9pondre \u00e0 vos besoins et bonifier le LCP de votre page.<\/li>\n\n\n\n<li><strong>Choisir un h\u00e9bergeur avec des serveurs dans plusieurs endroits<\/strong>. Cela r\u00e9duit la distance entre vos utilisateurs et vos serveurs.<\/li>\n\n\n\n<li><strong>Tenir compte du budget<\/strong>. Les prix des h\u00e9bergeurs web varient en fonction des fonctionnalit\u00e9s et des performances offertes.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Conseils pour maintenir un bon LCP lors des mises \u00e0 jour du site<\/h3>\n\n\n\n<p>Durant les mises \u00e0 jour du site, il est imp\u00e9ratif de conserver un bon LCP pour assurer une UX de qualit\u00e9 et retenir les visiteurs. Il est aussi question de maintenir le positionnement dans les r\u00e9sultats de recherche, une strat\u00e9gie incontournable pour la visibilit\u00e9 et le trafic organique du site.<\/p>\n\n\n\n<p>Pour ce faire, nous vous sugg\u00e9rons de&nbsp;:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Effectuer des tests de performance<\/strong>. Avant de d\u00e9ployer des mises \u00e0 jour sur votre site, r\u00e9alisez des tests pour \u00e9valuer l\u2019impact potentiel sur le Largest Contentful Paint. Utilisez des outils comme PageSpeed Insights ou WebPageTest pour mesurer les KPIs et identifier tout changement significatif dans le LCP.<\/li>\n\n\n\n<li><strong>Surveiller les changements de LCP apr\u00e8s les mises \u00e0 jour<\/strong>. Apr\u00e8s avoir effectu\u00e9 des mises \u00e0 jour sur votre site, suivez r\u00e9guli\u00e8rement les indicateurs de performance pour d\u00e9tecter tout changement. Vous pouvez utiliser des outils ou des services de suivi des performances pour rester inform\u00e9 des variations du LCP.<\/li>\n\n\n\n<li><strong>Proc\u00e9der \u00e0 des tests de charge<\/strong>. Si vos mises \u00e0 jour impliquent des changements majeurs dans l\u2019architecture du site ou l\u2019ajout de nouvelles fonctionnalit\u00e9s, passez des tests de charge en vue d\u2019\u00e9valuer les performances du site sous diff\u00e9rentes charges de trafic. Veillez \u00e0 ce que le Largest Contentful Paint reste stable m\u00eame lorsque le site est fortement sollicit\u00e9.<\/li>\n\n\n\n<li><strong>Corriger les probl\u00e8mes de performance<\/strong>. Si vous observez une d\u00e9t\u00e9rioration du LCP apr\u00e8s une mise \u00e0 jour, identifiez et corrigez les probl\u00e8mes rapidement. Cela peut inclure l\u2019optimisation des images, la r\u00e9duction du poids des ressources, la r\u00e9vision du code, etc.<\/li>\n<\/ul>\n\n\n\n<p>Enfin, n\u2019oubliez pas que la performance web est un <strong>processus continu<\/strong>. Votre engagement \u00e0 surveiller r\u00e9guli\u00e8rement les m\u00e9triques correspondantes et \u00e0 apporter des am\u00e9liorations constantes sera de mise pour maintenir un bon Largest Contentful Paint au fil du temps.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion&nbsp;: L\u2019importance d\u2019un LCP optimal pour le succ\u00e8s en ligne<\/h2>\n\n\n\n<p>En conclusion, un bon Largest Contentful Paint, pendant ou en dehors des mises \u00e0 jour du site, se r\u00e9v\u00e8le essentiel pour fournir une exp\u00e9rience utilisateur m\u00e9morable et renforcer l\u2019<a href=\"https:\/\/www.sortlist.fr\/blog\/image-de-marque\/\" target=\"_blank\" rel=\"noreferrer noopener\">image de marque<\/a>. Les tests de performance, la surveillance des KPIs et l\u2019engagement dans une am\u00e9lioration continue sont autant de pratiques que vous pouvez mettre en \u0153uvre pour un LCP optimis\u00e9.<\/p>\n\n\n\n<p>Quant \u00e0 son avenir et celui des tendances du web performance, on peut s\u2019attendre \u00e0 une accentuation de l\u2019importance accord\u00e9e aux algorithmes de recherche de plus en plus orient\u00e9s vers les m\u00e9triques de vitesse de chargement. Toute entreprise devra donc continuer \u00e0 investir dans l\u2019optimisation de leurs sites web pour rester comp\u00e9titive et r\u00e9pondre aux attentes croissantes des utilisateurs en mati\u00e8re de rapidit\u00e9 et de fluidit\u00e9 d\u2019exp\u00e9rience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Les Core web vitals regroupent un ensemble d\u2019indicateurs qui servent \u00e0 mesurer la qualit\u00e9 de l\u2019exp\u00e9rience utilisateur sur un site internet. Ils \u00e9voluent avec le temps et sont utilis\u00e9s par Google pour \u00e9valuer le r\u00e9f\u00e9rencement des pages web dans ses r\u00e9sultats de recherche. Parmi les m\u00e9triques qui les composent figure le Largest Contentful Paint ou [&hellip;]<\/p>\n","protected":false},"author":229,"featured_media":20475,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_sb_is_suggestion_mode":false,"_sb_show_suggestion_boards":false,"_sb_show_comment_boards":false,"_sb_suggestion_history":"","_sb_update_block_changes":"","content-type":"","om_disable_all_campaigns":false,"footnotes":""},"categories":[42],"class_list":["post-20433","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024<\/title>\n<meta name=\"description\" content=\"Le Largest Contentful Paint (LCP) \u00e9value la vitesse de chargement per\u00e7ue par les utilisateurs. D\u00e9couvrez comment l&#039;optimiser.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024\" \/>\n<meta property=\"og:description\" content=\"Le Largest Contentful Paint (LCP) \u00e9value la vitesse de chargement per\u00e7ue par les utilisateurs. D\u00e9couvrez comment l&#039;optimiser.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/\" \/>\n<meta property=\"og:site_name\" content=\"Sortlist Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-01T11:02:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-08-08T19:50:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/largest-contentful-paint.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1530\" \/>\n\t<meta property=\"og:image:height\" content=\"1085\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ny Antsa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ny Antsa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/\"},\"author\":{\"name\":\"Ny Antsa\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#\\\/schema\\\/person\\\/c9c61a361a31182377ebda57f8eb2ad6\"},\"headline\":\"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024\",\"datePublished\":\"2024-03-01T11:02:33+00:00\",\"dateModified\":\"2024-08-08T19:50:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/\"},\"wordCount\":4836,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2024\\\/02\\\/largest-contentful-paint.jpg\",\"articleSection\":[\"SEO\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/\",\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/\",\"name\":\"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2024\\\/02\\\/largest-contentful-paint.jpg\",\"datePublished\":\"2024-03-01T11:02:33+00:00\",\"dateModified\":\"2024-08-08T19:50:09+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#\\\/schema\\\/person\\\/c9c61a361a31182377ebda57f8eb2ad6\"},\"description\":\"Le Largest Contentful Paint (LCP) \u00e9value la vitesse de chargement per\u00e7ue par les utilisateurs. D\u00e9couvrez comment l'optimiser.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#primaryimage\",\"url\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2024\\\/02\\\/largest-contentful-paint.jpg\",\"contentUrl\":\"https:\\\/\\\/cdn.blog.production.sortlist.cloud\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2024\\\/02\\\/largest-contentful-paint.jpg\",\"width\":1530,\"height\":1085,\"caption\":\"Tout savoir sur le Largest Contentful Paint\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/largest-contentful-paint\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/\",\"name\":\"Sortlist Blog\",\"description\":\"Guides, e-books, interviews &amp; articles d\u2019experts pour vous lancer dans le marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/#\\\/schema\\\/person\\\/c9c61a361a31182377ebda57f8eb2ad6\",\"name\":\"Ny Antsa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/11\\\/avatar_user_229_1668587524-96x96.jpg\",\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/11\\\/avatar_user_229_1668587524-96x96.jpg\",\"contentUrl\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2022\\\/11\\\/avatar_user_229_1668587524-96x96.jpg\",\"caption\":\"Ny Antsa\"},\"url\":\"https:\\\/\\\/www.sortlist.fr\\\/blog\\\/author\\\/nyantsa\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024","description":"Le Largest Contentful Paint (LCP) \u00e9value la vitesse de chargement per\u00e7ue par les utilisateurs. D\u00e9couvrez comment l'optimiser.","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:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/","og_locale":"fr_FR","og_type":"article","og_title":"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024","og_description":"Le Largest Contentful Paint (LCP) \u00e9value la vitesse de chargement per\u00e7ue par les utilisateurs. D\u00e9couvrez comment l'optimiser.","og_url":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/","og_site_name":"Sortlist Blog","article_published_time":"2024-03-01T11:02:33+00:00","article_modified_time":"2024-08-08T19:50:09+00:00","og_image":[{"width":1530,"height":1085,"url":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/largest-contentful-paint.jpg","type":"image\/jpeg"}],"author":"Ny Antsa","twitter_card":"summary_large_image","twitter_misc":{"\u00c9crit par":"Ny Antsa","Dur\u00e9e de lecture estim\u00e9e":"24 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#article","isPartOf":{"@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/"},"author":{"name":"Ny Antsa","@id":"https:\/\/www.sortlist.fr\/blog\/#\/schema\/person\/c9c61a361a31182377ebda57f8eb2ad6"},"headline":"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024","datePublished":"2024-03-01T11:02:33+00:00","dateModified":"2024-08-08T19:50:09+00:00","mainEntityOfPage":{"@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/"},"wordCount":4836,"commentCount":0,"image":{"@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/largest-contentful-paint.jpg","articleSection":["SEO"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/","url":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/","name":"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024","isPartOf":{"@id":"https:\/\/www.sortlist.fr\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#primaryimage"},"image":{"@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/largest-contentful-paint.jpg","datePublished":"2024-03-01T11:02:33+00:00","dateModified":"2024-08-08T19:50:09+00:00","author":{"@id":"https:\/\/www.sortlist.fr\/blog\/#\/schema\/person\/c9c61a361a31182377ebda57f8eb2ad6"},"description":"Le Largest Contentful Paint (LCP) \u00e9value la vitesse de chargement per\u00e7ue par les utilisateurs. D\u00e9couvrez comment l'optimiser.","breadcrumb":{"@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#primaryimage","url":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/largest-contentful-paint.jpg","contentUrl":"https:\/\/cdn.blog.production.sortlist.cloud\/wp-content\/uploads\/sites\/3\/2024\/02\/largest-contentful-paint.jpg","width":1530,"height":1085,"caption":"Tout savoir sur le Largest Contentful Paint"},{"@type":"BreadcrumbList","@id":"https:\/\/www.sortlist.fr\/blog\/largest-contentful-paint\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.sortlist.fr\/blog\/"},{"@type":"ListItem","position":2,"name":"Largest Contentful Paint (LCP)\u00a0: Tout ce qu\u2019il faut savoir en 2024"}]},{"@type":"WebSite","@id":"https:\/\/www.sortlist.fr\/blog\/#website","url":"https:\/\/www.sortlist.fr\/blog\/","name":"Sortlist Blog","description":"Guides, e-books, interviews &amp; articles d\u2019experts pour vous lancer dans le marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.sortlist.fr\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Person","@id":"https:\/\/www.sortlist.fr\/blog\/#\/schema\/person\/c9c61a361a31182377ebda57f8eb2ad6","name":"Ny Antsa","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/11\/avatar_user_229_1668587524-96x96.jpg","url":"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/11\/avatar_user_229_1668587524-96x96.jpg","contentUrl":"https:\/\/www.sortlist.fr\/blog\/wp-content\/uploads\/sites\/3\/2022\/11\/avatar_user_229_1668587524-96x96.jpg","caption":"Ny Antsa"},"url":"https:\/\/www.sortlist.fr\/blog\/author\/nyantsa\/"}]}},"_links":{"self":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts\/20433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/users\/229"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/comments?post=20433"}],"version-history":[{"count":31,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts\/20433\/revisions"}],"predecessor-version":[{"id":21849,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/posts\/20433\/revisions\/21849"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/media\/20475"}],"wp:attachment":[{"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/media?parent=20433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sortlist.fr\/blog\/wp-json\/wp\/v2\/categories?post=20433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}