The File Optimization tab in the Breeze plugin helps you make your website faster by reducing the size of HTML, CSS, and JavaScript files.
These settings work by removing extra spaces, combining files, and delaying unnecessary scripts, all to improve your page load speed and user experience.
This guide explains each setting under the File Optimization tab using simple language so that even non-technical users can confidently use them.
Table of Contents:
How to Use Breeze File Optimization Settings for Faster WordPress Sites
The File Optimization tab in Breeze helps you speed up your WordPress site by reducing the size of your HTML, CSS, and JavaScript files.
These settings are easy to enable and improve both site speed and user experience without needing any technical knowledge.
How to Access File Optimization Settings
Log in to your WordPress Admin Panel.
Navigate to Settings > Breeze.
Click on the File Optimization tab.
HTML Minification
What it does:
Removes extra spaces and line breaks from your HTML code, making the page load faster.
How to enable:
In the File Optimization tab, check the box for HTML Minification.
Click Save Changes.
How to verify:
View your website’s source code. The HTML should look compact (without extra spaces).
CSS Minification
What it does:
Shrinks your CSS files by removing unnecessary spaces, reducing file size and load time.
How to enable:
Check the box for CSS Minification.
Save the changes.
How to verify:
View the page source. You should see a link to a CSS file under a minified path like:
/cache/breeze-minification/css/
Font Display: Swap (Keep Fonts Visible)
What it does:
Ensures that your custom fonts don't block page content while loading. This feature works only when CSS Minification is enabled.
How it works:
It adds a rule called font-display: swap to your CSS font settings. This tells the browser to show fallback text first and load your fonts in the background.
@font-face {
font-family: '1942-font';
src: url('assets/fonts/1942-webfont.woff2') format('woff2'),
url('assets/fonts/1942-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Note: If your theme or fonts already have font-display defined, Breeze will not change it.
JS Minification
What it does:
Reduces the size of JavaScript files by removing extra spaces, improving performance.
How to enable:
Enable JS Minification in the settings.
Save changes.
How to verify:
View page source and look for a link like:
/cache/breeze-minification/js/
Delay JS Inline Scripts
What it does:
Delays specific JavaScript code from running immediately, improving initial page speed.
How to use:
Add the name of the script or variable (e.g., variable_first) in the Delay JS Inline field.
Save changes.
What happens:
Scripts listed here will run after the page has loaded or when needed, not immediately.
Example Code Block:
<script>
var variable_first = 'this code is first';
console.log(variable_first);
</script>
Now, the output becomes:
Delay All JavaScript
What it does:
Delays the loading of all non-essential JavaScript, helping improve page load speed and user experience.
When to use it:
Use this option to defer ads, tracking scripts, widgets, or other third-party JS files that aren’t needed right away.
Common Examples Delayed by Default:
gtag(Google Analytics)adsbygooglegoogletagmanagerhtml5.jsplupload.full.min.jsscripts.chitika.net...and many more
Add specific keywords to accurately identify inline JavaScript or external JavaScript files that should not be delayed.
That’s it! We hope this article was helpful.
Need Help?
If you need assistance, feel free to:
Visit the Cloudways Support Center
Chat with us: Need a Hand > Send us a Message
Or create a support ticket anytime.