In April 2021, Google announced a new ranking algorithm which is the page experience. In this algorithm, Google will focus entirely on mobile speed. Google’s most important factors are LCP, FID, and CLS.
In Google Search Console you can see your website there showing the LCP score in the core web Vitals, if your LCP score is more than 2.5sec then they will show you the affected pages.
If you want to rank higher in Google, you need to improve this LCP score, today we will discuss in three parts how to fix the LCP issue.
What is LCP Issue(Largest Contentful Paint)
LCP works on how long it takes to load your website content. This is a simple technical definition. I will explain to you using an example.
Suppose there is a web page example.com/page1, Half of the content of this page is taking 3 seconds to load on your mobile, the rest is taking 5 seconds to load and the rest is taking 7 seconds to load and the entire content is loading It is taking 9 seconds. So now you wonder what the LCP score of this page will be.
So now the question is why is this page very slow in loading?
If you are using any of the images or large elements on this page, then the time it takes to load that image is your LCP score.
According to Google if your page is loading under 2.5sec then your LCP score is good or if your LCP score is 4 sec then you will have to work on the improvement but if your LCP score is high than 4sec then google will show the errors.
What Are Core Web Vitals?
Core Web Vitals are a set of metrics that identify and measure the factors that influence the user experience in the real world.
In the Core Web Vitals, Google currently measures only three metrics: LCP, FID, and CLS, although this will change in the future.
- LCP stands for Largest Contentful Paint.
- FID stands for First Input Delay
- CLS stands for Cumulative Layout Shift.
Because of the erroneous LCP issue, we will solely discuss LCP in this post. LCP is linked to the longer than 4s (Desktop) or (Mobile) issue.
How To Fix Largest Contentful Paint Issue: Longer Than 4s(Mobile) and (Desktop)
Step 1: How to Fix LCP Issue
1. Some Important Factors you should know about LCP
LCP is not a score for your entire website, every page of your website has a different LCP score and when measuring LCP, they do not wait for the entire web page to appear, but the time after the opening of the larger element of that page is counted for LCP score.
If your website has long content then it will not load on a time hole content. It will hold half the content which is called Above The Fold Content.
If you have any big element under this Above The Fold Content then the loading time of this big element is your LCP score not counting whole content.
The LCP score is different for mobile and desktop devices, Google only calculates LCP scores via mobile devices. So you don’t have to work on a desktop, just improve your LCP score on mobile, it automatically improves from your desktop too.
Now we will discuss how to improve your LCP score in less than 2.5 seconds. If you type on Google how to fix LCP score then you can see different results telling about :
- Upgrading your Hosting.
- Use CDN
- Minify CSS and HTML
- Use Lazy Load
So yes hosting is an important part. If your hosting server is very slow, it will affect your website too. Buy hosting from HostGator, Bluehost, Siteground server, these companies provide fast and reliable services.
All these suggestions are very important to improve your LCP score and I know that you have already worked on all these suggestions but still your LCP score is not fixed.
Today I will tell you some other ways to fix this issue.
2. Fix Your LCP Score Using Another Important Ways
To improve your LCP score, first, open the content of your website on mobile and see what is in the top element.
If there is a slide show, animation, or video, all this functionality uses more images and data which will definitely affect your LCP score.
Keep your image size small. If you don’t need an image in your content, don’t add pictures or optimize your images if your content is based on images.
Convert your website images to WebP Format, this will reduce the size of your image and maintain high-quality images. You can use webp converter for media plugin in WordPress it will convert all your images to small size.
Now you work on all these suggestions and you are not using any animation, video, and images, but you still have a problem which is your text font.
We use different and distinct fonts to view our content, but any users who do not use this function on their mobile device and it takes too much time to download your content so it affects your LCP.
If your user is not using any font, but his mobile device has some other default font. So then the solution is to install a plugin Swap Google Fonts Display. This plugin will help your user to open text in their default mobile font.
Step 2 : How to Fix LCP Issue
When the user wants to visit your website, he types your website URL in the browser then after this browser will send a request to your server or if that page is on your server then your server will start sharing files.
The browser will read all your HTML files. Now, what is included in your HTML file image, CSS, javascript, etc?
The browser will download all the CSS files in parallel but the browser will first download all the JavaScript files and then work on execution and then move to the next line. It is taking too long and it will block the render.
Now how to improve the LCP score for this Render?
1. Keep DOM Small :
Try to limit your page elements and if you do not need a larger element then do not add a larger element. This larger element takes a lot of time to load the page.
2. Do Not Put JavaScript on Top:
This does not mean that you put your JavaScript code down, you do not need to work on it.
Use Deferred Attribute JavaScript This script does not block rendering. Now how to use this Deferred. We have both ways free or paid.
If you have a WordPress website then get a WP-Rocket plugin it’s a premium plugin. If you have a budget you can buy this plugin or I will tell you another free plugin also.
When you install this plugin under settings you can click on the wp-rocket option and click on file optimization.
After clicking on file optimization scrawl, your page is down in last, and you can see there Load JavaScript Deferred check that box and save.
Now if you want to add a free plugin then install the Async JavaScript plugin. It’s a totally free plugin using this plugin you can add Deferred JavaScript code and block render.
After installing this plugin in the settings you can see it by clicking on the plugin name, then clicking on it. In setting click on enable Async JavaScript then click on Apply Defer and you are all done.
3. Next LCP Factors
After removing all the render-blocking resources, your next work to improve LCP score is HTML, CSS, JavaScript minification.
Now you can see this HTML code from my other website that this code is for humans to understand how it works.
You can see how much space and code there is. This will increase the code size and reduce the speed of your website.
Now, look at this website’s source code. This is a very shortcode and the computer can read this code easily.
I am using WP-Rocket to reduce page code size and increase page speed. This plugin minimizes all CSS, JavaScript, Images, etc.
Will remove all this space between the minimum codes or keep only what is useful. For this, you can go with free or paid plugins.
As I mentioned earlier you can use WP-Rocket or Async JavaScript plugin for HTML, CSS, JavaScript code.
4. Image Optimization
We work on rendering blocked resources, CSS, HTML, JavaScript. Now we will work on images. Images are the big reason to slow down your LCP score.
How image will affect your LCP score :
- Not optimized
- Wrong format
- Not in correct size
You can convert all images in Webp format to reduce the image size. The Webp format converts your image URL into a Webp URL and reduces image size but increases image quality.
After installing the Webp format plugin you can check from these images all settings and click on save changes.
Then slide down a bit and you can see that this regenerate images option clicks force to convert all images and regenerate all. All of you have done here now, all your images are converted to web format.
So working on this way you can minify your HTML, CSS, JavaScript, and Images.
Step 3: How to fix LCP Issue
In the last two parts we work on how to reduce the LCP score using LCP score logic, webpage planning, font-display setup, minification, deferred, image optimization and now we will see some other important ways to fix the LCP score.
Friends, you know when you check your website speed, LCP, CLS, and FID in page speed insights. But Google does not use this score in its core web vitals.
Yes, it’s absolutely correct.
Then how will Google show this LCP score in core web vitals?
When you check the speed of your website using a tool and page speed insights it will show you some data about your website but it is not completely true. Because ultimately it is a tool.
This is a free tool that will show you a simple result. But Google shows its LCP score in core web vitals using live user experience.
How users interact with your website pages when they click on certain links, how it works on a live experience. Google notes all these events and shows them in the core web vitals.
Now how can you check all these life and real experience users on your website and how to find a solution for it.
Go to your google analytics account and then click on Audience >> mobile >> devices then set 30 days data.
Now from here, you can check the mobile device and which mobile type uses more time, then check your website on that device and improve your website.
Advertisement
Ads on your website also reduce the speed of your website. Google used JavaScript in their ads, but keep in mind that do not use a lazy load for JavaScript, if you use a lazy load then your Ads will also open slower.
Sometime Data Will Not Show in Core Web Vitals
When you open Google Search Console then in core web vitals google will not show any data about your website.
The reason behind this is that you have very little traffic and if you have a new blog, Google may not be able to load data in core web vitals.
Don’t worry about it, after some time the data will appear in the search console very soon. This is not an error.
Conclusion :
Google is working on its platform every day to update the functionality to get better results for the users out there.
Recently in 2021, Google launched its main web detail update to get better results on mobile pages. So if you will read this blog and implement all the points on your website then it will definitely work on your site.
If something is not working properly on your website then you can ask me here I will help you to solve your LCP problem.
Comments are closed, but trackbacks and pingbacks are open.