{"id":2231,"date":"2023-06-15T02:06:20","date_gmt":"2023-06-15T02:06:20","guid":{"rendered":"https:\/\/ewebtoolz.com\/blog\/largest-contentful-paint-lcp-defined-measured-how-to-fix\/"},"modified":"2023-06-15T02:06:20","modified_gmt":"2023-06-15T02:06:20","slug":"largest-contentful-paint-lcp-defined-measured-how-to-fix","status":"publish","type":"post","link":"https:\/\/ewebtoolz.com\/blog\/largest-contentful-paint-lcp-defined-measured-how-to-fix\/","title":{"rendered":"Largest Contentful Paint (LCP) \u2013 Defined, Measured, &#038; How to Fix"},"content":{"rendered":"<p> <br \/>\n<\/p>\n<div id=\"\">\n<p>Largest Contentful Paint (LCP) is the amount of time it takes to load the single largest visible element in the viewport. It represents the website being visually loaded and is one of the three Core Web Vitals (CWV) metrics Google uses to measure page experience.<\/p>\n<p>The first impression users have of your site is how fast it appears to be loaded.<\/p>\n<p>The largest element is usually going to be a featured image or maybe the &lt;h1&gt; tag. But it could also be any of\u00a0these:<\/p>\n<ul>\n<li>&lt;img&gt; element<\/li>\n<li>&lt;image&gt; element inside an &lt;svg&gt; element<\/li>\n<li>Image inside a &lt;video&gt; element<\/li>\n<li>Background image loaded with the url() function<\/li>\n<li>Blocks of\u00a0text<\/li>\n<\/ul>\n<p>&lt;svg&gt; and &lt;video&gt; may be added in the future.<\/p>\n<p>Anything outside the viewport or any overflow is not considered when figuring out the size. If an image occupies the entire viewport, it\u2019s not considered for\u00a0LCP.<\/p>\n<p>Let\u2019s look at how fast your LCP should be and how to improve it.<\/p>\n<div class=\"post-nav-link clearfix\" id=\"section1\"><a class=\"subhead-anchor\" data-tip=\"tooltip__copielink\" rel=\"#section1\"><svg width=\"19\" height=\"19\" viewbox=\"0 0 14 14\" style=\"\"><g fill=\"none\" fill-rule=\"evenodd\"><path d=\"M0 0h14v14H0z\"\/><path d=\"M7.45 9.887l-1.62 1.621c-.92.92-2.418.92-3.338 0a2.364 2.364 0 0 1 0-3.339l1.62-1.62-1.273-1.272-1.62 1.62a4.161 4.161 0 1 0 5.885 5.884l1.62-1.62L7.45 9.886zM5.527 5.135L7.17 3.492c.92-.92 2.418-.92 3.339 0 .92.92.92 2.418 0 3.339L8.866 8.473l1.272 1.273 1.644-1.643A4.161 4.161 0 1 0 5.897 2.22L4.254 3.863l1.272 1.272zm-.66 3.998a.749.749 0 0 1 0-1.06l2.208-2.206a.749.749 0 1 1 1.06 1.06L5.928 9.133a.75.75 0 0 1-1.061 0z\" style=\"\"\/><\/g><\/svg><\/a><\/p>\n<p><h2 class=\"wp-block-heading\">What\u2019s a good LCP\u00a0value?<\/h2>\n<\/p>\n<\/div>\n<p>A good LCP value is less than 2.5 seconds and should be based on Chrome User Experience Report (CrUX) data. This is data from actual users of Chrome who are on your site and have opted in to sharing this information. You need 75% of page visits to load in 2.5 seconds or\u00a0less.<\/p>\n<p>Your page may be classified into one of the following buckets:<\/p>\n<ul>\n<li>Good: &lt;=2.5s<\/li>\n<li>Needs improvement: &gt;2.5s and &lt;=4s<\/li>\n<li>Poor: &gt;4s<\/li>\n<\/ul>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1634\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png\" alt=\"LCP thresholds for good, needs improvement, and poor\" class=\"wp-image-161247\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-416x425.png 416w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-768x784.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-1504x1536.png 1504w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1634\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png\" alt=\"LCP thresholds for good, needs improvement, and poor\" class=\"lazyload wp-image-161247\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-416x425.png 416w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-768x784.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-1504x1536.png 1504w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><figcaption class=\"wp-element-caption\"><\/figcaption><\/figure>\n<h3 class=\"wp-block-heading\">LCP data\u00a0<\/h3>\n<p>57.1% of sites are in the good LCP bucket as of April 2023. This is averaged across the site. As we mentioned, you need 75% of page visits to load in 2.5 seconds or less to show as \u201cgood\u201d here.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1540\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023.png\" alt=\"Percentage of good LCP values from CrUX CWV data (April 2023)\" class=\"wp-image-161249\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-442x425.png 442w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-768x739.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-1536x1478.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1540\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023.png\" alt=\"Percentage of good LCP values from CrUX CWV data (April 2023)\" class=\"lazyload wp-image-161249\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-442x425.png 442w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-768x739.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-april-2023-1536x1478.png 1536w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<p>LCP is the Core Web Vital that people are struggling the most to improve.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1523\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values.png\" alt=\"Percentage of good LCP values from CrUX CWV data (November 2019 to April 2023)&#10;\" class=\"wp-image-161250\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-446x425.png 446w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-768x731.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-1536x1462.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1523\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values.png\" alt=\"Percentage of good LCP values from CrUX CWV data (November 2019 to April 2023)&#10;\" class=\"lazyload wp-image-161250\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-446x425.png 446w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-768x731.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/percent-good-lcp-values-1536x1462.png 1536w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<p>When we ran a <a href=\"https:\/\/ahrefs.com\/blog\/core-web-vitals-study\/\">study on Core Web Vitals<\/a>, we saw that pages are less likely to have good LCP values on mobile devices compared to desktop.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"2760\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device.png\" alt=\"LCP by device\" class=\"wp-image-161251\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-246x425.png 246w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-768x1325.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-890x1536.png 890w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-1187x2048.png 1187w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"2760\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device.png\" alt=\"LCP by device\" class=\"lazyload wp-image-161251\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-246x425.png 246w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-768x1325.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-890x1536.png 890w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-by-device-1187x2048.png 1187w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<p>The LCP threshold seems almost impossible to pass on slower connections.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1404\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type.png\" alt=\"Breakdown of LCP by connection type\" class=\"wp-image-161252\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-484x425.png 484w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-768x674.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-1536x1348.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1404\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type.png\" alt=\"Breakdown of LCP by connection type\" class=\"lazyload wp-image-161252\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-484x425.png 484w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-768x674.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/lcp-connection-type-1536x1348.png 1536w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<p>There are a couple of different ways of measuring LCP you\u2019ll want to look at: field data and lab\u00a0data.\u00a0<\/p>\n<p>Field data comes from the <a href=\"https:\/\/developer.chrome.com\/docs\/crux\/\">Chrome User Experience Report (CrUX)<\/a>, which is data from real users of Chrome who choose to share their data. This gives you the best idea of real-world LCP performance across different network conditions, devices, caching, etc. It\u2019s also what you\u2019ll actually be measured on by Google for Core Web Vitals.\u00a0<\/p>\n<p>Lab data is based on tests with the same conditions to make tests repeatable. Google doesn\u2019t use this for Core Web Vitals, but it\u2019s useful for testing because CrUX\/field data is a 28-day rolling average, so it takes a while to see the impact of changes.<\/p>\n<p>The best tool to measure LCP depends on the type of data you want (lab\/field) and whether you want it for one URL or\u00a0many.<\/p>\n<h3 class=\"wp-block-heading\">Measuring LCP for a single URL<\/h3>\n<p><a href=\"https:\/\/pagespeed.web.dev\/\">Pagespeed Insights<\/a> pulls page-level field data that you can\u2019t otherwise query in the CrUX dataset. It also runs lab tests for you based on Google <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\">Lighthouse<\/a> and gives you origin data so you can compare page performance to the entire site.<\/p>\n<h3 class=\"wp-block-heading\">Measuring LCP for many URLs or an entire site<\/h3>\n<p>You can get CrUX data in Google Search Console that is bucketed into the categories of good, needs improvement, and\u00a0poor.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1437\" height=\"1490\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4.png\" alt=\"Core Web Vitals data in Google Search Console\" class=\"wp-image-161095\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4.png 1437w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4-410x425.png 410w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4-768x796.png 768w\" sizes=\"(max-width: 1437px) 100vw, 1437px\"\/><\/noscript><img decoding=\"async\" width=\"1437\" height=\"1490\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4.png\" alt=\"Core Web Vitals data in Google Search Console\" class=\"lazyload wp-image-161095\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4.png 1437w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4-410x425.png 410w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image14-4-768x796.png 768w\" data-sizes=\"(max-width: 1437px) 100vw, 1437px\"\/><\/figure>\n<p>Clicking into one of the issues gives you a breakdown of page groups that are impacted. The groups are pages with similar values that likely use the same template. You make the changes once in the template, and that will be fixed across the pages in the\u00a0group.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1756\" height=\"1752\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2.png\" alt=\"LCP issues on ahrefs.com\" class=\"wp-image-161097\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2.png 1756w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-426x425.png 426w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-768x766.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-1536x1533.png 1536w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-120x120.png 120w\" sizes=\"(max-width: 1756px) 100vw, 1756px\"\/><\/noscript><img decoding=\"async\" width=\"1756\" height=\"1752\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2.png\" alt=\"LCP issues on ahrefs.com\" class=\"lazyload wp-image-161097\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2.png 1756w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-426x425.png 426w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-768x766.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-1536x1533.png 1536w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image8-2-120x120.png 120w\" data-sizes=\"(max-width: 1756px) 100vw, 1756px\"\/><\/figure>\n<p>If you want both lab data and field data at scale, the only way to get that is through the PageSpeed Insights API. You can connect to it easily with Ahrefs\u2019 <a href=\"https:\/\/ahrefs.com\/site-audit\">Site Audit<\/a> and get reports detailing your performance. This is free for verified sites with an <a href=\"https:\/\/ahrefs.com\/webmaster-tools\">Ahrefs Webmaster Tools<\/a> (AWT) account.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"644\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3.png\" alt=\"Core Web Vitals data in Ahrefs' Site Audit\" class=\"wp-image-161099\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-680x274.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-768x309.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-1536x618.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"644\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3.png\" alt=\"Core Web Vitals data in Ahrefs' Site Audit\" class=\"lazyload wp-image-161099\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-680x274.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-768x309.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image10-3-1536x618.png 1536w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<p>Note that the Core Web Vitals data shown will be determined by the user-agent you select for your crawl during the setup. If you crawl from mobile, you\u2019ll get mobile CWV values from the\u00a0API.<\/p>\n<p>In PageSpeed Insights, the LCP element will be specified in the \u201cDiagnostics\u201d section. Also, notice there is a tab to select LCP that will only show issues related to LCP. These are the issues seen in the lab test that you\u2019ll want to\u00a0solve.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1781\" height=\"1999\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3.png\" alt=\"Issues related to LCP in Google PageSpeed Insights\" class=\"wp-image-161101\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3.png 1781w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-379x425.png 379w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-768x862.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-1368x1536.png 1368w\" sizes=\"(max-width: 1781px) 100vw, 1781px\"\/><\/noscript><img decoding=\"async\" width=\"1781\" height=\"1999\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3.png\" alt=\"Issues related to LCP in Google PageSpeed Insights\" class=\"lazyload wp-image-161101\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3.png 1781w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-379x425.png 379w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-768x862.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image9-3-1368x1536.png 1368w\" data-sizes=\"(max-width: 1781px) 100vw, 1781px\"\/><\/figure>\n<p>There are a lot of issues that relate to LCP, making it the hardest metric to improve.<\/p>\n<p>The general theory sounds easy enough. Give me the largest element faster. But in practice, this can get fairly complex. Some files may require others to be loaded first, or there may be conflicting priorities in the browser. You may fix a bunch of issues without actually seeing an improvement, which can be frustrating.<\/p>\n<p>If you\u2019re not very technical and don\u2019t want to hire someone, look for performance or page speed optimization plugins, modules, or packages for whatever system you\u2019re using. You can use the below information as a guide for what features you may\u00a0need.<\/p>\n<p>Here are a few ways you can improve LCP:<\/p>\n<h3 class=\"wp-block-heading\">1. Find your LCP element\u00a0<\/h3>\n<p>In PageSpeed Insights, you can click \u201cLargest Contentful Paint element\u201d in the \u201cDiagnostics\u201d section, and it will identify your LCP element.\u00a0<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1999\" height=\"567\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2.png\" alt=\"Identify your LCP element with PageSpeed Insights&#10;\" class=\"wp-image-161103\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-680x193.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-768x218.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-1536x436.png 1536w\" sizes=\"(max-width: 1999px) 100vw, 1999px\"\/><\/noscript><img decoding=\"async\" width=\"1999\" height=\"567\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2.png\" alt=\"Identify your LCP element with PageSpeed Insights&#10;\" class=\"lazyload wp-image-161103\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2.png 1999w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-680x193.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-768x218.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image1-2-1536x436.png 1536w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\"\/><\/figure>\n<h3 class=\"wp-block-heading\">2. Prioritize loading of resources<\/h3>\n<p>To pass the LCP check, you should prioritize how your resources are loaded in the critical rendering path. What I mean by that is you want to rearrange the order in which the resources are downloaded and processed.\u00a0<\/p>\n<p>You should first load the resources needed for your LCP element and any other resources needed for the content above the fold. After the initially visible elements are loaded for users, the rest are then loaded.<\/p>\n<p>Many sites can get to a passing time for LCP by just adding some early hints or preload statements for things like the main image, as well as necessary stylesheets and fonts. Let\u2019s look at how to optimize the various resource types.<\/p>\n<h4 class=\"wp-block-heading\">Images early<\/h4>\n<p>If you don\u2019t need the image, the most impactful solution is to simply get rid of it. If you must have the image, I suggest optimizing the size and quality to keep it as small as possible.<\/p>\n<p>You can also use <a href=\"https:\/\/blog.cloudflare.com\/early-hints\/\">Early Hints<\/a>. Fetchpriority=\u201dhigh\u201d can be used on &lt;img&gt; or &lt;link&gt; tags and tells browsers to get the image early. This means it\u2019s going to display a little earlier.<\/p>\n<p>Early Hints don\u2019t work on all browsers, so you may also want to preload the image. This is going to start the download of that image a little earlier, but not quite as early as fetchpriority=\u201dhigh\u201d.\u00a0<\/p>\n<p>A preload statement for a responsive image looks like\u00a0this:<\/p>\n<p><code>&lt;link rel=\"preload\" as=\"image\" href=\u201ccat.jpg\"<\/code><\/p>\n<p><code>imagesrcset=\u201ccat_400px.jpg 400w,<\/code><\/p>\n<p><code>cat_800px.jpg 800w, cat_1600px.jpg 1600w\"<\/code><\/p>\n<p><code>imagesizes=\"50vw\"&gt;<\/code><\/p>\n<p>You can even use fetchpriority=\u201dhigh\u201d and preload together!<\/p>\n<h4 class=\"wp-block-heading\">Images late<\/h4>\n<p>You should lazy load any images that you don\u2019t need immediately. This loads images later in the process or when a user is close to seeing them. You can use loading=\u201clazy\u201d like\u00a0this:<\/p>\n<p><code>&lt;img src=\u201ccat.jpg\" alt=\u201ccat\" loading=\"lazy\"&gt;<\/code><\/p>\n<p>Do not lazy load images above the\u00a0fold!<\/p>\n<h4 class=\"wp-block-heading\">CSS early<\/h4>\n<p>We already talked about removing unused CSS and minifying the CSS you\u00a0have.\u00a0<\/p>\n<p>The other major thing you should do is to inline critical CSS. What this does is it takes the part of the CSS needed to load the content users see immediately and then applies it directly into the HTML. When the HTML is downloaded, all the CSS needed to load what users see is already available.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1600\" height=\"1468\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11.png\" alt=\"Graph showing how inlining critical CSS helps with LCP\" class=\"wp-image-161104\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-463x425.png 463w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-768x705.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-1536x1409.png 1536w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/noscript><img decoding=\"async\" width=\"1600\" height=\"1468\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11.png\" alt=\"Graph showing how inlining critical CSS helps with LCP\" class=\"lazyload wp-image-161104\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11.png 1600w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-463x425.png 463w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-768x705.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image11-1536x1409.png 1536w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\"\/><\/figure>\n<h4 class=\"wp-block-heading\">CSS late<\/h4>\n<p>With any extra CSS that isn\u2019t critical, you\u2019ll want to apply it later in the process. You can go ahead and start downloading the CSS with a preload statement but not apply the CSS until later with an onload event. This looks\u00a0like:<\/p>\n<p><code>&lt;link rel=\"preload\" href=\"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/stylesheet.css\" as=\"style\" onload=\"this.rel=\"stylesheet\"\"&gt;<\/code><\/p>\n<h4 class=\"wp-block-heading\">Fonts<\/h4>\n<p>I\u2019m going to give you a few options here:<\/p>\n<p>Good: Preload your fonts. Even better if you use the same server to get rid of the connection.<\/p>\n<p>Better: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\">Font-display: optional<\/a>. This can be paired with a preload statement. This is going to give your font a small window of time to load. If the font doesn\u2019t make it in time, the initial page load will simply show a default font. Your custom font will then be cached and show up on subsequent page\u00a0loads.<\/p>\n<p>Best: Just use a system font. There\u2019s nothing to load\u2014so no delays.<\/p>\n<h4 class=\"wp-block-heading\">JavaScript early<\/h4>\n<p>We already talked about removing unused JavaScript and minifying what you have. If you\u2019re using a JavaScript framework, then you may want to <a href=\"https:\/\/www.netlify.com\/blog\/2016\/11\/22\/prerendering-explained\/\">prerender<\/a> or <a href=\"https:\/\/www.gatsbyjs.com\/docs\/glossary\/server-side-rendering\/\">server-side render (SSR)<\/a> the\u00a0page.<\/p>\n<p>You can also inline the JavaScript needed early. This works the same way as was described in the CSS section, where you move portions from your JavaScript files to instead be loaded with the\u00a0HTML.<\/p>\n<p>Another option is to preload the JavaScript files so that you get them earlier. This should only be done for assets needed to load the content above the fold or if some functionality depends on this JavaScript.<\/p>\n<h4 class=\"wp-block-heading\">JavaScript late<\/h4>\n<p>Any JavaScript you don\u2019t need immediately should be loaded later. There are two main ways to do that\u2014defer and async attributes. These attributes can be added to your script tags.<\/p>\n<p>Usually, a script being downloaded blocks the parser while downloading and executing. Async will let the parsing and downloading occur at the same time but still block parsing during the script execution. Defer will not block parsing during the download and only execute after the HTML has finished parsing.<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"1309\" height=\"1600\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4.png\" alt=\"Graph showing how async and defer impact the loading of a page\" class=\"wp-image-161105\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4.png 1309w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-348x425.png 348w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-768x939.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-1257x1536.png 1257w\" sizes=\"(max-width: 1309px) 100vw, 1309px\"\/><\/noscript><img decoding=\"async\" width=\"1309\" height=\"1600\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4.png\" alt=\"Graph showing how async and defer impact the loading of a page\" class=\"lazyload wp-image-161105\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4.png 1309w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-348x425.png 348w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-768x939.png 768w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image7-4-1257x1536.png 1257w\" data-sizes=\"(max-width: 1309px) 100vw, 1309px\"\/><\/figure>\n<p>Which should you use? For anything that you want earlier or that has dependencies, I\u2019d lean toward async.\u00a0<\/p>\n<p>For instance, I tend to use async on analytics tags so that more users are recorded. You\u2019ll want to defer anything that is not needed until later or doesn\u2019t have dependencies. The attributes are pretty easy to\u00a0add.\u00a0<\/p>\n<p>Check out these examples:<\/p>\n<p>Normal:<\/p>\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\"&gt;&lt;\/script&gt;<\/code><\/p>\n<p>Async:<\/p>\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" async&gt;&lt;\/script&gt;<\/code><\/p>\n<p>Defer:<\/p>\n<p><code>&lt;script src=\"https:\/\/www.domain.com\/file.js\" defer&gt;&lt;\/script&gt;<\/code><\/p>\n<h3 class=\"wp-block-heading\">3. Make files smaller<\/h3>\n<p>If you can get rid of any files or reduce their sizes, then your page will load faster. This means you may want to delete any files not being used or parts of the code that aren\u2019t used.<\/p>\n<p>How you go about this will depend a lot on your setup, but the process for removing unneeded parts of files is usually referred to as <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\">tree shaking<\/a>.\u00a0<\/p>\n<p>This is commonly done via an automated process with Webpack or Grunt with JavaScript frameworks or sometimes even systems like WordPress, but most common CMS systems may not support this.<\/p>\n<p>You may want to skip this or see if there are any plugins that have this option for your system.<\/p>\n<p>To make the files smaller, you typically want to compress them.\u00a0<\/p>\n<p>Pretty much every file type used to build your website can be compressed, including CSS, JavaScript, Images, and HTML. Also, nearly every system and server support compression.\u00a0<\/p>\n<p>\u00a0It\u2019s usually done at the server or CDN level, but some plugins support this like WP Rocket for WordPress.<\/p>\n<h3 class=\"wp-block-heading\">4. Serve files closer to\u00a0users<\/h3>\n<p>Information takes time to travel. The further you are from a server, the longer it takes for the data to be transferred. Unless you serve a small geographical area, having a <a href=\"https:\/\/www.cloudflare.com\/learning\/cdn\/what-is-a-cdn\/\">Content Delivery Network (CDN)<\/a> is a good\u00a0idea.<\/p>\n<p>CDNs give you a way to connect and serve your site that\u2019s closer to users. It\u2019s like having copies of your server in different locations around the\u00a0world.<\/p>\n<h3 class=\"wp-block-heading\">5. Host resources on the same server<\/h3>\n<p>When you first connect to a server, there\u2019s a process that navigates the web and establishes a secure connection between you and the server.\u00a0<\/p>\n<p>This takes some time, and each new connection you need to make adds additional delay while it goes through the same process. If you host your resources on the same server, you can eliminate those extra delays.<\/p>\n<p>If you can\u2019t use the same server, you may want to use <a href=\"https:\/\/www.splunk.com\/en_us\/observability\/resources\/preconnect-resource-hints.html\">preconnect<\/a> or <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Performance\/dns-prefetch\">DNS-prefetch<\/a> to start connections earlier. A browser will typically wait for the HTML to finish downloading before starting a connection. But with preconnect or DNS-prefetch, it starts earlier than it normally would. Do note that DNS-prefetch has better support than preconnect.<\/p>\n<p>For each resource you want to get early, you add a new statement like:<\/p>\n<p><code>&lt;link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\/\"&gt;<\/code><\/p>\n<p><code>&lt;link rel=\"dns-prefetch\" href=\"https:\/\/fonts.googleapis.com\/\" \/&gt;<\/code><\/p>\n<h3 class=\"wp-block-heading\">6. Use caching<\/h3>\n<p>When you cache resources, they\u2019re downloaded for the first page view but don\u2019t need to be downloaded for subsequent page views. With the resources already available, additional page loads will be much faster.<\/p>\n<p>Check out how few files are downloaded in the second page load in the waterfall charts below.<\/p>\n<p>First load of the\u00a0page:<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"755\" height=\"712\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3.png\" alt=\"First load of a page in webpagetest.org\" class=\"wp-image-161106\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3.png 755w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3-451x425.png 451w\" sizes=\"(max-width: 755px) 100vw, 755px\"\/><\/noscript><img decoding=\"async\" width=\"755\" height=\"712\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3.png\" alt=\"First load of a page in webpagetest.org\" class=\"lazyload wp-image-161106\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3.png 755w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image4-3-451x425.png 451w\" data-sizes=\"(max-width: 755px) 100vw, 755px\"\/><\/figure>\n<p>Second load of the\u00a0page:<\/p>\n<figure class=\"wp-block-image size-full\"><noscript><img decoding=\"async\" width=\"773\" height=\"206\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4.png\" alt=\"Second load of a page in webpagetest.org\" class=\"wp-image-161107\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4.png 773w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4-680x181.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4-768x205.png 768w\" sizes=\"(max-width: 773px) 100vw, 773px\"\/><\/noscript><img decoding=\"async\" width=\"773\" height=\"206\" src=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4.png\" alt=\"Second load of a page in webpagetest.org\" class=\"lazyload wp-image-161107\" srcset=\"https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4.png 773w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4-680x181.png 680w, https:\/\/ahrefs.com\/blog\/wp-content\/uploads\/2023\/06\/image6-4-768x205.png 768w\" data-sizes=\"(max-width: 773px) 100vw, 773px\"\/><\/figure>\n<p>If you can, cache on a CDN as well. Your cache time should be as long as you are comfortable with.<\/p>\n<p>An ideal setup is to cache for a really long period of time but purge the cache when you make a change to a\u00a0page.<\/p>\n<h3 class=\"wp-block-heading\">7. Misc<\/h3>\n<p>There are a few other technologies that you may want to look at to help with performance. These include <a href=\"https:\/\/web.dev\/speculative-prerendering\/\">Speculative Prerendering<\/a>, <a href=\"https:\/\/blog.cloudflare.com\/automatic-signed-exchanges\/\">Signed Exchanges<\/a>, and <a href=\"https:\/\/www.cloudflare.com\/learning\/performance\/what-is-http3\/\">HTTP\/3<\/a>.<\/p>\n<h2 class=\"wp-block-heading\">Final thoughts<\/h2>\n<p>Is there a better metric to measure visible load? I don\u2019t see anything new on the horizon at this time. We\u2019ve already seen several evolutions trying to measure the\u00a0load.<\/p>\n<p>Load and DOMContentLoaded don\u2019t really tell you what a user sees. First Contentful Paint (FCP) is the beginning of the loading experience. First Meaning Paint (FMP) and Speed Index (SI) are complex and don\u2019t really identify when the main content has been loaded.<\/p>\n<p>If you have any questions, message me <a href=\"https:\/\/twitter.com\/patrickstox\">on Twitter<\/a>.<\/p>\n<\/p><\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><br \/>\n<br \/><br \/>\n<br \/><a href=\"https:\/\/ahrefs.com\/blog\/largest-contentful-paint-lcp\/\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Largest Contentful Paint (LCP) is the amount of time it takes to load the single largest visible element in the viewport. It represents the website being visually loaded and is one of the three Core Web Vitals (CWV) metrics Google uses to measure page experience. The first impression users have of your site is how [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2232,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-2231","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-seo"],"_links":{"self":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/posts\/2231","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/comments?post=2231"}],"version-history":[{"count":0,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/posts\/2231\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/media\/2232"}],"wp:attachment":[{"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/media?parent=2231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/categories?post=2231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ewebtoolz.com\/blog\/wp-json\/wp\/v2\/tags?post=2231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}