What is Largest Contentful Paint LCP

Largest Contentful Paint (LCP) is user-centric metric for measuring perceived load speed. From the initial page load start time to the point when the page’s main content has likely loaded. Fast Largest Contentful Paint loading assures the user that the page is useful and loads reasonably fast.

Perceived load speed: how quickly a page can load and render all of its visual elements to the screen.

Video Tutorial by RankYa Showing What Largest Contentful Paint Is

What is Good LCP Score?

• Good <= 2.5 seconds
• Needs improvement 2.5 seconds till 4 seconds
• Poor > 4 seconds

Types of HTML Elements 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)
• HTML Block-level elements containing text nodes or other inline-level text elements children

How to Fix or Optimize LCP Issues

Just imagine that your entire web page loaded within 2.5 seconds? Then, this will automatically mean that your website will be considered as having Google Largest Contentful Paint Score, hence rank higher in Google.

Having said that, most business websites (including eCommerce Stores) using Premium Themes or Content Management Systems may not be able to load the entire web page with its full functionality within 2.5 seconds.

Although you could resize and compress images (either using many Content Management Specific plugins or various open source image compression software). As you saw in the above example: largest contentful paint can be many different HTML elements.

Best Way to Optimize for Good LCP Score

You should evaluate your entire website functionality and optimize its overall loading performance or else other techniques are simply a band-aid solution fixing LCP issues. Here’s some of the optimization areas that will ensure better loading of your entire website so that it provides better user experience is geared towards Page Experience Update

• Reduce your page size: best practice is less than 500KB for a page and all its resources
• Limit the number of page resources to 50 for best performance on mobile
• Reduce server response times
• Use HTTP/2 Protocol (most modern servers already use HTTP/2 Protocol, if yours isn’t then, consider upgrading)
• Remove un-needed JavaScript (or group them to reduce HTTP Requests)
• Remove un-needed Cascading Style Sheet (CSS) rules (or group them to reduce HTTP Requests)
• Separate Critical Path CSS Rules
• Optimize images for Page Experience
• Asynchronously Load or Defer JavaScript
• Re-evaluate the use of External Custom Fonts
• Use speculative optimization techniques

Although there is more optimization techniques that one implement depending on the Content Management System, if you optimize the above points, then, your website is assured for getting top Google rankings.

How Will Page Experience Affect Google Rankings

Once the changes mentioned in Google’s Page Experience update is in full effect (expected time is August 2021), page experience algorithm will join the hundreds of other ranking signals that Google considers when generating search results.

More Resources

• Web Vitals Largest Contentful Paint (LCP)
• How to Fix LCP Issues
• RankYa YouTube channel also maintains Page Experience related how to guides Page Experience Optimization + Core Web Vitals