Lighthouse introduced Largest Contentful Paint as one of the core performance metrics in 2020.
Later on, Google announced LCP as an important ranking factor and made it a part of Core Web Vitals. As a Core Web Vital metric, LCP accounts for 25% of the Performance Score, which makes it one of the most important metrics to optimize.
In this guide, we take a thorough look at Largest Contentful Paint and also learn ways to optimize the best LCP scores.
What is the Largest Contentful Paint?
LCP measures how long it takes for a web page to render the ‘largest content element’ available on the page. Here, the ‘largest’ content could be anything including:
A “content element” is any HTML element, such as:
- An image element
- A video element
- SVG elements
- An element with the background image loaded via the URL function
- <h1>, <h2>, <div>, <ul>, <table> or other block-level elements
According to Google,
“LCP is an important user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page’s main content has likely loaded – a fast LCP helps reassure the user that the page is useful.”
First Contentful Paint vs. Largest Contentful Paint:
We recently published a post of ‘First Contentful Paint,’ and some of you may wonder how that is different from the ‘Largest Contentful Paint.’ So, here’s an easy explanation for the same:
- First Contentful Paint: FCP measures how long a page takes from the initial load to the first rendered content displaying on the screen.
- Largest Contentful Paint: LCP measures the render time of the largest image or text block visible in the viewport, compared to when the page first started loading.
What is a good LCP score?
According to Google’s guidelines, a good LCP score should be less than 2.5 seconds. This ensures good UX.
LCP thresholds are, as follows:
- Good: LCP of 1200 milliseconds or less (nothing to do here)
- Needs improvement: LCP between 1200 and 2400 milliseconds.
- Poor = LCP higher than 2400 milliseconds.
How to measure Largest Contentful Paint Score?
Webmasters or publishers can perform a Largest Contentful Paint test by using the following tools:
Since LCP is a metric approved by Google, we can easily find LCP score in all these tools.
How To Improve First Contentful Paint (FCP) time:
Now that we’ve understood what FCP is and why is it important, let’s take a look and how one can improve the FCP timing:
Eliminate Render Blocking Resources:
Render blocking resources are the files that on a website that must render. These may include fonts, CSS files, JavaScript, and HTML. These files are called ‘render blocking’ because they take priority over other elements of the page (for example, the images, text, or other user-facing content).
This delay creates a sudden increase in LCP since render blocking files are usually large in size, and they don’t even contain site content.
LCP time can be reduced if you remove render resources from the critical rendering path, defer non-critical resources, or remove unnecessary JS.
Remove Unnecessary CSS
If you’ve files in your stylesheets that aren’t being used, but take significant speed, there’s no point keeping them. Hence, any unused or old code should be removed so that it doesn’t impact the loading time of your site.
Minify HTML, JavaScript, and CSS
Minification of HTML, JavaScript, and CSS can significantly reduce the LCP time of your website. Minification is removing all extra characters such as spaces from your site’s CSS, HTML, and JavaScript files.
While spacing helps readability, browsers don’t need them. These spaces in fact take up bytes and minimizing them would decrease page size and improve First contentful paint timing.
Optimize image size
Always use images of right sizing.You can use an image optimizer plugin like SSmush or Hummingbird to reduce image size. Reducing size avoids overloading, which can generate a high LCP. You can also use an image CDN to reduce LCP time.
Choose a good hosting service
Your hosting service also impacts pages’ loading time. Thus, try a good hosting provider that offers an adequate infrastructure for your site’s size and volume of access.
In Closing:
Google considers Largest Contentful Paint to be a relevant part of Core Web Vitals. Hence it is a vital parameter to be evaluated and sites must achieve a good score in it.
Since LCP is related to page loading time, it directly influences how Google ranks a site on the results page.
User experience is a fundamental parameter for sites to be found on the web. That’s why it’s not enough to have attractive products, good UX, or quality content.
Good LCP score is not only favorable for the user but also ensures that Google will rank the content well.
Shubham is a digital marketer with rich experience working in the advertisement technology industry. He has vast experience in the programmatic industry, driving business strategy and scaling functions including but not limited to growth and marketing, Operations, process optimization, and Sales.
