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 taken to load the main content or largest content is 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 a page loads very fast, that indicates a good user experience, so that 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 ranking factors, 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 kinds of elements responsible for the LCP. We’ve to fix all the issues.
What some users do, they fix the opportunity but leave the results of the diagnostic. These results are significant to understand the actual cause, as the cause of delay for the content. In the above result chaining, critical requests are blocking 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.
- 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 result 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. In the Blogger blog, you can call the jquery and other JS in the footer. Try not to use the client-side rendering. It would be best if you use render and serve the 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 WP fastest Cache, Autoptimize Plugin.
- 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, define expiry for image, CSS, JS, fonts; this can be achieved in the .htaccess or configuration file of the server.
- The image resolution(that to be delivered) must be according to the space reserved by it. 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. This will drastically reduce the largest contentful paint time.
Optimize the Server for LCP
If you’re using cloud hosting or VPS, make sure the server uses Gzip or Brotli compression while delivering the content. If you don’t know what it is and how to do that, contact the hosting provider. 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 are different, use a CDN (content delivery network)
- And also, Use the HTTP2 connection to deliver the data parallelly. In this technology, all the content load parallelly not one by one, that 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 that will reduce the size of data.
If still, you’re getting the Largest Contentful Paint, then consider upgrading the website hosting.
In this article, we understood what Largest Contentful Paint is and how to find elements causing LCP issues to 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 provided below.