{"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\/en\/dev\/optimize-largest-contentful-paint\/","title":{"rendered":"Optimize Largest Contentful Paint"},"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\">Contents<\/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=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Slow-server-response-times\" >Slow server response times<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Optimize-your-server\" >Optimize your server<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Route-users-to-a-nearby-CDN\" >Route users to a nearby CDN<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Cache-assets\" >Cache assets<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Serve-HTML-pages-cache-first\" >Serve HTML pages cache-first<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Establish-third-party-connections-early\" >Establish third-party connections early<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Render-blocking-JavaScript-and-CSS\" >Render blocking JavaScript and 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\/en\/dev\/optimize-largest-contentful-paint\/#Reduce-CSS-blocking-time\" >Reduce CSS blocking time<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Minify-CSS\" >Minify 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\/en\/dev\/optimize-largest-contentful-paint\/#Defer-non-critical-CSS\" >Defer non-critical CSS<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Inline-critical-CSS\" >Inline critical CSS<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Reduce-JavaScript-blocking-time\" >Reduce JavaScript blocking time<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Slow-resource-load-times\" >Slow resource load times<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Optimize-and-compress-images\" >Optimize and compress 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\/en\/dev\/optimize-largest-contentful-paint\/#Preload-important-resources\" >Preload important resources<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Compress-text-files\" >Compress text files<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Adaptive-serving\" >Adaptive serving<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Cache-assets-using-a-service-worker\" >Cache assets using a 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\/en\/dev\/optimize-largest-contentful-paint\/#Client-side-rendering\" >Client-side rendering<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Minimize-critical-JavaScript\" >Minimize critical JavaScript<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Use-server-side-rendering\" >Use server-side rendering<\/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\/en\/dev\/optimize-largest-contentful-paint\/#Use-pre-rendering\" >Use pre-rendering<\/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          How to render your main content faster.\n        <\/p>\n<p>\n          <time>May 5, 2020<\/time><br \/>\n            Updated <time>Aug 20, 2020<\/time>\n        <\/p>\n<\/header>\n<p>\n  <iframe loading=\"lazy\" title=\"Optimize for 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    I can&#039;t see any useful content! Why does it take so long to load? \ud83d\ude16\n  <\/p>\n<\/blockquote>\n<p>One factor contributing to a poor user experience is how long it takes a user to see any content<br \/>\nrendered to the screen. First Contentful Paint (FCP) measures how long it<br \/>\ntakes for initial DOM content to render, but it does not capture how long it took the largest<br \/>\n(usually more meaningful) content on the page to render.<\/p>\n<p>Largest Contentful Paint (LCP) is a Core Web<br \/>\nVitals metric and measures when the largest content element in the<br \/>\nviewport becomes visible. It can be used to determine when the main content of the page has finished<br \/>\nrendering on the screen.<\/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=\"Good LCP values are 2.5 seconds, poor values are greater than 4.0 seconds and anything in between needs improvement\"><br \/>\n<\/source><\/picture>\n<p>The most common causes of a poor LCP are:<\/p>\n<h2 id=\"slow-servers\"><span class=\"ez-toc-section\" id=\"Slow-server-response-times\"><\/span>Slow server response times <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The longer it takes a browser to receive content from the server, the longer it takes to render<br \/>\nanything on the screen. A faster server response time directly improves every single page-load<br \/>\nmetric, including LCP.<\/p>\n<p>Before anything else, improve how and where your server handles your content. Use <strong>Time to First<br \/>\nByte<\/strong> (TTFB) to measure your server response times. You can<br \/>\nimprove your TTFB in a number of different ways:<\/p>\n<ul>\n<li>Optimize your server<\/li>\n<li>Route users to a nearby CDN<\/li>\n<li>Cache assets<\/li>\n<li>Serve HTML pages cache-first<\/li>\n<li>Establish third-party connections early<\/li>\n<\/ul>\n<h3 id=\"optimize-your-server\"><span class=\"ez-toc-section\" id=\"Optimize-your-server\"><\/span>Optimize your server <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Are you running expensive queries that take your server a significant amount of time to complete? Or<br \/>\nare there other complex operations happening server-side that delay the process to return page<br \/>\ncontent? Analyzing and improving the efficiency of your server-side code will directly improve the<br \/>\ntime it takes for the browser to receive the data.<\/p>\n<p>Instead of just immediately serving a static page on a browser request, many server-side web<br \/>\nframeworks need to create the web page dynamically. In other words, rather than just sending a<br \/>\ncomplete HTML file that&#039;s already ready when the browser requests it, the frameworks need to run<br \/>\nlogic to construct the page. This could be due to pending results from a database query or even<br \/>\nbecause components need to be generated into markup by a UI framework (such as<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/react-dom-server.html\">React<\/a>). Many web frameworks that run on the server<br \/>\nhave performance guidance that you can use to speed up this process.<\/p>\n<h3 id=\"route-users-to-a-nearby-cdn\"><span class=\"ez-toc-section\" id=\"Route-users-to-a-nearby-CDN\"><\/span>Route users to a nearby CDN <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A Content Delivery Network (CDN) is a network of servers distributed in many different locations. If<br \/>\nthe content on your web page is being hosted on a single server, your website will load slower for<br \/>\nusers that are geographically farther away because their browser requests literally have to travel<br \/>\naround the world. Consider using a CDN to ensure that your users never have to wait for network<br \/>\nrequests to faraway servers.<\/p>\n<h3 id=\"cache-assets\"><span class=\"ez-toc-section\" id=\"Cache-assets\"><\/span>Cache assets <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If your HTML is static and doesn&#039;t need to change on every request, caching can prevent it from<br \/>\nbeing recreated unnecessarily. By storing a copy of the generated HTML on disk, server-side caching<br \/>\ncan reduce TTFB and minimize resource usage.<\/p>\n<p>Depending on your toolchain, there are many different ways to apply server caching:<\/p>\n<ul>\n<li>Configure reverse proxies (<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/varnish-cache.org\/\">Varnish<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.nginx.com\/\">nginx<\/a>) to serve cached content or act as a cache server when<br \/>\ninstalled in front of an application server<\/li>\n<li>Configure and manage your cloud provider&#039;s<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\">Azure<\/a>) cache behavior<\/li>\n<li>Use a CDN that provides edge servers so that your content is cached and stored closer to<br \/>\nyour users<\/li>\n<\/ul>\n<h3 id=\"serve-html-pages-cache-first\"><span class=\"ez-toc-section\" id=\"Serve-HTML-pages-cache-first\"><\/span>Serve HTML pages cache-first <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When installed, a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Service_Worker_API\">service<br \/>\nworker<\/a> runs in the browser<br \/>\nbackground and can intercept requests from the server. This level of programmatic cache control<br \/>\nmakes it possible to cache some or all of the HTML page&#039;s content and only update the cache when the<br \/>\ncontent has changed.<\/p>\n<p>The following chart shows how LCP distributions have been reduced on a site using this pattern:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-sw-caching-5521599' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-sw-caching-5521599.png'><figcaption class=\"w-figcaption\">Largest Contentful Paint distribution, for page loads with and without a service worker - <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>The chart shows the distribution for LCP from a single site over the last 28 days, segmented by<br \/>\nservice worker state. Notice how far more page loads have a faster LCP value after cache-first HTML<br \/>\npage serving was introduced in the service worker (blue portion of chart).<\/p>\n<h3 id=\"establish-third-party-connections-early\"><span class=\"ez-toc-section\" id=\"Establish-third-party-connections-early\"><\/span>Establish third-party connections early <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Server requests to third-party origins can also impact LCP, especially if they&#039;re needed to display<br \/>\ncritical content on the page. Use <code>rel = &quot;preconnect&quot;<\/code> to inform the browser that your page intends to<br \/>\nestablish a connection as soon as 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>link<\/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>preconnect<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>You can also use <code>dns-prefetch<\/code>  to resolve DNS lookups faster.<\/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>link<\/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>Although both hints work differently, consider using <code>dns-prefetch<\/code> as a fallback for browsers that<br \/>\ndo not support <code>preconnect<\/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>head<\/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>link<\/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>preconnect<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>link<\/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>head<\/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>Render blocking JavaScript and CSS <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Before a browser can render any content, it needs to parse HTML markup into a DOM tree. The HTML<br \/>\nparser will pause if it encounters any external stylesheets (<code><\/code>) or synchronous<br \/>\nJavaScript tags (<code><\/code>).<\/p>\n<p>Scripts and stylesheets are both render blocking resources which delay FCP, and consequently LCP.<br \/>\nDefer any non-critical JavaScript and CSS to speed up loading of the main content of your web page.<\/p>\n<h3 id=\"reduce-css-blocking-time\"><span class=\"ez-toc-section\" id=\"Reduce-CSS-blocking-time\"><\/span>Reduce CSS blocking time <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ensure that only the minimal amount of necessary CSS is blocking render on your site with the<br \/>\nfollowing:<\/p>\n<ul>\n<li>Minify CSS<\/li>\n<li>Defer non-critical CSS<\/li>\n<li>Inline critical CSS<\/li>\n<\/ul>\n<h3 id=\"minify-css\"><span class=\"ez-toc-section\" id=\"Minify-CSS\"><\/span>Minify CSS <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For easier legibility, CSS files can contain characters such as spacing, indentation, or comments.<br \/>\nThese characters are all unnecessary for the browser, and minifying these files will ensure that<br \/>\nthey get removed. Ultimately, reducing the amount of blocking CSS will always improve the time it<br \/>\ntakes to fully render the main content of the page (LCP).<\/p>\n<p>If you use a module bundler or build tool, include an appropriate plugin to minify CSS files on<br \/>\nevery 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\">Example of LCP improvement: Before and after minifying CSS<\/figcaption><\/figure>\n<h3 id=\"defer-non-critical-css\"><span class=\"ez-toc-section\" id=\"Defer-non-critical-CSS\"><\/span>Defer non-critical CSS <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Use the <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/coverage\">Coverage<\/a> tab in Chrome<br \/>\nDevTools to find any unused CSS on your web page.<\/p>\n<p><img alt='coverage-panel-css-4830925' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/coverage-panel-css-4830925.png'><\/p>\n<p>To optimize:<\/p>\n<ul>\n<li>\n<p>Remove any unused CSS entirely or move it to another stylesheet if used on a separate<br \/>\npage of your site.<\/p>\n<\/li>\n<li>\n<p>For any CSS not needed for initial rendering, use<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/filamentgroup\/loadCSS\/blob\/master\/README.md\">loadCSS<\/a> to load files<br \/>\nasynchronously, which leverages <code>rel = &quot;preload&quot;<\/code>and <code>onload<\/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>link<\/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>preload<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\">ace<\/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\">onload<\/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-defer-css-8932491' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-defer-css-8932491.png'><figcaption class=\"w-figcaption\">Example of LCP improvement: Before and after deferring non-critical CSS<\/figcaption><\/figure>\n<h3 id=\"inline-critical-css\"><span class=\"ez-toc-section\" id=\"Inline-critical-CSS\"><\/span>Inline critical CSS <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Inline any critical-path CSS used for above-the-fold content by including it directly in <code>.<\/code><\/p>\n<figure class=\"w-figure\">\n  <img alt='critical-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\">Critical CSS inlined<\/figcaption><\/figure>\n<p>Inlining important styles eliminates the need to make a round-trip request to fetch critical CSS.<br \/>\nDeferring the rest minimizes CSS blocking time.<\/p>\n<p>If you cannot manually add inline styles to your site, use a library to automate the process. Some<br \/>\nexamples:<\/p>\n<figure class=\"w-figure\">\n  <img alt='lcp-critical-css-4439024' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lcp-critical-css-4439024.png'><figcaption class=\"w-figcaption\">Example of LCP improvement: Before and after inlining critical CSS<\/figcaption><\/figure>\n<h3 id=\"reduce-javascript-blocking-time\"><span class=\"ez-toc-section\" id=\"Reduce-JavaScript-blocking-time\"><\/span>Reduce JavaScript blocking time <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Download and serve the minimal amount of necessary JavaScript to users. Reducing the amount of<br \/>\nblocking JavaScript results in a faster render, and consequently a better LCP.<\/p>\n<p>This can be accomplished by optimizing your scripts in a few different ways:<\/p>\n<h2 id=\"slow-resource-load-times\"><span class=\"ez-toc-section\" id=\"Slow-resource-load-times\"><\/span>Slow resource load times <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Although an increase in CSS or JavaScript blocking time will directly result in worse performance,<br \/>\nthe time it takes to load many other types of resources can also affect paint times. The types of<br \/>\nelements that affect LCP are:<\/p>\n<ul>\n<li><code>&lt;img&gt;<\/code> elements<\/li>\n<li><code><\/code> elements inside an <code><\/code> element<\/li>\n<li><code><video><\/code> elements (if specified, the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/video#attr-poster\">poster<\/a> image is<br \/>\nused to measure LCP)<\/li>\n<li>An element with a background image loaded via the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/url()\"><code>url ()<\/code><\/a> function (as opposed to a CSS<br \/>\ngradient)<\/li>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Block-level_elements\">Block-level<\/a> elements<br \/>\ncontaining text nodes or other inline-level text elements<\/li>\n<\/ul>\n<p>The time it takes to load these elements if rendered above-the-fold will have a direct effect on<br \/>\nLCP. There are a few ways to ensure these files are loaded as fast as possible:<\/p>\n<ul>\n<li>Optimize and compress images<\/li>\n<li>Preload important resources<\/li>\n<li>Compress text files<\/li>\n<li>Deliver different assets based on network connection (adaptive serving)<\/li>\n<li>Cache assets using a service worker<\/li>\n<\/ul>\n<h3 id=\"optimize-and-compress-images\"><span class=\"ez-toc-section\" id=\"Optimize-and-compress-images\"><\/span>Optimize and compress images <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>For many sites, images are the largest element in view when the page has finished loading. Hero<br \/>\nimages, large carousels or banner images are all common examples of this.<\/p>\n<figure class=\"w-figure\">\n  <img alt='image-largest-element-1207643' width=\"300\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/image-largest-element-1207643.png'><figcaption>Image as the largest page element: <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/design.google\/\">design.google<\/a><\/figcaption><\/figure>\n<p>Improving how long it takes to load and render these types of images will directly speed up LCP. To<br \/>\ndo this:<\/p>\n<ul>\n<li>Consider not using an image in the first place. If it&#039;s not relevant to the content,<br \/>\nremove it.<\/li>\n<li>Compress images (with Imagemin for example)<\/li>\n<li>Convert images into newer formats (JPEG 2000, JPEG XR, or WebP)<\/li>\n<li>Use responsive images<\/li>\n<li>Consider using an image CDN<\/li>\n<\/ul>\n<div class=\"w-aside w-aside--note\">\n<p>Take a look at Optimize your<br \/>\nimages for guides and resources that explain all of these techniques in detail.<\/p>\n<\/div>\n<h3 id=\"preload-important-resources\"><span class=\"ez-toc-section\" id=\"Preload-important-resources\"><\/span>Preload important resources <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>At times, important resources that are declared or used in a certain CSS or JavaScript file may be<br \/>\nfetched later than you would like, such as a font tucked deep in one of the many CSS files of an<br \/>\napplication.<\/p>\n<p>If you know that a particular resource should be prioritized, use <code><\/code> to fetch it<br \/>\nsooner. <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\">Many types of<br \/>\nresources<\/a><br \/>\ncan be preloaded, but you should first focus on preloading critical<br \/>\nassets, such as fonts, above-the-fold images or videos,<br \/>\nand critical-path CSS or JavaScript.<\/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>link<\/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>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>script<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>link<\/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>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/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>link<\/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>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/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>link<\/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>preload<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">ace<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>video<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\">type<\/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>link<\/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>preload<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\">ace<\/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\">type<\/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>Since Chrome 73, preloading can be used along with responsive images to combine both<br \/>\npatterns for much faster image loading.<\/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>link<\/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>preload<span class=\"token punctuation\">\"<\/span><\/span><br><span class=\"token attr-name\">ace<\/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\">imagesizes<\/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>Compress text files <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Compression algorithms, like<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> and<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/opensource.googleblog.com\/2015\/09\/introducing-brotli-new-compression.html\">Brotli<\/a>, can<br \/>\nsignificantly reduce the size of text files (HTML, CSS, JavaScript) as they&#039;re transferred between<br \/>\nthe server and browser. Gzip is effectively supported in all browsers and Brotli, which provides<br \/>\neven better compression results, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/caniuse.com\/#feat=brotli\">can be used in almost all newer<br \/>\nbrowsers<\/a>.<\/p>\n<p>Compressing your resources will minimize their delivery size, improving load times and consequently<br \/>\nLCP.<\/p>\n<ol>\n<li>First, check if your server already compresses files automatically. Most hosting<br \/>\nplatforms, CDNs, and reverse proxy servers either encode assets with compression by default or<br \/>\nallow you to easily configure them.<\/li>\n<li>If you need to modify your server to compress files, consider using Brotli instead of gzip<br \/>\nsince it can provide better compression ratios.<\/li>\n<li>Once you pick a compression algorithm to use, compress assets ahead of time during the build<br \/>\nprocess instead of on-the-fly as they are requested by the browser. This minimizes server<br \/>\noverhead and prevents delays when requests are made, especially when using high compression ratios.<\/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\">Example of LCP improvement: Before and after Brotli compression <\/figcaption><\/figure>\n<h3 id=\"adaptive-serving\"><span class=\"ez-toc-section\" id=\"Adaptive-serving\"><\/span>Adaptive serving <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>When loading resources that make up the main content of a page, it can be effective to conditionally<br \/>\nfetch different assets depending on the user&#039;s device or network conditions. This can be done using<br \/>\nthe <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/wicg.github.io\/netinfo\/\">Network Information<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/device-memory\/\">Device<br \/>\nMemory<\/a>, and<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/workers.html#navigator.hardwareconcurrency\">HardwareConcurrency<\/a><br \/>\nAPIs.<\/p>\n<p>If you have large assets that are critical for initial rendering, you can use different variations<br \/>\nof the same resource depending on the user&#039;s connection or device. For example, you can display an<br \/>\nimage instead of a video for any connection speeds lower than 4G:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>navigator<span class=\"token punctuation\">.<\/span>connection <span class=\"token operator\">&amp;&amp;<\/span> navigator<span class=\"token punctuation\">.<\/span>connection<span class=\"token punctuation\">.<\/span>effectiveType<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span>navigator<span class=\"token punctuation\">.<\/span>connection<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>A list of useful properties that you can use:<\/p>\n<ul>\n<li><code>navigator.connection.effectiveType<\/code>: Effective connection type<\/li>\n<li><code>navigator.connection.saveData<\/code>: Data-saver enabled \/ disabled<\/li>\n<li><code>navigator.hardwareConcurrency<\/code>: CPU core count<\/li>\n<li><code>navigator.deviceMemory<\/code>: Device Memory<\/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>Cache assets using a service worker <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Service workers can be used for many useful tasks, including serving smaller HTML responses as<br \/>\nmentioned earlier in this article. They can also be used to cache any static resource which can be<br \/>\nserved to the browser instead of from the network on repeat requests.<\/p>\n<p>Precaching critical resources using a service worker can reduce their load times significantly,<br \/>\nespecially for users who reload the web page with a weaker connection (or even access it offline).<br \/>\nLibraries like <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/workbox\/\">Workbox<\/a> can make the process of<br \/>\nupdating precached assets easier than writing a custom service worker to handle this yourself.<\/p>\n<h2 id=\"client-side-rendering\"><span class=\"ez-toc-section\" id=\"Client-side-rendering\"><\/span>Client-side rendering <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Many sites use client-side JavaScript logic to render pages directly in the browser. Frameworks and<br \/>\nlibraries, like <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/reactjs.org\/\">React<\/a>, <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/angular.io\/\">Angular<\/a>, and<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/vuejs.org\/\">Vue<\/a>, have made it easier to build single-page applications that handle<br \/>\ndifferent facets of a web page entirely on the client rather on the server.<\/p>\n<p>If you&#039;re building a site that is mostly rendered on the client, you should be wary of the effect it<br \/>\ncan have on LCP if a large JavaScript bundle is used. If optimizations aren&#039;t in place to prevent<br \/>\nit, users may not see or interact with any content on the page until all the critical JavaScript has<br \/>\nfinished downloading and executing.<\/p>\n<p>When building a client-side rendered site, consider the following optimizations:<\/p>\n<ul>\n<li>Minimize critical JavaScript<\/li>\n<li>Use server-side rendering<\/li>\n<li>Use pre-rendering<\/li>\n<\/ul>\n<h3 id=\"minimize-critical-javascript\"><span class=\"ez-toc-section\" id=\"Minimize-critical-JavaScript\"><\/span>Minimize critical JavaScript <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>If content on your site only becomes visible, or can be interacted with, after a certain amount of<br \/>\nJavaScript is downloaded: it becomes even more important to cut down on the size of your bundle as<br \/>\nmuch as possible. This can be done by:<\/p>\n<ul>\n<li>Minifying JavaScript<\/li>\n<li>Deferring unused JavaScript<\/li>\n<li>Minimizing unused polyfills<\/li>\n<\/ul>\n<p>Go back to the Reduce JavaScript blocking time section to read more about<br \/>\nthese optimizations.<\/p>\n<h3 id=\"use-server-side-rendering\"><span class=\"ez-toc-section\" id=\"Use-server-side-rendering\"><\/span>Use server-side rendering <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Minimizing the amount of JavaScript should always be the first thing to focus on for sites that are<br \/>\nmostly client-rendered. However, you should also consider combining a server rendering experience to<br \/>\nimprove LCP as much as possible.<\/p>\n<p>This concept works by using the server to render the application into HTML, where the client then<br \/>\n\u00ab<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.gatsbyjs.org\/docs\/react-hydration\/\">hydrates<\/a>\u00bbAll the JavaScript and required data<br \/>\nonto the same DOM content. This can improve LCP by ensuring the main content of the page is first<br \/>\nrendered on the server rather than only on the client, but there are a few drawbacks:<\/p>\n<ul>\n<li>Maintaining the same JavaScript-rendered application on the server and the client can<br \/>\nincrease complexity.<\/li>\n<li>Executing JavaScript to render an HTML file on the server will always increase server<br \/>\nresponse times (TTFB) as compared to just serving static pages from the server.<\/li>\n<li>A server-rendered page may look like it can be interacted with, but it can&#039;t respond to any<br \/>\nuser input until all the client-side JavaScript has executed. In short, it can make <strong>Time to<br \/>\nInteractive<\/strong> (TTI) worse.<\/li>\n<\/ul>\n<h3 id=\"use-pre-rendering\"><span class=\"ez-toc-section\" id=\"Use-pre-rendering\"><\/span>Use pre-rendering <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pre-rendering is a separate technique that is less complex than server-side rendering and also<br \/>\nprovides a way to improve LCP in your application. A headless browser, which is a browser without a<br \/>\nuser interface, is used to generate static HTML files of every route during build time. These files<br \/>\ncan then be shipped along with the JavaScript bundles that are needed for the application.<\/p>\n<p>With pre-rendering, TTI is still negatively impacted but server response times aren&#039;t as affected as<br \/>\nthey would be with a server-side rendering solution that dynamically renders each page only after<br \/>\nit&#039;s requested.<\/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\">Example of LCP improvement: Before and after pre-rendering<\/figcaption><\/figure>\n<div class=\"w-aside w-aside--note\">\n<p>For a deeper dive into different server-rendering architectures, take a look at <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2019\/02\/rendering-on-the-web\">Rendering on the<br \/>\nWeb<\/a>.<\/p>\n<\/div>\n<p>A number of tools are available to measure and debug LCP:<\/p>\n<ul>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Lighthouse 6.0<\/a> includes support for<br \/>\nmeasuring LCP in a lab setting.<\/p>\n<p><img alt='lighthouse-2324548' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/10\/lighthouse-2324548.jpg'><\/p>\n<\/li>\n<li>\n<p>The <strong>Timings<\/strong> section of the<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/evaluate-performance\">Performance<\/a><br \/>\npanel in Chrome DevTools includes a LCP marker and shows you which element is associated with<br \/>\nLCP when you hover over the <strong>Related Node<\/strong> field.<\/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\">Chrome User Experience Report<\/a><br \/>\nprovides real-world LCP values aggregated at the origin-level<\/p>\n<\/li>\n<\/ul>\n<p><em>With thanks to Philip Walton, Katie Hempenius, Kayce Basques, and Ilya Grigorik for their reviews.<\/em><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>How to render your main content faster. May 5, 2020 Updated Aug 20, 2020 I can&#8217;t see any useful content! Why does it take so long to load? \ud83d\ude16 One&#8230;<\/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\/en\/dev\/optimisez-la-plus-grande-peinture-riche\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\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\/en\/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\":\"en-US\"},{\"@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\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/fr\\\/dev\\\/optimisez-la-plus-grande-peinture-riche\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@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\/en\/dev\/optimisez-la-plus-grande-peinture-riche\/","og_locale":"en_US","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\/en\/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":"en-US"},{"@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":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/fr\/dev\/optimisez-la-plus-grande-peinture-riche\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@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 Digital Marketing","description":"SEO Agency | Advertising social networks | 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":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@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\/en\/wp-json\/wp\/v2\/posts\/92904","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=92904"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/92904\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/92905"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=92904"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=92904"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=92904"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}