The File Optimization tab in Breeze makes your site files smaller and controls how scripts load. This helps your pages load faster.
In this article, you will learn how to minify files, fix font display, delay and defer JavaScript, combine JS files, and exclude files that cause problems.
Note:This guide is for beginners. Test each change on a staging site first if you can. A staging site is a private copy of your site where you can test changes safely.
How to Minify HTML, CSS, and JS Files
Minification removes extra spaces and comments from your files. The files become smaller, so they load faster. Breeze has separate toggles for HTML, CSS, and JS.
Go to Settings > Breeze > File Optimization.
Turn on the minification toggle you want: HTML, CSS, or JS.
Click Save Changes.
Purge the cache.
View the page source of your site to confirm the change.
Important:
Minification is usually safe. But some themes or plugins have inline scripts that need exact formatting, and these can break after minification. Test on a staging site first.
Why Is My font-display Setting Not Working?
font-display: swap is a CSS rule. It shows text in a basic font first, then switches to your custom font when it has loaded. This stops text from staying invisible while fonts load.
Breeze adds this rule to your fonts automatically, but only when:
CSS Minification is on. The rule is added only during CSS minification.
No rule exists yet. If your theme or font source already has its own
font-displayvalue, Breeze does not change it.
Troubleshooting checklist:
Confirm that CSS Minification is on in the File Optimization tab.
Check your theme’s CSS or font plugin for an existing
font-displayrule.Purge the cache after any change. The old CSS file may still be served if you do not.
How to Delay JavaScript Loading
Delaying JavaScript holds non-critical scripts until the visitor does something on the page, such as scroll, click, or move the mouse. This makes the first load faster. It can also improve Core Web Vitals, which are Google’s measures of page speed and user experience.
Breeze has two delay switches. Only one can be on at a time.
Delay JS Inline Scripts: holds inline scripts that match the keywords you enter. They load after the page HTML is ready. (An inline script is code written directly inside the page.)
Delay All JavaScript: holds JavaScript in the same way for all scripts.
Steps:
Go to Settings > Breeze > File Optimization.
Turn on one of the two delay switches.
To keep a script from being delayed, add its name or file URL to List of scripts not to delay. Use this for scripts that must run at once, such as a cookie consent banner or a live chat widget.
Click Save Changes, then purge the cache.
Important:
Neither delay switch can be used together with Combine JS.
If something breaks: Add the affected script to the exclusion list first. Do not turn off the whole feature. This usually fixes the problem and keeps the speed gain.
How to Defer JavaScript Files
Deferred loading is different from delay. The browser downloads the file while it reads the page, then runs it after the HTML is ready.
Go to Settings > Breeze > File Optimization.
Under JS Files With Deferred Loading, add the original JavaScript file URL. Add one URL per field.
Click Save Changes, then purge the cache.
Breeze adds the browser defer attribute to that file.
Important:
Do not add minified file URLs. They are not supported.
Should I Combine JS Files?
Combine JS merges your minified JavaScript files and inline scripts into one file. The browser then makes fewer requests.
This works best on sites that use HTTP/1.1. On HTTP/2, the benefit is smaller, because HTTP/2 already handles many requests well. Combining can sometimes cause more harm than good.
(HTTP/1.1 and HTTP/2 are two versions of the rules that browsers and servers use to talk to each other.)
Common causes of problems:
A theme or plugin needs scripts to load in a set order.
Inline scripts use variables that are moved or reordered after combining.
If your site breaks after you turn on Combine JS:
Turn off Combine JS and confirm the site is normal again.
Turn it on again. Then add the file that causes the problem to Exclude JS. Do not leave the feature off for the whole site.
What Does Include Inline JS Do?
Include Inline JS extends minification and combining to inline <script> blocks in your HTML. When it is on together with Combine JS, Breeze pulls inline scripts out, minifies them, and adds them to the same combined file.
Important:
This is riskier than combining external files only. Inline scripts often need to run in a set order. Test on a staging site before you use it on a live site with many plugin or theme changes.
How to Exclude a JS File from Optimization
The Exclude JS field removes single files from minification or combining. The feature stays on for the rest of your site.
Go to Settings > Breeze > File Optimization.
Under Exclude JS, add the file URL or a distinct part of the file name. Add one per line.
Click Save Changes, then purge the cache.
Use this when one plugin or theme script causes a console error after you turn on minification or Combine JS. (A console error is an error message that shows in your browser’s developer tools.)
Frequently Asked Questions
Is Delay the only way to postpone JavaScript in Breeze?
No. Deferred loading and delay are separate options. See the sections above.
Does Exclude JS treat local and third-party scripts differently?
No. Exclude JS is one list. It does not check whether a script is on your site or on another domain.
Each line is compared with the script URL.
A line with
(.*)is used as a pattern. A line without it matches only when it contains the script URL.A match is left out of Minify JS and Combine JS.
A script on another domain is already left out of minification, even if it is not in your list. Breeze minifies only JavaScript that belongs to your site, or to a CDN domain that Breeze rewrites back to your site. (A CDN is a network of servers that delivers your files from a location close to the visitor.)
Why is my Breeze cache folder so large?
Breeze saves a separate copy for each cached URL. There is no setting to set a maximum folder size.
What makes it grow:
Page cache is saved in
wp-content/cache/breeze/. A site with many pages, or a cache preload, creates one entry per URL.Mobile Cache saves a separate copy for mobile visitors.
Cache Logged-in Users saves a separate copy for each role that is on.
Cache Query Strings saves a separate copy for each value of those query strings. Built-in ones such as
pageandpageddo the same.Minified and combined CSS and JS are saved in
wp-content/cache/breeze-minification/. Old files are not deleted by age. They stay until a full purge, or until that post is trashed or deleted.
How can I check or limit the cache size?
Breeze does not show the folder size in its settings. After you click Purge All Cache, the admin notice shows how much page cache and minification cache was removed.
To limit the size, use Settings > Breeze > Basic Options > Purge Cache After. The default is 1440 minutes (1 day). When this time is reached, Breeze deletes the page cache and the minification cache.
Important: If you set Purge Cache After to 0, the timer is off. The folder then keeps growing until you purge it yourself.
That’s it! We hope this article was helpful.