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%).
But why do website owners have hard times optimizing their site’s LCP?
Read on to find out!
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:
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?
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.
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.
Niko has 5+ years of experience turning those “it’s too technical for me” topics into “I can’t believe I get it” content pieces. He specializes in dissecting nuanced topics like Core Web Vitals, web performance metrics, and site speed optimization techniques. When he’s taking a breather from researching his next content piece, you’ll find him deep into the latest performance news.