Minification is the process of removing unnecessary characters from your code (whitespace, comments, shortening function and variable names, etc.), along with additional markup cleanup. This reduces the overall size of the file and parsing time.
Many developers minify their JavaScript beforehand these days; however, we still frequently encounter those who don’t. Therefore, it’s beneficial to minify all your JavaScript. This will ensure you shave off every KB possible for faster page loads.
How do you know if everything is minified on your WordPress site? If you’re speed testing in PageSpeed Insights, an unminified JavaScript file will trigger the “Minify JavaScript” warning. This impacts both Largest Contentful Paint (LCP) and First Contentful Paint (FCP).
Another way to check for minification is if the script has a .min.js on the end. (Example: file.min.js).
How to minify JavaScript with Perfmatters
You can easily minify your JavaScript with Perfmatters. Follow the steps below.
Step 1
Click into the Perfmatters plugin settings.
Step 2
Click on the “JavaScript” menu.
Step 3
Under the “Minify” section, toggle on “Minify JavaScript.” The minified version will then automatically be loaded on your WordPress site instead of the original.
Step 4
Scroll down and click “Save Changes.”
The minified JS generated by Perfmatters is stored locally in the following directory: /wp-content/cache/perfmatters/sitename/minify
Things to keep in mind:
- Minification will automatically skip files that have
.min.jsin the names. - Files will automatically be compared, and those that won’t result in a smaller file will not be replaced.
How to add JavaScript minification exclusions
Unlike Delay and Defer JS, exclusions usually aren’t needed for minification. However, there might be an instance where you still need to add one.
Add JS minification exclusion by script
Enter the script’s name into the “Excluded from Minification” box, such as script.js (one per line). The script name needs to be the original file name, not the minified one.
How to exclude a page/post from JS minification
You can exclude an individual post, page, or custom post type from using the Minify JavaScript feature. In the editor, on the right-hand side, uncheck “Minify JavaScript.” This will exclude the entire page. This can be useful for, say, a checkout or contact us page that might have more issues than the rest of the site.
How to programmatically exclude JS from minification
You can programmatically exclude JS from minification if needed using our perfmatters_minify_js_exclusions filter.
For example, you exclude a specific JavaScript file from minification only on single posts.
add_filter('perfmatters_minify_js_exclusions', function($exclusions) {
if(is_single()) {
$exclusions[] = 'example.js';
}
return $exclusions;
});How to clear minified JavaScript
If you make design or code changes on your site, you might need to clear your minified JS, along with all cache layers, to ensure all changes are properly displayed.
We recommend clearing cache layers in the following order: theme, third-party plugins, Perfmatters (Clear Used CSS, Clear Minified JS/CSS), hosting provider, and CDN. To verify your JS changes have been updated, we suggest viewing your website in your browser’s incognito or private mode.
The minified JS generated by Perfmatters is stored locally in the following directory: /wp-content/cache/perfmatters/sitename/minify
To clear the minified JS, follow the steps below.
Step 1
Click into the Perfmatters plugin settings.
Step 2
Click on the “JavaScript” menu.
Step 3
Scroll down, and under the “Minify” section, click on “Clear Minified JS.”
How to clear minified JS from the admin bar
You can clear the Minified JS from the admin bar.
How to programmatically clear minified JS
If you need to programmatically clear minified JS, you can use our class function:
Perfmatters\Minify::clear_minified('js');Troubleshooting minification
If you have another plugin already doing JS minification, we recommend turning the feature off in one of the plugins to prevent any conflicts.