In The Story of NitroPack, we talked about why we decided to build the world’s first fully automated speed optimization service.
A big part of the decision was that the options for improving site speed were limited and produced mediocre results. That’s why we set out to build a new type of product altogether.
Here, we take a deeper dive into how NitroPack does things differently from a technical standpoint.
First, let’s start at the beginning.
What is NitroPack?
NitroPack is an all-in-one, cloud-based site speed solution that optimizes WordPress, WooCommerce, and custom-based websites. It requires no coding or tech skills whatsoever, so every website owner can set it up and see massive improvements in less than 3 minutes.
NitroPack allows websites to load lightning-fast by combining:
-
Web performance best practices;
-
Standard optimization techniques;
-
Advanced features implemented in unique ways.
To take advantage of NitroPack, users simply create an account and connect their site to our service. After that, our servers handle the heavy load of performing optimizations (more on that later).
Before we dive into the technical stuff, we should address an important question that some people have when they first learn about NitroPack’s results:
Is NitroPack Black Hat?
No, NitroPack isn’t a Black Hat solution, nor it cheats page speed tools. In fact, in September 2022, NitroPack held a joint webinar with Google where NitroPack’s real-world results were discussed in detail. Also, NitroPack was recognized as the #1 site speed solution in the first global Core Web Vitals report.
The way NitroPack tackles two of the web’s biggest problems - the large number of resources per page and JavaScript execution - is unique.
Our service preloads lots of assets away from the main thread, utilizing modern CPU’s multi-core architecture. (More on this in the next section.) This causes speed testing tools not to register these resources in their waterfall charts. As a result, people get confused and think we somehow hide files to look better for PageSpeed Insights or GTmetrix.
Put simply:
We approach web performance from an entirely different perspective. At the same time, speed testing tools only assume standard optimization techniques. That’s why their output doesn’t always make sense in the context of NitroPack.
Now, let’s dive a little deeper into NitroPack’s features to better understand what makes our technology unique.
NitroPack’s Core Features
In this section, we go through NitroPack’s most important features and how we implement them.
If you’re interested in a specific feature, feel free to use the table of contents below.
Caching
Back in 2012, NitroPack started as a caching solution for OpenCart. This is the core functionality of our service and remains our bread and butter to this day.
Standard Features: NitroPack offers all the basic functionalities that most caching tools have (or at least should have). For example, you can set cache expiration time and a validation period for stale responses. We also create separate cache files for desktop, mobile and tablet.
The Excluded Cookies feature lets you serve non-cached content to users based on their cookies. All you have to do is enter a cookie name and an optional value.
NitroPack also ignores most marketing URL parameters by default. This keeps your website’s cache lean and ensures a high cache hit ratio.
NitroPack’s Advanced Features: Cache Invalidation and Cache Warmup are two crucial features that:
All of this happens automatically and in the background. You don’t need to do anything except turn Cache Warmup on if you haven’t.
This mechanism is incredibly useful, especially in high-traffic situations. We discuss why later in this article. If you’re interested, skip ahead to the “Marketing Campaigns with NitroPack” section.
Cache Warmup also creates cache for desktop and mobile, including each possible combination of variation cookies.
Image Optimization
Image optimization is also a huge part of web performance. Before NitroPack, caching and image optimization capabilities were never bundled in the same service. You had to install and configure them to work together.
Standard Features: By default, NitroPack uses lossy compression to reduce image file size. We also convert all images to WebP while keeping the original format as a backup for browsers that don’t support WebP.
NitroPack’s Advanced Features: Features like Preemptive Image Sizing (solves the missing width and height attributes without having to add them) and Adaptive Image Sizing (available in pre-release) make sure images fit their containers perfectly. They help browsers allocate the correct amount of space for each image. Most importantly, our image optimization features are always enabled and bundled into the price.
Resource Loading and JavaScript Execution (Defer JS Loading)
As we said, JavaScript execution and the large number of resources per page are two of the modern web’s biggest speed problems. Both take CPU cycles away from the main thread, hindering the rendering process.
Standard Features: We apply techniques like code minification and code compression to speed up JavaScript execution time. NitroPack also delays the loading of non-critical resources until user interaction is detected. You can also specify other scripts that should be loaded with a delay.
NitroPack’s Advanced Features: One of the biggest reasons why NitroPack produces outstanding results is our proprietary resource loading mechanism. We don’t use built-in browser techniques. Instead, we created our own resource loader, which rearranges the way resources are fed to the main thread. We also preload lots of assets. All of this is done to take advantage of modern CPU’s multi-core nature by offloading tasks away from the main thread.
CDN
Most caching tools don’t come with a built-in CDN, which can be incredibly frustrating. Without NitroPack, users have to configure their caching tool and CDN to work together. Not to mention, having to pay extra for the CDN.
NitroPack’s Addition: Again, our global CDN is built-in to the service. It works automatically once you set up NitroPack. And you don’t have to pay for or integrate 3rd party services. We also automatically add a canonical header to content on our CDN with a link to the original resource to avoid potential SEO issues.
Critical CSS
Critical CSS means finding the CSS responsible for above the fold content and inlining it in the page’s head tag. This technique improves actual and perceived performance.
NitroPack’s Advanced Features: Our service creates unique Critical CSS for every page (not page type), per layout. This ensures that each page has unique Critical CSS, resulting in better performance and stability. NitroPack can also remove @font-face rules from your website’s Critical CSS to improve FMP.
Lazy Loading Images, Videos and iFrames
Lazy loading helps browsers load only the assets that visitors are currently looking at. Doing this helps prioritize critical resources over non-critical ones. All lazy loaded images, videos and iFrames are loaded only once the user scrolls down to them.
Standard Features: We lazy load images, iFrames and videos from YouTube and Vimeo.
NitroPack’s Advanced Features: Ever since we moved to the cloud, we’ve been silently lazy loading all images, including background ones. We were the first to introduce this feature and we’ve seen only one other implementation since.
Our service automatically detects and lazy loads all background images, even those defined in CSS files. NitroPack also detects declarations in external files multiple levels down an import chain. This is especially useful for certain WordPress themes. Finally, NitroPack also lazy loads multiple slider images.
Code Optimization
Yet another staple of web performance, code optimization is also widely available these days. Lots of hosting companies and CDN providers offer services like compression and minification.
Standard Features: We minify and compress HTML (gzip), CSS and JavaScript files (gzip and brotli). We also combine multiple CSS/JavaScript files into a single file, reducing the number of network requests the browser has to make.
NitroPack’s Advanced Features: Our service performs minification on AST trees instead of using regexes. This yields the best results in terms of stability and file size reduction.
Update: We also added a way to reduce unused CSS (RUCSS). RUCSS finds CSS rules that aren't used on the page and reduces them. This lowers the total number of bytes that have to be downloaded. More importantly, it ensures browsers can start rendering the page faster.
Other Features and Functionalities
Everything we just covered is only part of what makes NitroPack special.
For a complete list or more details on how to use our service, visit our:
Again, the important thing is that all of NitroPack’s features are built-in into the product. You can experiment with lots of settings and don’t have to pay extra for any of them.
Optimizations in the Cloud
All of the above features are awesome, but they take a toll on a server.
That’s why we built NitroPack as a cloud-based service. As a result, our servers handle heavy operations like code minification, compression, and image optimization.
For example, if you download the NitroPack plugin for WordPress and connect your site, the plugin simply calls/sends data to our API servers. After that, our infrastructure handles all optimizations.
All of this is done with one purpose - to minimize your server overhead.
It's pointless to install a speed optimization solution if it adds lots of overhead to your servers. That’s also why installing five or six different speed solutions is a bad idea.
With NitroPack handling all optimizations, your server has more headroom to serve clients and do admin work.
Marketing Campaigns with NitroPack
Two major performance issues often come up when running campaigns.
First, each visitor hits your server with a unique URL request even if they see the same content on the page.
Second, you lose your cache if you update content on your site. Typically, when you update your site’s content, caching tools purge their cache and rebuild it. When a purge occurs during a high-traffic period, your visitors are no longer served from cache. And your server has to work extra hard to generate new cache files.
NitroPack has a powerful mechanism that helps your website thrive in these high-traffic situations:
-
Our service recognizes campaign parameters in the URL and ignores them when looking up a cache file for the campaign request;
-
With Cache Invalidation, NitroPack solves the second problem by invalidating the cache instead of purging it. This method allows NitroPack to refresh the cache files in the background. At the same time, you still serve your clients from the slightly outdated cache files. Once the updated cache is ready, our service starts serving it to visitors.
This whole process happens automatically.
As we said, NitroPack ignores most common marketing URL parameters by default, but you can also tell it which other parameters to skip.
Put simply:
You don’t need to worry about caching and performance during high-traffic situations. Whether you’re running a big campaign or your site suddenly goes trending, NitroPack ensures your visitors always land on fast pages.
Risk-Free Testing
To provide additional security and more options for our users, we also created three crucial testing capabilities. With them in place, anyone can test NitroPack without risking any money, UX problems, or vendor lock-in.
The Free Plan
First, we have a Free Plan for sites with up to 5,000 pageviews.
However, this isn’t your typical crippled version of the product that most companies use to lure in customers. Our Free Plan comes with all of NitroPack’s features. What you get with the free version is what you’ll get once you upgrade.
This makes it ideal for testing, especially if you have a staging/test site.
Worried about paying for NitroPack without knowing the results you’ll get?
Use the Free Plan and run your site through PageSpeed Insights, GTmetrix, or any other speed tool.
Worried about NitroPack causing visual issues?
Set it up on your staging site and see how it looks. Nothing will change when you upgrade to a paid plan (except the promo badge in the footer).
You get our point. The Free Plan lets you experience all of the potential benefits before committing any money. We also don’t ask for a credit/debit card.
The only downsides to using this plan are the limited pageviews/bandwidth per month and the small promotional badge we place in your site’s footer.
Of course, the badge is removed once you upgrade to a paid plan and purge your cache.
Test Mode
We constantly roll out new features that our customers use to customize NitroPack to their needs.
We also know it can be stressful to test these new features on a live site. That’s why we added the Test Mode. It lets users test features in an isolated environment. Here’s how it works:
You enable the Test Mode from the “General Settings” panel:
This disables NitroPack for your regular website URLs. At the same time, you can access a test version of your site by adding ?testnitro=1 to any URL.
Again, your website’s visitors continue to land on the regular URLs. There’s no interruption for them.
While in Test Mode, all changes appear only on the test URLs. You can change any setting and run a test page through PageSpeed Insights, GTmetrix, or any other tool to see the results.
NitroPack Works on Copies of Your Website’s Files
Finally, our service doesn’t change your original code files. It merely creates optimized versions of those files and uses them.
This mechanism removes the potential for vendor lock-in.
We don’t want to extort customers into staying with us by integrating NitroPack so deep into their code base that removing it would take months. If anyone decides to pause or stop using our service, they simply have to click a button. After that, the website reverts back to its original state. No interruptions or months-long service untangling.
So, we realize all of this sounds too good to be true, but our real-world results on site performance and speed are why 160K+ active users recommend NitroPack.
The great thing is that you don’t have to take our word for it. Sign up for a free plan and test NitroPack for yourself. You risk nothing for the chance to add a game-changer to your tech stack.
