Three years after the introduction of Core Web Vitals, a staggering 33% of websites globally still struggle to pass the notoriously challenging metric – Largest Contentful Paint (LCP).
To address this issue, we partnered up with Google and launched the four-part webinar series “Core Web Vitals For Your Business.” The third episode dedicated to mastering LCP optimization is now available to replay on YouTube:
In this session, Google’s top minds, Barry Pollard and Adam Silverstein, together with NitroPack’s CTO, Ivailo Hristov, discuss:
Read on for the webinar highlights and an actionable checklist for fixing your LCP from “Failed” to “Passed.”
Largest Contentful Paint (LCP) is a Core Web Vitals metric that measures the render time of the largest element within the viewport relative to when the page first started loading. It’s especially important to the user experience as it helps you understand the perceived loading performance from a user's perspective.
A delayed LCP can indicate that a page takes too long to load its main content, leading to a perception of slowness by users. Use the following thresholds to gauge your LCP score:
What is considered an LCP element?
Various elements can be considered the largest content element depending on the structure and content of a webpage.
Any of the following can be classified as the largest content element candidates:
Internally, the Chrome browser will identify different LCP elements as the page’s contents render. Meaning that during the initial page load, the LCP element will change until the above-the-fold is loaded to reveal the definitive largest element.
Important note: Depending on the different screen sizes, the LCP element of the same webpage can vary.
Luckily, with tools like Chrome DevTools and WebPageTest you can easily identify the specific LCP element for a particular page load scenario.
1. With Chrome DevTools
2. With WebPageTest
Since the introduction of the most important Core Web Vitals metrics, they’ve been continuously updated to address edge cases and web performance evolution.
Chrome has gone through a few changes already, focusing on excluding and including elements based on how “contentful” they are:
Following the introduction of a WordPress Core Performance Team back in 2021, WordPress has been investing heavily in making the platform more performance-friendly.
WordPress 6.2 and 6.3 versions showed massive improvements, where we see 27% faster load times for block themes and 18% - for classic themes. The overall CWVs pass rate for WordPress websites on mobile has hit 34.71% compared to 30.47% in April.
Changes made by the WP Core Performance Team that affect the Largest Contentful Paint for the better include:
There’s a reason LCP is still the most challenging CWV metric to pass out there. And it’s not necessarily your optimization strategy.
LCP is complex in the sense that a lot happens in the initial loading process, and you may not be able to impact every step of the way.
When visitors land on your website through an ad with a shortened link, there can be quite a few redirects happening before the user even starts to see your webpage content. Additionally, network strength plays a huge role, especially if your website has visitors coming in from countries with slower connections.
“It can feel annoying because it’s somewhat out of your control. You can’t just go and magically fix these things. You need to understand what the problem is itself - is it something on your page, or is it something more about how people are getting to your site.”
— Barry Pollard, @Google Chrome Team
Going back to the core idea behind Core Web Vitals metrics, LCP is all about measuring how real-world users experience the initial load of your webpage.
Building a high-end website that offers all the bells and whistles is great. But what if your visitors can’t access your website because of older devices and slower network connections? Remember, complex web design means more HTTP requests and sluggish loading times.
When all else seems to not be working, revisiting the basics in terms of demographics and device type usage will help you and your team to:
"You might have to rethink your website. You need to figure out who’s using your website, what their network conditions are, typical device, etc.”
— Ivailo Hristov, @NitroPack
While lab data is essential for catching pre-production issues, RUM data provides a holistic view of post-production, real-user experiences.
Real User Monitoring (RUM) tools provide insights into how actual users experience your website in real-world scenarios. These tools track and analyze the performance of web pages as experienced by genuine users in terms of varying device capabilities, network connections, and interactions.
When it comes to choosing a RUM data tool, data granularity is key. CrUX data report is a great public source of information, but because of its nature and privacy requirements, it can’t provide a deeper level of data than its current setup.
Apart from relying on your in-house telemetry and data collection, other tools (both paid and free) you can consider include:
In conclusion, for a 360-degree view of performance, your best bet is to use lab data for pre-production optimization and RUM data for post-production insights.
It’s no secret we rely on third-party solutions for a wide range of functionalities, including analytics, ads, widgets, chat systems, social media integration, and more.
These external scripts and resources, while providing essential features or monetization avenues, can also adversely impact your LCP score and, more specifically, hurt it with:
“You (site owners) are very dependent on those services and need to make sure you’re tracking their performance, and if something isn’t performing well, you should be raising an alarm.”
— Ivailo Hristov, @NitroPack
If third-party solutions you’re using are not meeting your performance standards, consider excluding them from your tech stack or reach out to the developers and push toward speedy improvements.
Given the complex nature of LCP, it would be counterproductive to simply list separate optimization techniques.
Instead, we’ll break down the LCP value into four sub-parts which have no overlap or gap between them, and collectively add up to the full LCP time:
Think of TTFB as your baseline for a good LCP score – if TTFB is, for example 1 s, your LCP can’t go lower than 1 s no matter how much you optimize it.
A lower TTFB requires some essentials that ensure a high-performance ecosystem for your website, like:
Ideally, you want your LCP element to start loading at the same time as the first resource loaded by the webpage.
To achieve that, you should use prioritization techniques that tell the browser when exactly you’d like the LCP element to be fetched:
Reducing the time it takes to deliver your resources to the browser is essential for reducing LCP time. A combination of several well-known techniques is helpful here:
To decrease your LCP score effectively, it’s imperative the LCP element renders immediately after it has finished loading.
To ensure no other elements block or delay it from rendering, you can:
Using a demo website and a lab environment, we started out with an LCP score of 13 s, and after applying all the optimizations we discussed above, we were able to bring it down to 1.9 s.
For reference, an LCP score under 2.5 s is considered “Good” and will appear as “Passed” in your Core Web Vitals assessment.
Before LCP optimization: 13 s LCP value
After LCP optimization: 1.9 s LCP value
Largest Contentful Paint considers a whole element for the main candidate. If the images are in the same container, then all the images will be considered the largest content. If not, then the image that appears first (higher up on the page) is typically considered the LCP.
It's important to optimize for both, but focus on the platform where most of your users are coming from. If more users visit your site via mobile, prioritize mobile optimization. Always check your site's analytics to guide your decision.
If your site’s resources don’t have to travel more than a few hundred kilometres across a country, a CDN might be considered optional. One essential detail, however, is that by skipping on a CDN service, all the incoming traffic goes toward your origin server, which typically leads to poor performance in general or even server downtime in some extreme cases. In conclusion, consider enabling the CDN that comes with your hosting for an affordable option.
When using shortened links (typical in paid campaigns) the user usually waits for at least one redirect to happen before they land on your page. This is all counted toward your LCP score. While this is beyond your control, you can make sure the landing page is simple and well-optimized to engage the user as fast as possible.
If you have significant traffic from regions with slower internet connections, implementing performance optimizations like Content Delivery Networks (CDNs) to serve your content faster to those areas is essential. Also, consider simplifying your UX and web design to better cater for your core audience.
The larger the web font files, the more requests your website makes when users try to load it. To speed things up and improve LCP time, employ font loading techniques like subsetting fonts, preloading above-the-fold styles, and using the font-display property.
Typically, a full-size background image wouldn’t be considered an LCP candidate (as of Chrome 88 update). Assuming you’ve already identified the background image is indeed your LCP element on mobile, you can:
Lora has 7+ years of experience developing in-depth, specialized content for SaaS companies in the CEE region. She has sourced and collaborated with subject-matter experts on site speed optimization for WordPress, Core Web Vitals, and the future of web performance. "If you can't explain it to a 7-year-old, you've not researched it well enough" is Lora's guiding principle when publishing professional insight for complex technical topics.