How to Reduce Largest Contentful Paint (LCP) With NitroPack

Did you know that according to the latest Chrome User Experience Report (CrUX), Largest Contentful Paint (LCP) is the Core Web Vitals metric that websites struggle with the most? 

As it turns out, only 61.3% of all sites meet the “good” LCP threshold, compared to much higher rates for Interaction to Next Paint (80.6%) and Cumulative Layout Shift (76.6%).

But why do website owners have hard times optimizing their site’s LCP? 

Read on to find out! 

What makes LCP so hard to optimize? 

The reason why LCP is such a challenging metric is that there are a lot of moving parts when it comes to its optimization. 

Fortunately, Philip Walton, Developer Relations Engineer at Google, recently uploaded a video where he explains in great detail everything a website owner or developer should know about LCP:

What’s more, in his video, he shares his 4-steps recipe for optimizing the metric and reaching the “good” LCP threshold. 

Here’s a summary of his recipe:

1. Ensure the LCP resource starts loading as early as possible.
2. Ensure the LCP element can render as soon as its resource finishes loading.
3. Reduce the load time of the LCP resource as much as you can without sacrificing quality.
4. Deliver the initial HTML document as fast as possible.

As you will learn from the video, although it’s a short 4-steps process, each stage requires you to apply a bunch of optimization techniques. 

Furthermore, completing just one of the steps might not greatly impact your LCP score. That’s why optimizing the metric is so tricky, and you should apply a holistic approach which means implementing optimization across the board.

But what if you could reach the “good” LCP threshold automatically? 

NitroPack: The Automatic Solution for Optimizing LCP

It’s no surprise that LCP is the hardest metric to optimize for. 

Going deeper into Phil Walton’s recipe, I counted 12 different techniques you need to apply to reach the “good” LCP threshold.

From a developer’s point of view, this is many hours of work. Hours you can spend optimizing other aspects of your site.  

What if you’re a website owner who doesn’t have the necessary skills to handle this task? You either need to develop those skills or spend a huge amount of money hiring a web performance expert. 

Fortunately, with NitroPack, you can automate the entire process and still achieve excellent results.

It will only take you 3 minutes to install NitroPack to your website, then, our service starts applying the following optimizations to your website:

• Reduce unused CSS (RUCSS);
• Image lazy loading;
• JavaScript lazy loading;
• Critical CSS;
• Code minification and compression;
• Lossy and lossless image compression;
• Preemptive image sizing;
• WebP conversion.

Additionally, you can rely on our built-in CDN, provided by Cloudflare. 

But don’t take our word for it. Test NitroPack for free and experience the improvements for yourself.

NitroPack in Action: Optimizing our LCP score

Here’s what you can expect after installing NitroPack on your website.

For this example, I will use our website - www.nitropack.io, and I will run a couple of tests using Google’s PageSpeed Insights.

First, we’re going to see the performance of our website on mobile devices without NitroPack:

As you can see, it takes 4.9 seconds for our LCP element to load. There’s room for improvement. 

Let’s see the results with NitroPack enabled:

And all that without writing a single line of code. NitroPack applies all the necessary optimizations automatically for you to achieve excellent LCP results and Core Web Vitals.