Largest Contentful Paint (LCP) is one of Google's Core Web Vitals (CWVs). LCP is an important user-centric measurement of how fast the largest image or text block renders on a website page, according to Web.dev.
How is LCP measured?
LCP is measured with several key elements and contributes to strong search engine optimization and higher organic Google rankings. Typical elements that are measured in LCP are images, video poster images, background images, and block-level text elements like paragraph tags.
Google states the following specific elements are considered for Largest Contentful Paint:
- <img> elements
- <image> elements inside an <svg> element
- <video> elements (the poster image is used)
- An element with a background image loaded via the url() function (as opposed to a CSS gradient)
- Block-level elements containing text nodes or other inline-level text elements children.
It is measured in milliseconds.
What is a good LCP score?
Like most user-centric Core Web Vitals, a good LCP indicates a high-quality user experience. Google wants the largest image or text block to render in less than 2.5 seconds, ensuring your user stays on site and immediately views the desired content.
The lower your LCP, the faster users see essential content.
- Great = less than 2.5 seconds
- Needs improvement = between 2.6 and 4.0 seconds
- Poor = more than 4.0 seconds
Publishers should strive for the fastest loading page speed possible, which actively contributes to higher organic Google rankings and strong SEO.
What contributes to a poor LCP score?
A poor LCP correlates alongside with other key user behavior metrics like bounce rates, engagement rates, pageviews per session, and time on site.
The most common causes of a poor LCP are:
- Slow server response times
- Slow resource load times
- Client-side rendering
Slow server response time
A slow response time means it takes too long for the browser to receive content from the server, creating a slow page load experience for the user. A faster server improves the load speed of your entire site and contributes to a good LCP.
Use Time to First Byte (TTFB) to measure server response times, and improve your server’s using the suggestions below:
- Optimize your server
- Use local CDNs
- Cache images, text, and more
- Serve HTML pages cache-first
- Establish third-party connections early
For CSS, ensure that only the minimal amount is blocking the render.
Slow resource load times
Ensure files are optimized and load as fast as possible.
- Optimize and compress heavy images
- Preload important resources
- Compress text
- Use adaptive serving to deliver different assets based on a user’s network connection
- Use browser caching
To combat this:
- Use server-side rendering (while keeping servers optimized) instead of client-side
How can I measure LCP?
To measure when the largest content element was rendered, Google determines which element was the largest by looking at the entire load process, and records the timestamp when it is rendered.
How can I improve LCP for my website?
Once you’ve pulled your report, improve your LCP by limiting the amount of content you display at the top of your web page to the most critical information.
Overall, there are four (4) simple ways to improve LCP on your website.
Use adaptive serving
Depending on your user’s browser and location, you can use different variations of the same resource. For example, on mobile, you could use static images in place of videos.
Speed up resource load times
Files should load as quickly as possible. Optimizing and compressing images, preloading important resources, and compressing text helps resources load as fast as possible.
Preload important resources
How does LCP affect my website SEO?
Google values fast sites and page speed is already a well-known attribute in its ranking algorithm. Slow sites lead to high bounce rates and user frustration, which will inevitably bring your site down in Google rankings.
For publishers looking to diversify traffic acquisition, organic Google search is an important channel to consistently optimize.
A poor LCP will negatively impact search engine optimization:
- Lower organic search traffic
- Difficulty ranking on page 1 for desired keywords and terms
- Decreased ad revenue due to fewer impressions, page views, and clicks
- High bounce rates
Google Core Web Vitals and SEO go hand-in-hand, and it’s important to pay attention to the organic Google ranking effects.
Where can I find more information?
For more information to help improve your LCP score, visit the web.dev site.
To further understand WebCore Vitals and what they mean for Sortable publishers’ Google rankings, read more about other Core Web Vitals: