Page speed is more important than ever these days and a key factor that must be taken into account for every website. Not only does it have a significant impact on user experience, but it can have a massive effect on Search Engine Optimization (SEO) as well.
In fact, in May 2021, Google introduced the Core Web Vitals which score the user experience during each page load. Google is calling this new signal the "Page Experience Signal" and it will have an extensive effect on all websites. Website owners will do well to thoroughly familiarize themselves with these Core Web Vitals so that they can minimize any potentially negative ranking shifts.
Largest contentful paint (LCP) is one of three critical metrics that make up Google's Core Web Vitals. The purpose of this parameter is to ensure that users who visit sites are satisfied with their experience. That includes content but also presentation and performance. If the site takes too long to deliver the content it's offering, there are higher chances the visitor will promptly bounce from the page. For Google, this means that the experience was suboptimal.
The Core Web Vitals also include cumulative layout shift (CLS) and first input delay (FID) which we'll touch on briefly, but since there's a lot to cover, we'll focus specifically on largest contentful paint and how initial rendering of the elements on a website affects overall web page experience.
Let's dive in!
What is Largest Contentful Paint: An Easy Explanation
Simply put, largest contentful paint measures the time it takes a website to show a user the largest element on the screen, complete and ready for interaction. The analysis of this metric ends as soon as there is user interaction such as clicking, scrolling, or user input such as entering text into a type box.
Google claims that this is a simpler measurement than DOM or DOMContentLoad which was used in the past and that LCP looks at the perceived load speed of critical resources like the largest block-level elements such as a visible image or text block.
What that means is if your largest contentful paint element on your website such as a background image or video takes a long time to load in the rendering process, your LCP score will likely be negatively impacted.
Google has stated that this metric only considers above-the-fold content specifically, meaning everything that appears on the page immediately after loading without any scrolling.
What is the Ideal Largest Contentful Paint Score?
Since we've established that LCP indicates a better user experience and can be a significant SEO ranking factor, it's of great importance to make sure your website has a "good" largest contentful paint score.
While it's often cited that 1 second is the amount of time a user will wait before they begin to lose focus on a task, this is just an approximation that researchers have made. For the purposes of SEO rankings and an overall positive user experience from Google's perspective, a positive LCP score of 2.5 seconds or less is considered "good."
If your website's score sits in the 2.5 to 4-second range, it's considered "in need of improvement," while anything over 4 seconds is considered "poor."
It's important to note that largest contentful paint accounts for roughly 25% of your Google Performance Score (also known as your "Page Speed" score on mobile and desktop). In order to have a positive Core Web Vitals report and pass the assessment, you need to have a "good" LCP score while also scoring well in CLS and FID, so you'll want to give these metrics some serious consideration.
What Thresholds for Largest Contentful Paint (LCP) Should You Measure Against?
To ensure you're hitting your LCP target for most of your users, you'll want to measure against the 75th percentile of all page loads to that website. That should be segmented across mobile and desktop devices to make sure that your elements are rendering at the same speeds on all devices.
In simple terms, measuring against the 75th percentile means that if at least 75% of page views to a website meet the "good" threshold, the site is deemed as having "good" performance for that metric.
On the other hand, if at least 25% of page views meet the "poor" threshold, the site is determined to have "poor" performance. For example, a 75th percentile LCP of 2 seconds is deemed "good", while a 75th percentile LCP of 5 seconds is deemed "poor".
There are two reasons the 75th percentile was determined to be the ideal threshold. First, using that percentile should ensure that most of the visits to a site or page experience the target level of performance. Second, at the chosen percentile, the value should not be seriously impacted by outliers.
If you have a large amount of render-blocking resources like render-blocking javascript or CSS, your score will likely be beneath the ideal threshold and you'll need to take some time to improve your LCP so that your website meets Google's guidelines.
Why is my Largest Contentful Paint score so high?
UnsplashLargest contentful paint scores measure specific resources rendered above-the-fold that are relevant to the user experience, including:
- Background images with CSS.
- Text elements, such as paragraphs, headings, and lists.
- Images.
- Image tags.
- Video thumbnails.
If slow resource load times are detected on any of these elements, Google determines that this will lead to a poor user experience and the LCP metric will be negatively affected.
These are the key elements considered right now, but it was intentionally kept simple when the core web vitals launched and additional elements might be added as more research is performed.
What tools can be used to measure LCP?
There are a variety of field and lab tools you can use to measure your website's LCP.
Field tools give insight into how real users are experiencing your page or site, and this type of measurement is often called Real User Monitoring (RUM). Field data typically has a more limited set of metrics than lab data.
Lab tools collect data in a controlled environment and are more focused on offering reproducible results for debugging with insights into how a potential user is likely to experience your website. The downside is they may not capture bottlenecks that happen in real-world user experiences.
There are multiple lab and field tools and each tool offers distinctly valuable insights that can be used to optimize your user experience.
PageSpeed Insights
PageSpeed Insights (PSI) provides detailed reporting on the mobile and desktop performance of a page, and it also provides straightforward suggestions on how that page could be optimized. PSI includes both lab and field data in its reports, and it also factors in all three cumulative Core Web Vitals metrics including LCP.
Right at the top of the report, PSI displays a score that summarizes the page’s overall performance. Any score of 90 or higher is considered good while anything between 50 to 90 is a score that could use improvement. Anything below 50 is considered a poor result.
That score is finally determined by also running Lighthouse to gather and analyze lab data about the page. While PageSpeed does use information generated by Lighthouse and then adds more real-world data, Lighthouse provides you with more than just one score. It offers more features beyond simply measuring your website’s performance.
Lighthouse
Suzuki KenichiLighthouse is an automated, open-source lab tool used to improve the quality of web pages, and unlike PageSpeed insights, it doesn't just measure the performance metric. It also has audits for accessibility, SEO, progressive web apps, and more.
While Google PageSpeed uses a combination of lab and real-world data, Lighthouse exclusively uses lab data (under consistent conditions) to create its report.
Since Lighthouse is now incorporated into PageSpeed Insights as its integrated analysis engine, you can access Lighthouse's data by simply running a PageSpeed report. There are times you may want to use Lighthouse over PageSpeed Insights, such as when you want to run audits programmatically, evaluate other aspects of your websites besides just loading times, or if you want to incorporate the Lighthouse API into your own systems.
Chrome User Experience Report
The Chrome user experience report is a field tool as it provides real-world user experience metrics based on the way Chrome users experience popular destinations on the internet. It aggregates data from users who haven't set up a Sync passphrase, who have opted-in to syncing their browsing history, and who have usage statistic reporting enabled.
LCP is one of the metrics measured in the Chrome user experience report, and the final data is made available in The resulting data is accessible via Public Google BigQuery project, PageSpeed Insights, and CrUX Dashboard on Data Studio.
Core Web Vitals Report (Search Console)
The core web vitals report is designed to help you fix poor user experiences on your site by analyzing field data. It shows how your pages perform based on real-world data.
The report is based on three metrics: largest contentful paint (LCP), cumulative layout shift (CLS), and first-input delay (FID). If the webpage being analyzed doesn't have a minimum amount of data to be reported for any of these metrics, that metric will be excluded from the report.
Once a page has a baseline amount of data for these three metrics, the page status will be the status of its worst-performing metric.
Chrome DevTools
Built right into the Chrome browser, Chrome DevTools is a set of web developer tools that can be used to inspect the network activity of a page and take a closer look at the rendered HTML (DOM), critical CSS, non-critical CSS, critical path CSS, unused CSS, unused JavaScript, JavaScript bundles, whether there's any blocking JavaScript, and more.
Chrome DevTools can be used to troubleshoot ad serving issues and to find the LCP on any given page. Simply run a Performance recording and you'll find the LCP in the Timings Section. Clicking the LCP marker will highlight the element on the page.
In general, performance recording will show how your page performs when it is running as opposed to loading. It will show your frames per second (FPS) and any bottlenecks.
WebPageTest
FlickrWebPageTest is a free-to-use web performance analytics tool that doesn't fall under the Google umbrella. It uses real browsers to access web pages and gather timing metrics so that it can score a website's overall performance.
WebPageTest's hallmark feature is a metric called SpeedIndex that specifically focuses on how quickly above-the-fold content is displayed.
Web Vitals Chrome Extension
Perhaps one of the simplest tools available to track LCP and the other two Web Vitals metrics (CLS and FID0, the Web Vitals Chrome tool is a straightforward extension that gets installed in your Chrome browser.
On every web page you load, the tool will automatically add a layer that shows you all three metrics.
5 Proven Ways to Speed Up Largest Contentful Paint (LCP)
Tracking your largest contentful paint score is a crucial part of your website maintenance routine, but it's only by making improvements that you'll see better results. If your LCP score is suboptimal and needs improvement, there are a number of straightforward and more elaborate things you can do to elevate your score and create a better user experience.
Optimize Image Sizes
Images can significantly improve a user's experience on your website, but they can also cause major speed issues if they're not optimized. Always use responsive images with the right sizing. Your hosting will suggest specific dimensions, either for the desktop or mobile version. Optimizing images on your website helps to avoid overloading and can drastically improve largest contentful paint scores.
Avoid Using JavaScript to Load Images
So-called JavaScript "lazy loading" is useful for images below the fold, but it's not recommended for images above the fold. Lazy loading means that instead of loading the entire web page and rendering it for the user all at once in bulk, only the required section is loaded immediately and the remaining content is delayed until it is needed by the user.
Since you want images above-the-fold to load as quickly as possible, you wouldn't want to use JavaScript to load those images since it can slow down the process. This will help to prevent any delay and keep your LCP rating within the recommended range.
Use an Image Content Delivery Network (CDN)
A content delivery network (CDN) service can make images load faster by storing images on servers that are strategically positioned around the world. By delivering optimized images from a source closer to the user requesting it, a web page can be downloaded up to 50% faster which can lead to a better largest contentful paint score.
Choose a Good Hosting Service
One of the easiest things that can be done to impact a web page's loading time is to use a high-quality hosting service. Find a quality provider with a good reputation in the market, and more importantly, one that offers the necessary infrastructure to cater to your site’s size and needs.
When in Doubt, Use the PRPL Pattern
Google recommends using the PRPL pattern which is used to make each separate page load and become interactive faster. It stands for:
- Push (or preload) the most important resources first. A declarative fetch request, or in other words, code that declares precisely what we are interested into the browser, can be used to do this.
- Render the initial route as soon as possible. One way of doing this is server-side rendering initial HTML on the page, inlining any critical JS and CSS, and eliminating additional server round trips using an async function to defer non-critical CSS.
- Pre-cache remaining assets and have users retrieve assets right from the cache rather than from the server on subsequent visits.
- Lazy load other routes and non-critical assets such as images as discussed earlier.
The PRPL pattern can have a beneficial impact on server response times and is well worth implementing.
How to Improve Largest Contentful Paint on WordPress?
UnsplashFixing LCP issues in WordPress involves some different processes than websites on other platforms. While there is some crossover, most of these tips on improving largest contentful paint are directly relevant to WordPress.
How to Optimize Your Largest Contentful Paint Element No Matter What it is
A largest contentful paint object can vary from one page to the next and could include image, video, animation, or text elements.
If it's an image, you'll want to make sure it's compressed and pre-loaded, using proper dimensions, served from a CDN, and excluded from any lazy load protocols. You'll also ideally want to convert images to WebP, a modern image format that provides superior lossy and lossless compression for web images. The same steps can be used for a background image.
If your largest contentful paint element is a video or animation, it's best practice to avoid self-hosted videos and upload them to YouTube instead. Make sure it's compressed before uploading it, and avoid using a video or animation in the hero section of your web page if at all possible as it will very likely negatively impact your LCP.
If a block-level HTML element is your largest contentful paint, it's unlikely to negatively affect your LCP as much as an image, video, or animation since they tend to lead to a faster server response time.
Eliminate Render-Blocking Resources
Eliminating render-blocking resources can significantly reduce LCP issues. Plugins like Async JavaScript or Autoptimize can fix most issues since they've been built specifically to load files asynchronously, minify, defer, and inline CSS and JavaScript. Remove whatever CSS or JavaScript isn't being used as it will simply bog things down unnecessarily.
You can also try hosting your fonts locally and preloading them, and finally, avoid heavy plugins like page builders if possible as they can add excessive JavaScript and unused CSS to your website that can also slow server response times.
Take Advantage of a Cache Plugin
Without caching, visitors are required to download a web page every time they visit a website. Fortunately, most modern browsers automatically cache so that returning users can access the content of your website faster.
Using a WordPress cache plugin allows you to take advantage of server-side caching, which can have a large impact on your WordPress site’s largest contentful paint. Instead of temporarily saving content on the client-side with a browser cache, it’s stored on a website’s server. Server caching is means that caching is fully handled and administered on the server without involving the end-user or browser at all.
There are also file-based cache plugins that you can use, but server-side caching is typically faster and can be enabled with plugins like SG Optimizer or LiteSpeed Cache. Plugins like WP Rocket allow you to take advantage of page caching, object caching, and much more.
If you're not currently using a cache plugin and are experiencing slow server response times on your website, you should see a major improvement in resource load times from implementing one.
Conclusion
While LCP is just one factor of many when it comes to your website's speed and all-around user experience, it's not something that you want to take lightly. As we've learned, not only can web page load time have a major impact on user experience, but it can also be a huge SEO ranking factor which is how many websites get user traffic in the first place.
Use the tips we've discussed to track, optimize, and maintain your LCP and remember that it will require ongoing effort to stay on top of it and deliver the best experience possible to your users.
If you’re making more than $2,000 in monthly ad revenue, contact us today to learn more about how Publift can help increase your ad revenue and best optimize the ad space available on your website or app.