Largest Contentful Paint (LCP) is one of Google\u2019s three Core Web Vitals<\/a>.<\/p>\n Like the other two (Cumulative Layout Shift and Interaction to Next Paint), it\u2019s not exactly clear what it means.<\/p>\n Lots of tools can show your LCP score and outline ways to improve it. But their tips are often generic, and lack the detail you need to actually take action.<\/p>\n So, in this guide I\u2019ll walk you through actionable<\/strong> steps to improve your LCP. I\u2019ll separate them by:<\/p>\n But first, let\u2019s talk about what LCP actually means for your website (jump to this part<\/a> for the fixes).<\/p>\n Largest Contentful Paint measures how long it takes for the main content of your webpage to appear on your user\u2019s screen\u2014whether that\u2019s a hero image, heading, or block of text.<\/p>\n It\u2019s not the most intuitive phrase, so let\u2019s break it down word by word:<\/p>\n For example, imagine clicking a link to read a news article.<\/p>\n The page might load various elements quickly, like the header menu at the top and placeholders for ads.<\/p>\n But if the article text takes five seconds to show up, that\u2019s a poor experience. That delay is what LCP measures.<\/p>\n When you think about LCP, think about your visitors. It\u2019s the difference between someone seeing your main product image or headline right away versus waiting and possibly leaving.<\/p>\n A faster LCP generally means a better user experience.<\/strong> And a better experience means happier visitors who trust your site and want to hang around (and potentially buy from you).<\/p>\n Google provides<\/a> three scoring ranges for LCP:<\/p>\n These benchmarks serve as useful guidelines, but your users\u2019 actual experience matters most.<\/p>\n A visually rich photography portfolio might take longer to load but still satisfy visitors. Meanwhile, a simple text-based article that loads in three seconds might frustrate users who So, focus on your audience\u2019s expectations and behavior. Check your analytics to see if slower LCP correlates with higher bounce rates<\/a> or lower conversion rates<\/a>.<\/p>\n These numbers tell you more about your site\u2019s real performance than any benchmark can.<\/p>\n If your conversion rate is 10x the industry average, it likely won\u2019t make a massive dent in your bottom line if you improve your LCP score.<\/p>\n But if people aren\u2019t staying long on your important pages, improving your LCP score could help boost your site\u2019s performance. This, in turn, can lead to better results for your business.<\/p>\n There are lots of tools you can use to measure your LCP. But you don\u2019t want to just get your score.<\/p>\n You also want to learn these two things:<\/strong><\/p>\n Finding these two pieces of information is key for prioritizing which methods you should use to improve your LCP.<\/p>\n For example, you could spend hours minifying your code, inlining your CSS, and deferring JavaScript. But it won\u2019t make much of a difference if your LCP element is a hero image you just<\/p>\n haven\u2019t optimized yet.<\/p>\n As for the stages:<\/p>\n LCP is made up of four stages:<\/strong><\/p>\n Each stage is affected by different factors (and methods of optimization). So, if you can identify which stages of your LCP are taking the longest, you can prioritize your fixes accordingly.<\/p>\n Here are two ways to find this information.<\/p>\n Google\u2019s PageSpeed Insights<\/a> (PSI) is a popular choice if you want a simple, web-based report.<\/p>\n Just plug in your URL, and you\u2019ll get a quick overview of your Core Web Vitals<\/a>, including LCP.<\/p>\n PSI is great if you\u2019re not a big fan of digging around in complex dashboards. It gives you clear visuals and actionable tips without much fuss.<\/p>\n It also has a handy diagnostics section which tells you some of the main ways you can reduce your score. Just make sure you select the \u201cLCP<\/strong>\u201d option next to \u201cShow audits relevant to.\u201d<\/p>\n Click the \u201cLargest Contentful Paint element<\/strong>\u201d option to see which element on that page is the LCP element.<\/p>\n It also shows you the breakdown (as a percentage) of each stage of your LCP. From the example above, you can see the vast majority (88%) of our LCP time comes from the render delay stage.<\/p>\n Knowing this lets us focus our efforts on the methods in the next section that specifically help reduce that stage of the LCP score.<\/p>\n Chrome\u2019s DevTools can give you detailed, real-time feedback on various aspects of your page\u2019s performance.<\/p>\n It\u2019s especially useful for testing changes on the fly, but it might feel a bit overwhelming if you\u2019re completely new to web development.<\/p>\n Access it in Chrome on any webpage by right clicking and selecting \u201cInspect<\/strong>.\u201d<\/p>\n In the interface that appears, head to the \u201cPerformance<\/strong>\u201d tab.<\/p>\n (You can select the three dots next to the cog icon and change where the dock goes\u2014I find horizontal is best for analyzing LCP.)<\/p>\n This view shows your LCP score. If you hover over the \u201cLCP element\u201d underneath the score, you\u2019ll see which part of the content is the largest contentful element.<\/p>\n Then, get a breakdown of the LCP stages by clicking the \u201cRecord and reload<\/strong>\u201d button. This will run the performance checks again on the page, and you\u2019ll see more information along with a Ignore that for now, and instead click the \u201cLCP by phase<\/strong>\u201d drop-down. This breaks the LCP down into its four constituent parts, showing the actual time for each stage along with a percentage.<\/p>\n As before, you can use this information to prioritize your optimization efforts and more effectively improve your LCP.<\/p>\n You can improve your LCP in several ways, and some methods will help you more than others.<\/p>\n The table below sorts the methods by impact, also indicating the effort level each one requires and which stage of your LCP it\u2019ll help reduce.<\/p>\n These values are all relative. <\/strong><\/p>\n Your own skill level, your website\u2019s setup, and your budget will affect how easy or cost-effective these changes are for you.<\/p>\n I\u2019ve taken each method in isolation, as the relative impact of each fix may decrease as you implement each one.<\/p>\n For example, if you implement lots of these methods but don\u2019t use a CDN, your LCP score will likely improve to the point that using a CDN might not make much difference to the score Finally, a few of these might help reduce different stages of your LCP. As with every change you make to your website, there\u2019s usually a bit of overlap in terms of what it\u2019ll affect.<\/p>\n I\u2019ll explain more of the nuances and who each fix is best suited to below.<\/p>\n Impact:<\/strong> High | Effort:<\/strong> Low | Helps Reduce:<\/strong> Resource Load Time<\/p>\n A Content Delivery Network (CDN) stores (cached) copies of your content across servers around the world. When people visit your site, they\u2019re served files from the closest server to them.<\/p>\n That means faster load times for your users.<\/p>\n If you\u2019re running a small local blog, you might not absolutely need a CDN. But if you have visitors from all over, a CDN can boost your LCP by reducing the travel time for your data.<\/p>\n This is most impactful for:<\/strong><\/p>\n You can sign up for a CDN service like Cloudflare, KeyCDN, or StackPath. They\u2019ll provide instructions for changing your domain\u2019s settings to route traffic through their servers.<\/p>\n Once set up, the CDN will serve your website files to users from the server that\u2019s physically located closest to them.<\/p>\n There are cheap and free options, but it can get expensive for larger sites with lots of traffic.<\/p>\n If you use WordPress or a similar content management system (CMS), there are often plugins that make the setup process even smoother.<\/p>\n Impact:<\/strong> High | Effort:<\/strong> Medium | Helps Reduce:<\/strong> Resource Load Time<\/p>\n Large image files are a common reason for poor LCP scores. This is especially true if you use a large hero image at the top of your pages or blog posts.<\/p>\n By compressing images before uploading them, you reduce their file size to make them load faster.<\/p>\n This is most impactful for:<\/strong><\/p>\n You can optimize your images using online tools, and there are lots of free options. Or you can use plugins that auto-compress images when you upload them to your content management system.<\/p>\n Squoosh<\/a> is a free tool that lets you tweak the optimization settings, choose a format to convert to, and resize the image:<\/p>\n To do this in bulk, you can also use a tool like TinyPNG<\/a>:<\/p>\n Just keep an eye on quality\u2014if you compress too much, your images might look blurry. But most of the time, you can shrink them a lot without anyone noticing.<\/p>\n Impact:<\/strong> High | Effort:<\/strong> Low | Helps Reduce:<\/strong> Potentially all stages<\/p>\n For many WordPress users, plugins are the easiest way to speed up your site and fix LCP issues with minimal effort. They can handle image optimization, caching, code minification, and The caveat is that the best ones aren\u2019t always free. So you\u2019re often paying a convenience cost. But there are still some unpaid options out there.<\/p>\n Another downside is the risk of plugin \u201cbloat,\u201d which can slow your site if you install too many or choose poorly optimized ones.<\/p>\n Compatibility issues may also pop up, especially if you try to use multiple optimization plugins at one time.<\/p>\n But as long as you don\u2019t have hundreds of plugins, and check for compatibility, I find the benefits typically outweigh the downsides here.<\/p>\n This is most impactful for:<\/strong><\/p>\n There are lots of WordPress plugins that are great for improving your LCP in particular, and your page speed in general.<\/p>\n\n
What Does Largest Contentful Paint Even Mean?<\/h2>\n
\n
![\"Largest](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/largest-contentful-paint.webp "\\"Largest")
<\/source><\/picture><\/figure>\nWhat Is a Good LCP Score?<\/h3>\n
\n
![\"Google's](\"https:\/\/api.backlinko.com\/app\/uploads\/2020\/07\/googles-largest-contentful-paint-guidelines.webp "\\"Google\u2019s")
<\/source><\/picture><\/figure>\n
expect instant access.<\/p>\nHow to Measure Your LCP Score<\/h2>\n
\n
\n
Google PageSpeed Insights<\/h3>\n
![\"Pagespeed](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/pagespeed-insights-backlinko-lcp.webp "\\"Pagespeed")
<\/source><\/picture><\/figure>\n![\"Pagespeed](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/pagespeed-insights-lcp-audits.webp "\\"Pagespeed")
<\/source><\/picture><\/figure>\n![\"Pagespeed](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/pagespeed-insights-lcp-element.webp "\\"Pagespeed")
<\/source><\/picture><\/figure>\nChrome DevTools<\/h3>\n
![\"Backlinko](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/backlinko-post-inspect.webp "\\"Backlinko")
<\/source><\/picture><\/figure>\n![\"Chrome](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/chrome-performance-lcp-by-phase.webp "\\"Chrome")
<\/source><\/picture><\/figure>\n
waterfall chart.<\/p>\n<\/source><\/picture><\/figure>\nHow to Improve Your LCP<\/h2>\n
(although it may still improve your user experience).<\/p>\n
\nUse a CDN<\/h3>\n
![\"Implement](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/implement-a-cdn.webp "\\"Implement")
<\/source><\/picture><\/figure>\n\n
How to Implement This<\/h4>\n
\nOptimize Your Images<\/h3>\n
\n
How to Implement This<\/h4>\n
![\"Squoosh](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/squoosh-editor.webp "\\"Squoosh")
<\/source><\/picture><\/figure>\n![\"TinyPNG](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/tinywebp.webp "\\"TinyPNG")
<\/source><\/picture><\/figure>\n
\nUse WordPress Plugins<\/h3>\n
more\u2014all from a simple dashboard.<\/p>\n\n
How to Implement This<\/h4>\n
![\"WP](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/wp-rocket-file-optimization.webp "\\"WP")
<\/source><\/picture><\/figure>\n![\"Autoptimize](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/autoptimize-wp-plugin.webp "\\"Autoptimize")
<\/source><\/picture><\/figure>\n![\"Activate](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/activate-browser-caching.webp "\\"Activate")
<\/source><\/picture><\/figure>\n![\"Caching](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/caching-makes-load-time-much-quicker-for-second-visits.webp "\\"Caching")
<\/source><\/picture><\/figure>\n![\"How](\"https:\/\/api.backlinko.com\/app\/uploads\/2024\/06\/how-does-webhosting-works.webp "\\"How")
<\/source><\/picture><\/figure>\n![\"Minifying](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/minifying-code-to-reduce-load-times.webp "\\"Minifying")
<\/source><\/picture><\/figure>\n![\"Minifier](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/minifier-homepage.webp "\\"Minifier")
<\/source><\/picture><\/figure>\n![\"WP](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/wp-rocket-minify.webp "\\"WP")
<\/source><\/picture><\/figure>\n![\"Lazy](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/lazy-loading-images.webp "\\"Lazy")
<\/source><\/picture><\/figure>\n![\"WP](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/wp-rocket-lazy-load.webp "\\"WP")
<\/source><\/picture><\/figure>\n![\"Image](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/image-loading-lazy.webp "\\"Image")
<\/picture><\/figure>\n![\"Pagespeed](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/pagespeed-insights-lcp-reduce-javascript.webp "\\"Pagespeed")
<\/source><\/picture><\/figure>\n![\"Pagespeed](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/pagespeed-insights-eliminate-reder-blocking-resources.webp "\\"Pagespeed")
<\/source><\/picture><\/figure>\n![\"Async](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/async-vs-defer-javascript.webp "\\"Async")
<\/source><\/picture><\/figure>\n![\"Script](\"https:\/\/api.backlinko.com\/app\/uploads\/2025\/02\/script-defer-type.webp "\\"Script")
<\/source><\/picture><\/figure>\n