How To Improve Largest Contentful Paint (LCP) Score — Digitally Groww

7 min readMay 16, 2021

Website’s most important and hard to fix part is core web vitals. Core web vitals has 3 parts and one of them is Largest Contentful Paint (LCP). If your LCP score is high then it affects your page loading speed and also Google not push your website rank on search engine.

What is Largest Contentful Paint (LCP) score

LCP score means how much time take to load your page large element.

For example — After opening a page on 3-second page load text and a small image. After that in 5 second its load the big image and after 7 seconds more content & at 9 seconds page totally open.

So here this page big element is the big image and this page LCP sore is 5. That means the LCP score measured by the large content of a page takes time to load. If something bigger than the image then the element loading time is the LCP score of this page. Also, not only image video and a text block can be LCP score of a page.

Website has no LCP score only pages have this score and it's different on different pages.

According to Google guidelines 2.5 seconds or less than 2.5 seconds, LCP score is good. if it’s more than 2.5 seconds but under 4 seconds then google shows you to improve it or more than 4 seconds google gives failed tag.

Above the fold content- The loaded and visible content of the webpage is called above the fold content.

You can see that the full web page is long. Above the fold content has image(1) but after that also an image(2) so here you think the big image load score is LCP score but no. The Score is the loading time of Image(1) because it’s totally visible and it’s the big content.

So a webpage above the fold content big element loading score is the page LCP score.

A webpage can be visited on desktop and mobile and its shows different so desktop & mobile scores are different. Google uses only mobile LCP score to generate core web vitals. So you need to improve your webpage’s Largest Contentful Paint score on mobile.

How to improve LCP score

Method 1

First open the webpage on mobile and analyze what is the big element in Above the fold content.

It should be a slide show, Animation, Video, Image, Large block text.

How to fix this

First plan it how you can skip showing big element on above the fold content.

Slideshow-In the slideshow, it has images, JavaScript to its a big element so its can down your webpage score.

Animation — In animation there are lots of images and JavaScript so it also can be a big element.

Video — Video is also a big element because it size in MB so its takes time to load.

Image — Large image can be a big element. So you need to optimize the image and reduce image size & always try to use WebP format images. If you cant optimize images you can use plugins to optimize your webpage images. And try to image size smaller than text block.

Solution- So try to don’t use any slideshow, Animation, Video, and image on Above the fold content or place it below the Above the fold content. . So visitors see the element and it’s not shown on above the fold content. Also, don’t use or skip javascript on above the fold content because it takes time to download

Text- If you use only text on Above the fold content. Then its should be an issue to increase the LCP score Because of Fonts. You choose a beautiful font to impress visitors but this font not available on users’ devices. when visitors open your page its downloads HTML, CSS. Images and also Fonts. Without download, the font visitors can’t see the texts so it increases your page LCP score.

Solution- Visitors device has a text font so when visitors open your page they can see the text according to their device font. And when your font is downloaded it’s replaced with your font. So your page load in less time.

Solution 1

For other website builder platforms Find where your CSS file declared fonts just create a line and add the red box code.

Solution 2

For WordPress just install one plugin and activate it. This plugin has no setting, no option & no user interface. If any font adds through JavaScript then this plugin does not work on this font.

Method 2

How to load your website

When visitors enter your URL on the browser, the browser sends a request to your server and the server sends the files. First Browser read your page HTML code and start executing. The browser read your page HTML code upside to downside.

What in HTML code

When CSS and image files came browser read all files and codes(HTML+ CSS+ Image files)parallelly.

The main problem is JavaScript. Browser first download JavaScript executes the script then go for another line. It’s called Render blocking. That’s why previously told you don’t use JavaScript on above the fold content.

Solution 1- Fix Render Blocking

Keep DOM small- Keep your page elements limited
Use Defer attribute with JavaScript or Async

What is Async

If you use the Async attribute then JavaScript download and HTML code reading parallelly. But when the download completes its starts executed immediately. So it’s again blocking your render. So don’t use Async.

What is Defer

If you use Defer attribute then JavaScript downloads and read HTML code parallelly but it executes when the browser parsing all HTML code. So always use Defer Attribute.

If your website is custom coded then add Defer tag on your all JavaScript line.

For WordPress

You can use any paid or free plugin

Paid plugin- WP rocket

Settings- WP rocket- File optimization- under JavaScript Files option enable Load JavaScript deferred and save.

Free plugin- Async JavaScript

Settings- Async JavaScript-under Enable async JavaScript tab — enable async JavaScript- under quick setting tab click on apply defer and save the setting.

Solution 2- Minification

HTML, CSS & JavaScript minification can help to improve LCP score.

People write HTML, CSS & JavaScript very clearly and design it line by line for future editing, including any code or fix error.

But many spaces, the design not valid for the browser. A browser can easily read these codes if it's like this.

So minification removed all the design, spaces, and HTML code size is reduced and its help to Improve LCP score.

Cache plugin

Most of the people use a cache plugin to improve page speed. So you check this your cache plugin enables HTML, CSS and JavaScript minify option if not then you did it manually.

Solution 3-Optimize images

Images take more time to load. Most of the page’s big elements are image and image affects LCP score. If you did everything I said previously but not optimize your images then your LCP score remains the same.

Issus with images

Not optimize-Image size is BIg in MB its take time to load
Wrong Format-PNG, JPG Format images are big in size. So try to Use WebP format images. its size is small google recommended format for a website. So use the image optimization Plugin to convert your PNG, Jpg format images to WebP format.
Not in the proper size-If your image Length and height are big then it also affects the score.

Some common solutions

Upgrade Hosting — Yes its helps to improve website speed it’s the best and easy way. But everyone not migrates their hosting to cloud hosting because it’s costly.
Use CDN(Content Delivery Network)

Originally published at https://digitallygroww.com.