Mikalsen Utvikling is a Norwegian digital marketing agency with a mission to increase website traffic and improve sales for its clients.
The agency saw NitroPack’s impact in December 2020 by testing our Free Plan. Since then, our service has become a key component in their technology stack.
Currently, Mikalsen Utvikling uses NitroPack to speed up their and their clients’ websites (like the fintech company https://lanfordeg.no/). In this case study, we’ll look at how NitroPack optimizes the agency’s website.
The agency had also tried other optimization methods. However, none of them brought the necessary speed results:
To see NitroPack’s impact, we ran parallel tests on two versions of the site’s homepage - one with and one without our service.
And here are the Mobile scores:
Mikalsen Utvikling got these results with our Ludicrous mode (the default configuration):
The setup was also straightforward on their clients’ sites, especially with the help of our support team:
Unfortunately, PageSpeed Insights (PSI) doesn’t show Field Data (which represents visitors’ actual experience) for the agency’s website. For now, we’ll stick with lab metrics in PSI and test results from WebPageTest.
In this case study, we’ll focus on three areas that had the largest impact on the website’s load time:
Main thread blocking;
Caching and Time to First Byte (TTFB).
When testing the website without NitroPack, we see that unoptimized images cause massive delays:
Our complete image optimization stack solves all these issues:
First, we convert images to WebP (a next-gen format), compress them and serve them through our Content Delivery Network (CDN);
Our service also defers (lazy loads) all offscreen images, including background ones;
When needed, NitroPack users can enable Adaptive Image Sizing, which makes sure images fit their containers perfectly.
With NitroPack, the website easily passes all of these audits.
Another area that needed a big boost was main thread blocking time.
A few PSI audits indicate that a page has a main thread problem:
Without NitroPack, the agency’s website was sending too many render-blocking resources to the browser. The order in which these resources were sent also wasn’t optimized.
We can see that in the waterfall chart - these files have an “X” next to their name.
Put simply, when the browser encounters resources 5-15 and 22-32, it has to download, parse and execute each one before doing anything else.
Our service rearranges the way resources are fed to the main thread to avoid blocking time;
NitroPack inlines the CSS responsible for above the fold elements (Critical CSS) in the page’s head tag. This technique prevents render-blocking CSS;
NitroPack also delays the loading of non-critical resources until user interaction is detected;
As a result, all main thread blocking audits are in the green:
If we scroll down to the waterfall chart, we can see the effects of applying our resource loader:
The last major problem was the huge Time to First Byte (TTFB) for the main document.
Like the render-blocking resources, this 3.4s delay prevented the browser from visualizing the page quickly.
Here, NitroPack’s advanced caching mechanism reduces TTFB and improves performance in general. By simply applying page caching, the TTFB is over 10 times lower when testing from the same location.
But here’s the crucial part:
Combining caching with the rest of NitroPack’s optimizations leads to a massive drop in load time.
If we run the unoptimized page through WebPageTest, we can see that it took the browser 6 seconds to display anything.
With NitroPack, rendering starts at 1.5s and is done after 2s!
Ultimately, we optimize websites to improve the user experience.
When visitors have a good time, they stay on your website longer and convert more. That’s exactly what Mikalsen Utvikling reports:
We’re always excited to hear feedback like that - it tells us that our service makes a real difference for real people. At the end of the day, that’s what it's all about.
Evgeni writes about site speed and makes sure everything we publish is awesome.