The performance of a WordPress site is crucial for providing a seamless user experience and optimizing SEO. There’s a lot you can do to boost Core Web Vitals by fine-tuning settings, minifying resources, and concatenating JavaScript, but all of those techniques take time. In this article, we’ll show you can use the NitroPack plugin to boost performance with preset modes or a customized configuration.
NitroPack can help to greatly simplify the optimization process, with caching and image optimization, JavaScript deferral, CSS minification, and more.
First Steps
NitroPack is a plugin, so the first thing we have to do is get a copy of the plugin and install it on our WordPress site.
If your site is hosted on WP Engine or Flywheel, you can download and activate the plugin through the WordPress admin. This also works if you’re testing it out using Local.
You’ll need to download and install NitroPack directly if you’re using another host or local development environment.
Setting Up NitroPack on WordPress
Once the plugin is installed and activated, click NitroPack* in the WordPress admin and then click **Connect to begin setup.
This takes you to a page on the NitroPack site where you can fill in your connection details and choose a plan. NitroPack’s site has more information on the available plans, but for now we’ll stick with the free option. The page will display a message once the connection is established, and then automatically close.
Your WordPress site should now display the NitroPack dashboard. This gives you a quick rundown of which pages have been optimized, and gives you control over NitroPack’s settings. We’ll look at those in the following sections.
Throughout this article, we’ll be using the Free plan. While this works for some situations, you may run into limits. The Business plan is built specifically for starter projects, with enough resources and optimization features for great performance results. All NitroPack plans include a 14-day refund policy.
Configuring NitroPack for WordPress
The first section of the NitroPack settings is “Optimized pages”, showing the number of pages on your WordPress site that have been optimized. This section also includes the “Purge cache” button. You’ll need to use this if you change the “Optimization mode” discussed below, as NitroPack will not automatically reoptimize pages when you change modes.
The “Optimization mode” offers five different settings. Clicking See modes comparison will bring up a modal with a handy checklist illustrating the difference between various modes. NitroPack has documentation on which optimization mode to choose and the differences between those modes, but NitroPack defaults to the fastest one, “Ludicrous”.
Part of how “Ludicrous” mode boosts performance is by prioritizing the page’s HTML and CSS, while delaying JavaScript. According to NitroPack, this is typically the best mode to use. However, it may not be the best choice if your WordPress site uses a lot of JS scripts.
The best mode for your website will vary depending on the nature of your site. For example, if you absolutely need images to be at 100% quality, then you should use “Standard” mode, as the other modes all use 80% quality for images.
If you’re not sure which mode to use, you can always test Ludicrous mode on a few pages first.
There are 19 methods NitroPack can use to boost the performance of your WordPress website, and Ludicrous mode utilizes 17 of them. The remaining two are “Combine JavaScript”, which concatenates your JS into a single file, and “Remove Unused CSS,” which does exactly that. We’ll discuss these in more detail in Setting Up Custom Mode below.
Basic Settings
The settings page in the NitroPack plugin includes a number of other areas, some of which are self-explanatory. The “Subscription” section is a nice touch, showing you exactly which plan you have and the date it’s up for renewal.
The “Basic Settings” section consists of four toggle switches, all defaulting to the off position. Let’s take a quick look at what each one does:
- Cache warmup: Automatically re-optimizes and re-caches pages after they’ve been purged or invalidated, simulating user visits to ensure optimal performance at all times.
- Test Mode: This allows you to experiment with NitroPack’s features in an isolated environment, without affecting your live website, by adding a special parameter to the URL of the pages you want to test.
- HTML Compression: This compresses HTML content to reduce its size and improve page load times.
- Allow Editors to purge cache: Typically, only those with Admin-level access can purge the NitroPack cache. Toggling this on allows Editors to do so as well.
Setting Up Custom Mode
In most cases, one of the built-in modes will be enough to give you the speed boost you’re looking for. However, there may be situations where you need to tweak these settings.
The settings aren’t changed directly in the plugin, but in your NitroPack account. There are a lot of fine-grained settings with different options, and having it in a separate dashboard helps prevent the WordPress admin from becoming cluttered.
There are a couple of points to consider before you change any of the settings. First, NitroPack has tested all of the preset modes for stability. While “Ludicrous” and “Strong” aren’t as stable as “Basic” and “Medium”, they offer increased performance. Making changes to the existing settings allows you to tweak performance, but it may come with a cost in stability. Second, changing any of the settings below will automatically take your WordPress site into “Custom” mode.
Getting Started
Click on Cache Settings in the left-hand menu to begin customizing your settings. The first setting is “General”, which shows the available modes, as well as tabs for “Webhooks” and “API keys”. Clicking on Webhooks allows you to set custom URLs for clearing caches, notifications, and configuration changes. Clicking on API keys allows you to view and change your API site ID and secret key, and includes a link to NitroPack’s documentation.
Optimizing Images and Media with NitroPack
Click on Images & Media to fine-tune how images and video are served, including lazy loading, adaptive image sizing, and video facades.
Lazy Loading Images
Lazy loading is a technique that delays the loading of images until they are needed, which can significantly improve your website’s initial page load times. By default, lazy loading for both images is turned on in every mode except “Standard.”
NitroPack allows you to tweak how hidden images use lazy loading:
- Default: Load images as soon as they enter the viewport.
- On visibility change: Load images when their CSS visibility property changes.
If you have sliders that rebuild the DOM during initialization, enable the “DOM-rebuilding slider compatibility” setting to ensure they function correctly.
To exclude specific images from lazy loading, enter the CSS selectors in the “Exclude CSS selectors” field. For example, .container or #column-left.
Image Optimization
Image optimization can significantly reduce the file size of your images, leading to faster loading times. Image optimization is automatically set to 80% for every mode except Standard, where the default is 100%. A higher number means higher quality (smaller optimization), while a smaller number applies larger optimization but may impact image quality.
Clicking the dropdown menu lets you change this, with presets for 50%, 70%, 80%, and 90%. Select Custom to enter a percentage value manually.
Adaptive Image Sizing
Adaptive image sizing resizes image files to match their container dimensions, reducing image file size. This feature is only available on the Growth, Scale, and Agency plans.
Video Facades
Video facades improve loading speed by displaying a video facade and deferring the load of YouTube, Vimeo, and Wistia videos until the user plays them. This is a relatively new feature of NitroPack, and is enabled by default in all modes. You can alter the size of the video facade using the dropdown menus for YouTube and Vimeo.
In addition, NitroPack can detect if your theme allows configuring an overlay for embedded videos, and display that overlay instead of the video thumbnail. Click the checkbox to enable this feature.
Optimizing JavaScript Settings in NitroPack
The JavaScript settings in NitroPack play a crucial role in improving the performance of your WordPress site. Let’s look at some of the options available to optimize your JavaScript settings and boost your site’s performance.
Remove Render-Blocking Resources
By default, NitroPack recommends removing render-blocking resources, including JavaScript files. This feature enables the browser to render page content faster, resulting in improved page load times and performance. When you enable this feature, NitroPack will optimize the loading sequence of your JavaScript files to prevent them from blocking the rendering of your page content.
Resource Loading Strategy
NitroPack offers two resource loading strategies: “Styles first” and “Delay non-critical resources.” The “Styles first” strategy is the default and preferred method, which loads your site’s styles before loading JavaScript files. This approach ensures that your site’s layout and design are rendered correctly before loading JavaScript files.
The “Delay non-critical resources” strategy delays the execution of non-critical JavaScript files until the user interacts with the page. This approach can further improve page load times, but it may not be suitable for all sites, especially those that rely heavily on JavaScript for functionality.
Delayed Scripts
NitroPack also allows you to delay the loading of popular scripts, such as chat widgets, pop-ups, and analytics tools. You can specify additional scripts to be loaded with a delay in the provided field. This feature can help reduce the initial load time of your site and improve overall performance.
Combine JavaScript
Finally, NitroPack offers the option to combine JavaScript files to reduce network requests and boost rendering performance. Please note that this feature may not be compatible with all scripts due to the variability in JavaScript coding and interactions. This is why it’s one of the only options that’s not enabled by default in “Ludicrous” mode. If you enable this feature, make sure to review your WordPress site thoroughly to ensure that it’s functioning as expected.
Optimizing HTML & CSS Settings in NitroPack
The HTML settings in NitroPack allow you to fine-tune the optimization of your HTML files. Here are the options available:
- Keep HTML comments: This feature preserves developer comments in your cached HTML files, which can be useful for debugging and understanding your site’s code structure. However, it’s recommended to disable this feature to minimize file size and improve performance.
- Minify JSON for linking data: Enabling this feature streamlines JSON-LD data, which can improve speed and enhance SEO by providing search engines with a better understanding of your content.
- HTML normalization: This feature adds a pre-parsing stage that normalizes the HTML, addressing issues with misaligned elements in the DOM tree and ensuring a smoother web experience.
CSS Settings
The CSS settings in NitroPack offer several options to optimize your CSS files and improve page load times. Here are the options available:
- Generate critical CSS: This feature automatically identifies and inlines the CSS needed to display above-the-fold content quickly, while asynchronously loading non-critical CSS. This can significantly improve page load times and is recommended.
- Remove @font-face rules from the critical CSS: Enabling this feature prevents font files from being loaded during the initial rendering of the page, improving font loading speed and Largest Contentful Paint.
- Include/Exclude CSS selectors in the critical CSS: These options allow you to specify custom CSS selectors to include or exclude from the critical CSS. This can help you fine-tune the optimization of your CSS files.
- Custom CSS: This feature allows you to specify custom CSS rules that will be applied to the optimized pages.
- Remove unused CSS: Enabling this feature removes unused CSS from the optimized CSS files, resulting in faster rendering.
- Combine CSS: This feature combines CSS files to reduce the number of network requests and improve rendering. It’s recommended to enable this feature.
- Merge screen and all media styles: This feature combines styles for both ‘screen’ and ‘all’ media into a single group, instead of creating separate files.
Optimizing Fonts
In this section, we’ll explore the various options available to optimize your font settings in NitroPack, which can help improve the performance and visual experience of your WordPress site.
Toggling on Override font rendering behavior allows you to specify how fonts are displayed during the load process, which can help prevent visual disruptions or “flash of unstyled text” (FOUT).
The font loading strategy settings in NitroPack allow you to configure the method of loading fonts on your pages:
- Native: This option adds the external font files that are actually used on the page and necessary, which is great for stability and performance improvements.
- Onload:: This option renders your fonts after page load, which can improve Largest Contentful Paint (LCP) and First Contentful Paint (FCP) metrics. However, it may introduce Cumulative Layout Shift (CLS) if your custom font dimensions are substantially different from the browser defaults.
Compression and Minification
The compression and minification settings in NitroPack allow you to optimize your font files for faster loading:
- Font subsetting; This feature removes unused glyphs (symbols) from a font file, reducing its size and improving the load time of a webpage. This feature is only available with a Scale subscription.
- Font compression: This feature converts your fonts to WOFF2 format and reduces font size by up to 50%.
- Optimize Google hosted fonts: This feature optimizes your Google fonts by hosting them on NitroPack’s CDN. This feature is available with Business or Scale plans.
Cache Optimization
The caching settings in NitroPack allow you to control how your site’s cache is managed:
- Cache expiration time: This feature allows you to define the lifespan of your cache, which can help with optimal website management. You can set the cache expiration time in days, and also specify a stale cache expiration time in minutes.
- Optimize-only URLs: This feature allows you to focus optimization on specific URLs and skip the rest, giving you precise control over site performance.
- Minify resources: This feature enables or disables minification of JavaScript, CSS, and HTML resources.
- Optimize ads: This feature prevents ads from blocking the initial page render, enhancing page load speed and user experience.
- Cache AJAX URLs: This feature allows you to choose specific AJAX URLs to cache, enhancing their load speed and performance.
Ignored Parameters
The ignored parameters settings in NitroPack allow you to specify a list of URL parameters that do not modify the page content and can be safely ignored to avoid the creation of unnecessary cache files.
- Include the default ignored parameters: This feature ignores default parameters (such as UTMs) from the creation of new caching pages.
- Custom ignored parameters: This feature allows you to specify a list of custom URL parameters to ignore.
NitroPack also allows you to specify a list of HTTP response headers that must be preserved in optimized pages. The cache reset feature allows you to reset and purge your page cache in full, but this may result in a longer cache rebuild time.
Exclusions
NitroPack’s exclusion settings allow you to specify resources, URLs, and cookies that you do not want to get optimized:
- Excluded resources: This feature allows you to specify JavaScript, CSS, images, and font files to exclude from optimization.
- Excluded URLs: This feature allows you to specify pages that you do not want to get optimized. Please note that this cannot be used simultaneously with the “Optimize Only URLs” setting detailed above.
- Dynamic content cookies: This feature generates tailored cache files based on specific cookie values, ensuring the correct version of a page is served to each visitor.
- Exclude from optimization by cookie: This feature allows you to specify which cookies will trigger an exclusion from optimization.
Wrapping Up
We’ve covered the basics of setting up the plugin, configuring optimization modes, and fine-tuning settings for images, JavaScript, HTML, CSS, and fonts. By following these steps, you can significantly improve your website’s performance, reduce page load times, and enhance the user experience. Remember to test and monitor your website’s performance regularly to ensure that NitroPack is working optimally for your specific needs.
How do you optimize your WordPress sites? Do you use NitroPack, another plugin, or do you use manual tweaks? Let us know in the comments below.