NitroPack and Largest Contentful Paint (LCP): The Easy Solution to A Complex Challenge

Last updated on Jun 16th, 2022 | 5 min

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 56.5% of all sites meet the “good” LCP threshold, compared to much higher rates for First Input Delay (94.7%) and Cumulative Layout Shift (71.7%).

LCP stats

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? 

Disclaimer: If you’re new to the Core Web Vitals, I strongly recommend getting familiar with the metrics, and especially with LCP, before proceeding any further with this article. In fact, you can check our blog post on the topic - What Is Largest Contentful Paint and How to Improve It (5 Proven Techniques).


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:

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:

LCP score without NitroPack

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

Let’s see the results with NitroPack enabled:

LCP score with NitroPack

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

Niko Kaleev
Content Writer

Niko is one of the NitroPack storytellers. He is passionate about writing quality content and turning complex optimization concepts into engaging articles.