Excellent Site Speed, More Conversions and Happier Customers: A NitroPack Case Study

Last updated on Aug 19th, 2021 | 5 min

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.

“Through the free trial version, we had the chance to experience NitroPack’s immense impact on site performance ourselves. That made the decision to make a full transition free of concerns.”

 

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

 

“Our tech stack consists of a wide range of technologies, including Elementor for web design and ManageWP for controlling all websites. We use WordPress as our platform and local companies for web hosting. And not the least, NitroPack for strong page speed performance.”

Tech Stack

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

“When using WP Rocket for caching/image optimization/CDN, we got Google PageSpeed Scores between 40-60. As soon as we switched to NitroPack, we consistently had scores ranging from 95 to 100.”

 

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:

PSI Results Desktop

And here are the Mobile scores:

PSI Results Mobile

Mikalsen Utvikling got these results with our Ludicrous mode (the default configuration):

“For superior page speed results, we opted for NitroPack’s Ludicrous Mode from the very beginning. With some minor tweaks, the configuration worked beautifully across all webpages.”

 

The setup was also straightforward on their clients’ sites, especially with the help of our support team:

“We have only experienced minor integration issues, making NitroPack the easiest solution for caching we have come across. With help from the support team, any issues setting up new websites have quickly been solved.”

 

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:

Image Audits PageSpeed

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.

Passed audits images PSI

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

Page speed fcp, lcp, SI

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:

Main thread audits PSI

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.

WebPageTest Waterfall chart render blocking resources

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:

JS execution time and main thread work audits PSI

Render blocking resources audit passed

If we scroll down to the waterfall chart, we can see the effects of applying our resource loader:

WebPageTest waterfall chart

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.

PageSpeed Insights TTI TBT

Speeding up the Time to First Byte

The last major problem was the huge Time to First Byte (TTFB) for the main document.

TTFB WebPageTest

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.

TTFB WebPageTest NitroPack

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.

Rendering strip WebPageTest

With NitroPack, rendering starts at 1.5s and is done after 2s!

Rendering strip WebPageTest NitroPack

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:

“With increased page speed using NitroPack, we are experiencing a significant increase of conversions and sales. As page performance is becoming an even more important ranking signal for Google Search, we expect to see even stronger numbers over time.”

 

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.