Do you want to minify files on your WordPress site? Minifying your WordPress CSS and Javascript files can make them load faster and speed up your WordPress site. In this guide, we will show you how to minify CSS/Javascript files in WordPress to improve performance and speed.
What is Minify and When Do You Need it?
The term ‘Minify’ is used to describe a method which makes your website file size smaller. It achieves this goal by removing white spaces, lines, and unnecessary characters from the source code.
Usually it is recommended to be used only for files that are sent to user’s browsers. This includes HTML, CSS, and JavaScript files. You can minify PHP files too, but PHP is a server-side programming language and minifying it will not improve page load speed for your users.
The obvious advantage of minifying files is improved WordPress speed and performance. Compact files are faster to load and improve your site’s speed.
However, some experts believe that the performance improvement is very small for most websites and not worth the trouble. The minification only decreases few kilobytes of data on most WordPress sites. You can reduce more pageload time by simply optimizing images for web.
Here is an example of normal CSS code:
body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}
After minifying the code it will look like this:
body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}
If you are trying to achieve 100/100 score on Google Pagespeed or GTMetrix tool, then minifying CSS and JavaScript will significantly improve your score.
Having said that let’s take a look at how to easily minify CSS/JavaScript on your WordPress site.
Minify CSS/Javascript in WordPress
First thing you need to do is install and activate the Better WordPress Minify plugin. For more details, see our step by step guide on how to install a WordPress plugin.
Upon activation, the plugin will add a new menu item labeled ‘BWP Minify’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.
On the settings page, you need to check the first two options to automatically minify JavaScript and CSS files on your WordPress site.
You can now click on the Save Changes button to store your settings.
There are many other advanced options on this page. The default settings will work for most websites, but you can review and change these options on a case by case basis.
Next, you need to head over to your website. Right click anywhere and then select ‘View Page Source’ from browser menu.
You will now see the HTML source code generated by your WordPress site. If you look closely, you will notice that this plugin will load CSS/JavaScript files from plugin’s own folder instead of your WordPress themes and plugins.
These are the minified versions of your original CSS and JavaScript files. Better WordPress Minify plugin will keep them cached and serve the minified versions to browsers.
That’s all, we hope this article helped you learn how to minify your WordPress site. You may also want to see our ultimate guide on how to speed up WordPress for beginners.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
I’m looking for an outstanding Minify plugin. Reading this post I was willing to install Better WordPress Minify. Over at the WordPress repo I noticed that this plugin wasn’t updated in three years. I also noticed that there was not much going on on the support page.
I’m sure you can understand my hesitation to install this plugin.
Question is…. can I do it safely with the latest WordPress and php version or do you recommend another plugin at this moment.
HTH
Adri
I’m using Autoptimize for most of my websites and it’s going very well.
It has options for minify HTML, CSS and JS files.
This plugin hasn’t been tested with the latest 3 major releases of WordPress!
if you are using W3 Total Cache plugin, many of the WordPress users use this plugin to increase web PageSpeed. You might be aware that this plugin offers a feature to Minify CSS, JavaScript and HTML files. I would recommend this, because it serve the purpose and you don’t need to use additional plugin for Minification.
hello there,
Once I checked the minify option from one of my cache plugin whose name I don’t know now, but it destroyed my theme. So I am in worry dost the plugin that you have suggested will do the same or it won’t destroy my theme when I install it? I have themify ultra theme.
thanks,
sophie.
I agree with JEREMY
Thank you for your article. is there another plug in you might recommend? Better WordPress Minify has not been updated in 2 years. Thank you
informative and useful appreciating for your effort
Your posts are always both useful and appreciated. Many thanks.
Hello,
I enjoyed the article, but I have a suggestion. I noticed with a lot of the WP Beginner articles that they feature a plugin based solution. I think that’s great, but at times it’s nice for advanced users to see some behind the scenes stuff.
There are a few articles that you have that show the plugin way and then a manual (for advanced WordPress users) way. I like those articles because it’s geared toward the novice and advanced WP user or developer.
As time permits, could you please consider updating the article to feature a how to minify for advanced users/developers?
Thanks!
I agree with you JERMY. But as from the website name i.e wpbeginner.com Here the word Beginner is used, which means it is not Pros.
Lol read the website domain you’re on. It’s WP beginner, not WP Advanced