Largest Contentful Paint LCP, and How to Fix it for Your Website?

Load time is crucial for a website; it enhances the user experience and revenue for the website. Recently Google announced that core vital would also be considered as a ranking factor. These core web vitals include Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. This tutorial will discuss what this largest contentful paint is and improve its score for the best performance.

What is the Largest Contentful Paint?

When a user visits your webpage, the time to load the main or largest content is the Largest Contentful Paint(LCP). If the page takes less time to load LCP, then the page is fast else slow. Slow pages disturb the user experience, and SEO is all about a good user experience. When the page loads very fast, that indicates a good user experience, so we’ve to keep the paint of the largest content very fast.

LCP is always calculated for the content above the fold (or content visible on the screen, without scrolling). That means it is essential to optimize above the fold section to solve Largest Contentful Paint.

There may be the following reasons for the LCP of a website.

• Images are not optimized,
• Render Blocking Resources,
• Script Evolution time is high,
• Unused Elements are loading before the content.

Impacts of LCP

According to Google reports, 40% of visitors left the website if it takes more than 3 seconds to load. So it must load all its content within 3 seconds for the best results.

From May 2021, Google will prefer a website with fast speed in its search results. That means that LCP will be a ranking factor, so it’s now more important to focus here.

How to calculate LCP?

You can use Google Speed Insights to test the LCP score of your website. You can also check other web vitals such as CLS and PID. The LCP time must be as low as possible. Google Pagespeed Categories this into

• 0 to 2.5 Seconds – Best Practice,
• 2.5 to 4.0 Seconds – Needs Improvement,
• 4.0 and above – Poor.

This LCP can be optimized from the server end. Let’s understand how to fix the Largest Contentful Paint.

Find Elements that are causing Largest Contentful Paint Issue.

To solve the LCP issue of your website. First, you’ve to find the elements responsible for the issue so that you can take proper action.

Google PageSpeed Insights tool is the best tool for recognizing such elements. Let’s see the test results of a website.

From the PageSpeed Insights results, check the audit report only for the LCP content. In the above results, the tool displays five elements responsible for the LCP. We’ve to fix all the issues.

What some users do, is they fix the opportunity but leave the diagnostic results. These results are significant to understand the actual cause, as the cause of delay in the content. In the above result chaining, critical requests block the content from loading.

In addition, in the above result, we found one LCP element. What if the element is a large-size image? We’ve to fix that too. From here, we understand that we’ve to fix all the suggestions provided in the result.

We may need to fix the server configuration as well as the website design. We’ve discussed below how to resolve these issues.

How to Fix the Largest Contentful Paint issue?

LCP issues may be generated due to theme configuration, server configuration, content delivery issues, etc.

So, first of all, you’ve to check the theme configuration.

• Try to remove if there are any render-blocking resources, javascript, or CSS.
• Serve minified content. Try to use content minified.
• Compress images before uploading. Size of images, deliver NextGen webP, or svg images.
• Reduce the database requests in WordPress by using a cache plugin.
• Use content delivery network CDN.
• Deliver GZip or Brotli compressed contents,
• Use HTTP2 in your server to deliver all the contents parallelly.

Optimize the Website

Use a well-optimized theme: such a theme will not call the various functions again and again. And that leads to low requests to the database resulting in high website performance.

You can check render-blocking of the webpage using the Google PSI tool and eliminate all these using cache plugins or JS, CSS manager in WordPress website. You can call jQuery and other JS in the footer of the website. Try not to use client-side rendering. It would be best if you use the render and serve method. Check the largest contentful paint score after performing this.

• Deliver minified HTML, CSS, or JS files that will take less time to deliver that data. This can achieve by using cache plugins like WP Fastest Cache, Autoptimize Plugin, etc.
• Compress Image: Don’t use a large-size image. You can compress the image before uploading it to the website.
• Deliver the Next-Gen image for your WordPress or Blogger Blog. You can use plugins to deliver the next-gen image for your WordPress website. WebP Converter for Media can help you in delivering that. If you’re on the Blogger platform, try this to deliver webP images.
• Remove render-blocking of JS and CSS files. In a WordPress website, you can do this by
  • Autoptimize Plugin or
  • CSS JS Manager.
• Serve cache data for static content, and define expiry for image, CSS, JS, and fonts; this can be achieved in the .htaccess or configuration file of the server.
• The image resolution(to be loaded on the page) must be according to the space reserved. For example, don’t deliver an image of 1280x720px in a 320x250px block. This can be achieved by using mod_pagespeed or jetpack plugin content delivery or asking the developer to find another solution. This will drastically reduce the largest contentful paint time.

Optimize the Server for LCP

If you’re using cloud hosting or VPS, ensure the server uses Gzip or Brotli compression while delivering the content. Contact the hosting provider if you don’t know what it is and how to do that. Server speed is also essential to fastly paint the largest content.

• Try to reduce the database query by using cache plugins.
• If the website has a user base globally or hosted server and the target user country is different, use a CDN (content delivery network)
• And also, Use the HTTP2 connection to deliver the data parallelly. In this technology, all the content loads parallelly not one by one, which leads to fast visibility of the LCP. If your website is hosted with the lightspeed server, then you should go with HTTP3.
• Use a compression technology like GZIP or Brotli to reduce the data size.

If you’re still getting the Largest Contentful Paint, consider upgrading the website hosting.

Final Words

In this article, we understood Largest Contentful Paint and how to find elements causing LCP issues on your website. And also how to solve all these issues.

After performing all these steps, we assure you that the website will improve drastically. In case of any doubt or query, feel free to ask in the comment section below.