Earlier this year, Google rolled out the page experience update, and in the process - made the Core Web Vitals ranking factors.
As a result, everyone now knows that Google uses real-world performance results (not lab metrics!) to rank pages. This is a big shift for the technology, metrics, and most importantly - the thinking behind web performance and SEO.
The Core Web Vitals quantify essential aspects of the user experience. As more website owners start to understand that, there should be fewer and fewer slow and inaccessible websites. Such a scenario would benefit everyone on the web.
That’s why we’re proud to share that NitroPack currently has the highest % of origins passing the Core Web Vitals assessment, compared to other speed optimization technologies.
Websites that use NitroPack also score way above the average for their respective platform or Content Management System (CMS).
The comparisons you see above come from the Core Web Vitals Technology Report, created by Google engineer Rick Viscomi. The report offers the first official global view of how 2000+ technologies perform in terms of Google’s Core Web Vitals.
The data for the report comes from real page loads (via the Chrome User Experience Report) and from the HTTP Archive, which analyzes millions of URLs. You can learn more about the project on its GitHub page.
Since our service was added to the report, the % of NitroPack-powered origins passing their Core Web Vitals has gone from 27% in June to 37% in September.
It’s also worth noting that our internal telemetry analytics (based on a sample size of ~40,000 websites) show an even higher pass rate - 59% of sites pass the assessment with NitroPack as opposed to 10% without it, which is close to a 6x improvement.
In this article, we want to dive a bit deeper into the Core Web Vitals Technology Report. And since these results are only a starting point for us, we’ll also discuss how we plan to improve them before the end of 2021.
Besides Core Web Vitals data, the technology report also shows that origins powered by NitroPack have the best Lighthouse scores.
Now, the Lighthouse score is by no means a perfect representation of any website’s performance, although many people use it as a proxy for that. We’ve talked about this misunderstanding in our article about the differences between lab data and field data.
Put simply, you shouldn’t rely solely on the Lighthouse (PageSpeed Insights) score to judge your site’s performance.
However, green lab results can mean that you’re doing a lot of things right. Generally, you can only get good page speed scores by applying best practices like:
Eliminating render-blocking resources;
Static resource caching;
Image optimization and more.
These optimizations tend to have a positive impact on lab results and on visitors’ experience. That’s why NitroPack applies many best practices (including the ones mentioned above) by default.
We’ve talked about our essential features extensively in “How NitroPack Works”, so we won’t go over everything again here.
What’s important for now is that implementing these best practices leads to green page speed scores and better experiences for real people, at least for NitroPack-powered websites.
An even more critical aspect of the technology report is page weight.
We’re thrilled to see that NitroPack also outperforms other speed solutions on this front.
First, here’s the median origin page weight on the right:
Next, we also need to look at the median image weight per page. we can also look at the median image weight per page:
Being the largest element on many pages, images must be compressed, resized, and converted to the right type for optimal performance.
Again, our complete image optimization stack is the main driver here. More specifically, NitroPack compresses images and converts them to WebP, which reduces their size while preserving good quality. We do this by default, while users can adjust the compression level from the Advanced Settings.
We also use Preemptive Image Sizing, which solves the problem of missing width and height attributes without adding them. This speeds up rendering and reduces layout shifts.
Lastly, image lazy loading plays a massive role in reducing the initial page load time. NitroPack automatically lazy loads all images, including background ones. This mechanism ensures that images are loaded only once users scroll to them.
In short, websites that use NitroPack serve fewer, optimized resources to their visitors, resulting in lower page weight and faster load times.
The optimizations we mentioned here aren’t the only ones that contribute to our results (for example, our advanced caching and built-in CDN are also crucial), so if you want a complete list, check out our Features page.
The results from this technology report and our internal tests are a promising start, but there’s a lot of work to be done.
Here are three important projects we’re currently working on to provide better Core Web Vitals scores:
We’re testing different font loading strategies with the help of our Speed Insiders. Getting font loading right could mean better Cumulative Layout Shift (CLS) scores across the board;
We’re also working on removing unused glyphs from fonts. The goal is to make font files lighter, which should lead to lower page weight and faster load times;
Lastly, we are working on our HTML edge cache feature. Currently, we only serve static resources (images, fonts, CSS, and JS) via our CDN. In the near future, we also want to use it to cache and serve HTML. This capability can significantly speed up Time to First Byte and, as a result - First Contentful Paint (FCP) and Largest Contentful Paint (LCP). We’ve started testing this feature on our website, but we’re in the very early stages.
If you are an existing customer, be sure to subscribe for our email updates to never miss out on important product updates.
In the meantime, don’t hesitate to drop a question in the comments below or in our Facebook group.
Evgeni writes about site speed and makes sure everything we publish is awesome.