How To Reduce LCP Score?

SEO Duke

Senior Member
Jr. VIP
Joined
Jul 19, 2021
Messages
1,070
Reaction score
271
Hello,
I need some help on reducing the LCP timing, Current its showing 5.3 sec. GSC is also showing 99 URLs for imorovement in Core web vitals section.
Can anyone help me by giving any tips or resource link? from where I can find out a way to reduce LCP.
 
The LCP of a website is determined by several factors.
First of all, LCP is basically how long it takes the browser to load the main content of the Webpage after getting the first byte from the server.

Which means it could depend on:

The size of the html itself (ie how many DOM elements are there)
The quantity of external resources in the <head> section (css, js etc).
The quantity and size of images

Basically, you need to dive deeper into your page content and see if there is a bottle neck.

1 thing I like to do is always to compress images and also reduce the physical resolution of the image to match the space they will be displayed in.

Secondly, use as few external css and js files as possible. Libraries/Frameworks like Reactjs and Angular will actually combine each file to 1 huge file during deployment. This is preferable because a single 100kb file is much much better than 100 1kb files (This has to do with the overhead that comes with HTTPS and TCP per request). Similar to how copying 1000 1kb files to a flash drive is much more slower than copying a single 1 mb file.

Those are the ideas I can give offhand without analyzing the website myself
 
The problem is straightforward, but the solution may not be. What you are looking to do is to reduce “critical assets”/ stuffs loading with the page. I understand this is not that easy, specially if you are using something like wordpress.

My suggestion would be to have more control over the software you are using. It could be for example laravel, nextjs or even rails or something.

Template based sites will only get you so far.
 
The problem is straightforward, but the solution may not be. What you are looking to do is to reduce “critical assets”/ stuffs loading with the page. I understand this is not that easy, specially if you are using something like wordpress.

My suggestion would be to have more control over the software you are using. It could be for example laravel, nextjs or even rails or something.

Template based sites will only get you so far.
The LCP of a website is determined by several factors.
First of all, LCP is basically how long it takes the browser to load the main content of the Webpage after getting the first byte from the server.

Which means it could depend on:

The size of the html itself (ie how many DOM elements are there)
The quantity of external resources in the <head> section (css, js etc).
The quantity and size of images

Basically, you need to dive deeper into your page content and see if there is a bottle neck.

1 thing I like to do is always to compress images and also reduce the physical resolution of the image to match the space they will be displayed in.

Secondly, use as few external css and js files as possible. Libraries/Frameworks like Reactjs and Angular will actually combine each file to 1 huge file during deployment. This is preferable because a single 100kb file is much much better than 100 1kb files (This has to do with the overhead that comes with HTTPS and TCP per request). Similar to how copying 1000 1kb files to a flash drive is much more slower than copying a single 1 mb file.

Those are the ideas I can give offhand without analyzing the website myself
I am using WordPress.
By the way, can I use AMP for this issue? One of my mates suggest me this. And If I run AMP, Can I monetize via ads? As ads are normally in JavaScript.
 
By the way, can I use AMP for this issue? One of my mates suggest me this. And If I run AMP, Can I monetize via ads? As ads are normally in JavaScript.
I cannot say for certain because have never used AMP before.

But I hear it definitely solves issues like this. I also hear it does not work well with Adsense auto placement Ads
 
I am using WordPress.
By the way, can I use AMP for this issue? One of my mates suggest me this. And If I run AMP, Can I monetize via ads? As ads are normally in JavaScript.
I don’t think adding anything will help you much.

If you have to use wordpress, make a completely custom wp theme, and try to not load any script/stylesheet that is not needed for the initial load (you can always load the other ones after the page has rendered). A complete custom theme isn’t that hard to make to be honest. Beside that, invest in a better server that does the processing quickly. That should help a little I think.
 
Secondly, use as few external css and js files as possible. Libraries/Frameworks like Reactjs and Angular will actually combine each file to 1 huge file during deployment. This is preferable because a single 100kb file is much much better than 100 1kb files (This has to do with the overhead that comes with HTTPS and TCP per request). Similar to how copying 1000 1kb files to a flash drive is much more slower than copying a single 1 mb file.
I'm not getting this point. Do you have any source guide that I may watch to implement this method?
 
I'm not getting this point. Do you have any source guide that I may watch to implement this method?
Not with WordPress.
I assumed it was a custom coded Website. But with WordPress, you can just use plugins to do most of these things
 
Not with WordPress.
I assumed it was a custom coded Website. But with WordPress, you can just use plugins to do most of these things
Right now I'm using both Auto Optimize plugin and wp rocket. Is that okay or please suggest me a good plugin to reduce LCP :(
 
In case this question is still relevant: LCP (Largest Contentful paint) is the load time of the largest element on a page. In most cases, especially for WordPress sites, the largest element on a page is the image.

So to reduce the LCP score, in most cases, you need to optimize images. You can use an image optimization plugin such as ShortPixel Image Optimizer. For those who use WP Rocket as a caching plugin, the best option is Imagify. WP Rocket and Imagify are fully compatible and work perfectly together.

Hope this helps.
 
Last edited:
You can use tools like Google PageSpeed Insights to check your server response time and take steps to optimize it.
 
To reduce LCP (Largest Contentful Paint), optimize images (use formats like WebP), implement lazy loading, minimize JavaScript execution, enable server-side caching, use a CDN for faster asset delivery, and optimize CSS. Tools like Google PageSpeed Insights and Lighthouse provide specific recommendations for improving Core Web Vitals.
 
Back
Top