How Mikalsen Utvikling Went From 24 to 94 Mobile PSI Score With NitroPack

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.

Background: Website Tech Stack and Other Optimization Attempts

 

The agency had also tried other optimization methods. However, none of them brought the necessary speed results:

 

NitroPack’s Optimizations

To see NitroPack’s impact, we ran parallel tests on two versions of the site’s homepage - one with and one without our service.

First, here are the Desktop PageSpeed scores without and with NitroPack:

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:

• Image optimization;

• Main thread blocking;

• Caching and Time to First Byte (TTFB).

Image Optimization

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.

These techniques usually improve metrics like First Contentful Paint and Largest Contentful Paint.

Minimizing Main Thread Work and Removing Render-Blocking Resources

Another area that needed a big boost was main thread blocking time.

The browser’s main thread is responsible for many tasks, including rendering the page and responding to user interaction. By default, resources like CSS and JavaScript block the main thread, resulting in slow load times and unresponsive pages.

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.

Here, NitroPack’s proprietary resource loader, Critical CSS and JavaScript execution features play a massive role:

• 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;

• CSS and JavaScript files are also minified and compressed to make them lighter and speed up execution time.

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:

Now, CSS and JavaScript files don’t block the main thread, ensuring much faster rendering.

These optimizations also boost interactivity metrics like Total Blocking Time, Time to Interactive and First Input Delay.

Speeding up the Time to First Byte

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!

Real Benefits for Real People

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.