Which Advanced Settings are Enabled in Each Optimization Mode

NitroPack has four preset optimization modes - Standard, Medium, Strong and Ludicrous. We call them presets because each one has different preconfigured settings.

The table below shows which settings are enabled in each optimization mode.

Settings missing from the chart above are not a part of the presets modes and can be changed as needed.

You can modify most of the settings above by switching them on/off manually:

Important Note: If you’re not sure what a setting does, we advise you to consult with a specialist, or with our support team. Also, see how to use our Safe Mode to test any feature before deploying it to your live site.

1. Add HTML preconnects 

Preconnecting alerts the browser that you intend to establish a connection with an important domain and that process should start as soon as possible. Reducing the time it takes to establish a connection results in better performance. This setting is always enabled and we don’t have an interface for it yet.

2. Minify resources

Minification removes whitespace, comments and other unnecessary symbols from code files. This reduces file size, ensuring a faster download time.

3. Combine JavaScript (JS) into one resource

Combining multiple JS files into a single file reduces the number of network requests the browser has to make. As a result, the browser finds and downloads everything it needs to render the page faster.

4. Combine CSS into one resource

Combining multiple CSS files into a single stylesheet reduces the number of network requests the browser has to make. As a result, the browser finds and downloads everything it needs to style the page faster.

5. Combine CSS into one resource > Merge resources for media "screen" and "all"

This option makes sure that NitroPack treats @media screen and @media all values the same. This prevents the creation of unnecessary CSS files.

6. Optimize CSS Delivery

Optimizing CSS delivery (or Critical CSS) means prioritizing the CSS responsible for styling above the fold content. Rendering above the fold content fast improves a page’s actual and perceived performance.

7. Optimize CSS Delivery > Remove @font-face rules from the critical CSS

@Font-face rules specify a custom font, which can be loaded locally or from a server. Removing these rules results in slower font loading but faster First Meaning Paint (FMP).

8. Reduce Unused CSS (RUCSS)

RUCSS finds CSS rules that aren’t used on the page and reduces them. By reducing unused CSS, this feature lowers the total number of bytes that have to be downloaded and helps browsers start rendering content faster. 

9. Remove render-blocking resources

By default, JavaScript and CSS files are render-blocking because browsers must load, parse and execute them before rendering the page. This can slow down page load significantly. NitroPack prevents this by rearranging and repositioning these blocking resources.

10. Remove render-blocking resources > Use resource loader script

Our resource loader rearranges the way resources are fed to the main thread. This is done to take advantage of modern CPU’s multi-core nature by offloading tasks away from the main thread. 

11. Remove render-blocking resources > Delay loading of non-critical resources until user interaction is detected

By default, NitroPack’s Ludicrous Mode lazy loads JS execution until user interaction is detected. Lazy loading JS helps browsers start painting content (HTML, CSS) faster. In a lot of cases, this is crucial for avoiding page abandonment.

Important Note: This setting is not a good fit for websites that heavily rely on JavaScript for displaying content. Before applying the setting on your site, we advise you to test it with the Safe Mode.

12. Remove render-blocking resources > Resource loading strategy

This option lets you choose between prioritizing styles (CSS) or scripts (JS). Prioritizing styles is the safer option, while loading scripts first can provide better performance but isn’t suitable for all websites.

13. Automatic image lazy loading

Lazy loading helps browsers only load the images that visitors are currently looking at. Doing this helps prioritize critical images over non-critical ones, resulting in a much lower initial page weight.

14. Automatic image lazy loading > Size images preemptively

Preemptive image sizing tells the browser how much space to allocate for each image in advance (without using width and height attributes). As a result, the browser can render the page faster and avoid potential layout shifts.

15. Automatic image lazy loading > Lazy load iFrames

Again, lazy loading help helps browsers only load resources that visitors currently need. This option does the same thing, only for iFrames instead of images.

16. Image optimization

Image optimization reduces image file size via compression. It also converts images to WebP while keeping the original image in place as a backup.

17. Image optimization > Image quality

This option lets you adjust the quality of optimized images. As you increase the number, the quality becomes better, but the image file also becomes larger. Allowed values are between 1 and 100. You can learn more about image quality and compression levels here. 

18. Override font rendering behavior

The font-display CSS rule determines how the browser should display fonts based on when they’re downloaded. This option lets you override the default behavior by selecting from one of the five values below.

19. Override font rendering behavior > Select font-display value

You can choose between five values for the font-display rule - auto, block, swap (the default), fallback, optional. Each value can be helpful in specific cases. You can read more about the font-display values here.