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
- Render-blocking JavaScript and CSS
- 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
Render-blocking JavaScript and CSS
Scripts and stylesheets are both render blocking assets that delay a page load, consequently negatively affecting your LCP and Google ranking. Always render block for non-critical JavaScript and CSS to decrease page load speed and decrease LCP.
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
Client-side rendering
Many websites use client-side JavaScript logic to directly render pages in the user browser. Agile frameworks like React, Angular, and Vue make it easier to build single-page applications that handle web pages entirely on the user-side, not the server.
However, if your site mostly renders on the user side, it can negatively affect your LCP if a massive JavaScript bundle is used. Without effective optimizations, the user might not see any content until all critical JavaScript has loaded.
To combat this:
- Minimize your use of critical JavaScript
- Use server-side rendering (while keeping servers optimized) instead of client-side
- Use pre-rendering, which generates static HTML files that are shipped alongside JavaScript bundles to reduce LCP
How can I measure and improve LCP for my website?
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.
You can measure your LCP score in more detail using your Google Search Console to examine each web property.
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.
Reduce third-party code impact
Especially when working with multiple ad tech vendors, ensure they are using asynchronous technology and not dragging down page speed, costing you not only revenue but high organic Google rankings. Regularly assess and optimize third-party code, analytics, and tags.
Reduce JavaScript execution time
Only render the minimal code needed and remove any heavy styling.
Minimize main thread work
Reduce styling and layout complexities. Moving non-critical operations to a separate worker thread can also free up the main thread to improve LCP.
Reduce request counts and transfer sizes
Again, ensure the user is only getting the most critical, important information on the first load. Keep request counts low and transfer sizes small.
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.