Recently 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 you 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 LCP.
What is LCP (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 then 4sec then google error this page will show.
Part 1: How to fix LCP
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 a 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 count 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 already work on all these suggestions but still your LCP score is not fixed.
Today I will tell you some other ways to fix this issue.
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.
Part 2 : How to Fix LCP
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 .
Now how to improve LCP score for this Render?
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.
When you install this plugin under settings you can click on wp-rocket option and click on file optimization.
Next LCP Factors
Now you can see this HTML code from my other website that this code is for human 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 source code. This is very short code and the computer can read this code easily.
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.
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 webp format plugin you can check from this 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.
Part 3: How to fix LCP
In the last two parts we work on how to reduce 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 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 in the core web vitals.
Now how can you check all this live 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.
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 any error.