How To Fix LCP Score?

The hardest part of the Google page experience is to optimize Core Web Vital. And Core Web Vital has three parts LCP(Largest Contentful Paint) is the first one. So In this article, I will focus on the practical meaning of the LCP and How to fix the error of LCP. In this article, I will cover all the techniques which help in rectifying the LCP score. Without using an optimization Plugin or Cashin.

This image shows three different types of LCP score.

What is LCP?   

The full form of LCP is Largest Contentful Paint. It helps in measuring the score of the webpage, which means how much time a webpage takes to show most of the content. It is the most simple definition of LCP. Now Comes to a specific definition, Suppose there is a website example.com/page1

This image show in 3 second this much content appears on your screen.

If you open this website on your mobile page in the first 3 seconds this much content appears on your screen.

This image show in 5 seconds this much content appears on your screen.

And after 5 seconds this much content appears on your screen

This Image show in 7 seconds this much content appears on your screen.

After 7 seconds this much content appears on your screen

This image show in 9 seconds 100% of content appears on your screen.

And in 9 seconds 100% of content appears on your screen

What will be the LCP score of this webpage? What is the largest element on this page?

This Image show the largest element of the page .

So the largest element on this page is this image right

The time it takes for this image to appear on the webpage is the LCP score of that page. If there is another element larger than this image that arrives on that page while the entire page is loaded, then the time it takes for that element to appear on the webpage is the LCP score of that page. 

The largest element can be an image, video, or a block of text. According to Google guidelines a score of 2.5 seconds or less is good and above 4 seconds, gets the tag of failure

LCP is not a score of your entire website every single page in your website has a different LCP score. If you are measuring the LCP score of your website please don’t wait for the entire website to load. But the time taken to open the largest element of that page is the actual LCP score. And the largest element could be anything; it can be an image, video, or block of any text.

If your website has long content then it will not load on time hole content. It will load only half of the content which is called above-the-fold content. 

If you have any largest element in above the fold content, Then the time takes to load that largest element is the LCP score of your website

The LCP score of your website is different on mobile and desktop both, But Google only calculates the LCP score of the mobile device. So you don’t have to work on a desktop, just improve your LCP score via mobile devices. It will automatically improve the LCP score of your desktop 

Now the question arises, How to bring LCP Score below 2.5 seconds?

If you normally Google, How to reduce LCP score you will get some common suggestions like 

  1. Upgrade Hosting: It is a right suggestion, Hosting improves the performance of your website. Good hosting can increase the speed of your website without any hard work but budget is the factor instantly no one can switch on Google Cloud . Many are there who give suggestion to use CDN, Minify CSS and HTML, Enable Cashing. And I’m sure that you have already try all these technique before. 

All these techniques are valid, but in this article, my suggestion is different from the very beginning. I have only told the largest element above the fold content should be less than 2.5 seconds and above the fold content is the top part of your website. If you want to reduce the LCP score of any web page, first open the web page on your mobile and check which element is there on the top page. We have to make this element in such a way that it can load quickly, and automatically your LCP score will reduce. 

If there is any slideshow, animated videos, and unoptimized images present in above the fold content, then it will take time to download because of the presence of Javascript, images in the file So this will increase the loading time of your webpage, So please do not the use of slideshow, animation, hosted video, unoptimized image, and unoptimized text in above the fold content. If you want to use all this stuff in your webpage, use it under the above the fold content or you can also optimize your web page by 

  1. Keeping your Image Size Small
  2. Convert your website image to WebP Format
  3. Use different and distinct fonts
  4. Instal plugin Swap Google Fonts Display
  5. Use Deferred Attribute Javascript
  6. Instal Plugin WP-Rocket to reduce Page Code Size

You can also read about: Hostinger: The best hosting for 2021

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s