WordPress uses core software, theme and plugins to give shape to a website. Cascading Stylesheets or CSS are the backbone of your layout design and each of these items will add their own CSS. You can view the CSS files used on your site by looking at the page source in the browser. Optimizing these CSS files is necessary to improve the page loading speed of a WordPress site.
What is CSS Minify?
Minifying CSS is the process of removing unnecessary spaces, comments and indentation from a CSS file.
webnots.com
This helps to compress and reduce the size of the file thus reduce the time needed for downloading these files from the server. Developers use comments in CSS files for understanding and tracking purposes. However, these comments are not necessary for the functionality and hence removing them will not affect the working design of your website.
Why to Minify CSS?
Next question comes to your mind is that why someone should remove spaces and comments from a text file to reduce just few KBs in size. The problem is that if you do not reduce the file size, Google PageSpeed Insights and other speed measurement tools will show a recommendation for minifying CSS files.
- You can find this problem as “Minify CSS” under “Opportunities” section of Google PageSpeed Insights tool.
- The tool will also show you the size of savings you can achieve with the CSS minification.
- “Minify CSS” problem will affect First Contentful Paint (FCP) and Largest Contentful Paint (LCP). As LCP is part of Core Web Vitals, your page experience will be affected if you do not minify CSS files.
- Serving minified CSS file will resolve this problem and you can find the check is passed and showing in green under “Passed Audits” section.
Example of Minifying Content and File
Below is an example of small piece of CSS code with spaces and comments.
/* Content */
div.content{
padding-left: 390px;
background: #fff;
position: relative;
}
div.panes{
max-width: 1400px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 40px;
}
.section{ padding-top: 40px; }
/* End Content */
Go to our CSS minify tool and paste the above code.
Click “Submit” button to get the minified code as a result.
The minified code will look like below:
div.content{padding-left:390px;background:#fff;position:relative;}div.panes{max-width:1400px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 40px;}.section{padding-top:40px;}As you can see all the comments and white spaces are removed in the minified output. Most WordPress themes use style.css file and you can use the same tool to upload the entire style.css file and get the minified file as a result.
Click “Download” button to get the minified file to your computer.
The final output file will have a single line removing all white spaces and comments with reduced size.
Minifying CSS and JS in WordPress
Now that you understand the purpose of minifying and how it works. However, using online tools to minify files will not work in WordPress due to the following reasons:
- There will be many files used by your theme, plugins and core WordPress. Manually minifying and replacing the original files is a time consuming task.
- Files will be updated with your theme, plugin and core WordPress update. Hence, manually uploaded file will be replaced with normal version with each update.
To avoid this manual hassle, you can use a minify plugin to do the work automatically and dynamically without affecting the update process. These plugins will compress your files and serve with .min extension indicating the minified file is served instead of the original file.
| CSS File Version | Example Name |
|---|---|
| Normal Version | style.css |
| Normal Version with Query String | style.css?ver=123456 |
| Minified Version | style.min.css |
Sometimes, your theme and plugins may also offer minified version of the files and you do not need to minify them again.
How to Minify CSS and JS Files in WordPress?
There are many plugins available for minifying CSS and JavaScript in WordPress. However, the usage depends on the situation and we will explain different plugins that do the trick for you. In Google PageSpeed Insights, you will see a link to “WordPress plugins” and click on it. This will take you to the WordPress plugin repository page by applying a search filter minify+CSS.
Removing Query Strings
Before try to minify your CSS files, we recommend removing the query string parameters attached to the file URLs. Minifying works for the static CSS and JS files looks something like below:
https://www.your-site.com/wp-content/themes/theme-name/style.cssHowever, theme and plugin files will have a version parameter as a query string attached to the URL. Generally, it will look like below and these URLs are considered as dynamic in nature.
https://www.your-site.com/wp-content/themes/theme-name/style.css?ver=1626631618For minifying to work better, it is recommended to remove the query strings from the file URLs. This also will help CDN and other systems (servers and browsers) to cache your files effectively. Considering this fact, we will explain the plugins that offer minify as well as query string removing features.
1. Hummingbird – Free Option
Plugins like W3 Total Cache has hundreds of options and difficult to setup for new WordPress users. On other hand, simple plugins like Autoptimize combine and minify files without doing them separately. This may not work on all hosting environment especially with HTTP/2 servers which do not need combining files. Also, combining can easily break the layout and it is better to have minify and combine options separately to control the behavior.
Hummingbird is one of the best free plugins for minifying CSS in WordPress. It also offers a complete caching solution so that you can use it as a caching plugin for your site.
- Go to “Plugins > Add New” section in your WordPress admin panel.
- Search for “minify” to find the “Hummingbird – Optimize Speed, Enable Cache, Minify CSS & Defer Critical JS” plugin. Click on “Install” button and then “Activate” to start using the plugin on your site.
- The plugin will ask you to scan and recommend the options. However, we will focus on the settings for removing query string and minifying CSS in this article.
- Go to “Hummingbird > Advanced Tools” section. Enable “Remove query strings from my assets” option against “URL Query Strings” under “General” section. Scroll down and click “Save Changes” button.
- Go to “Hummingbird > Asset Optimization” menu and enable “Automatic” option under “Assets” section.
- Scroll down and enable “CSS files” under “Configurations” section. Remember, just above this section you have an option called “Speedy” under “Assets” section to combine the CSS files. You can disable this if you find the layout is broken.
- Click “Publish Changes” button to apply the changes to your site.
2. WP Rocket – Premium Plugin
WP Rocket is the premium only plugin that changed the way people optimize WordPress sites. You have a simple dashboard section to navigate and toggle the required options without hassle.
- Purchase WP Rocket from the developer site and install on your site.
- You need to activate the license key to get the plugin update and support.
- Go to “File Optimization” tab and enable “Minify CSS files” option under “CSS files” section.
As mentioned above, WP Rocket offers minifying and combining as separate options for CSS files. You will also see a recommendation not to enable combine option for HTTP/2 servers. In this way you can toggle the required options to get good page speed score in Google PageSpeed Insights and other tools.
3. SiteGround Optimizer – Hosting Provided Plugin
Nowadays, it’s a trend that many hosting providers offer their own optimization plugin. This is the best option because the plugin works better on the native hosting environment. We explain here with SiteGround Optimizer plugin and you need to check with your hosting company whether they offer any plugin for minify purposes.
- SiteGround Optimizer plugin comes pre-installed with your site when you install WordPress in SiteGround hosting.
- Go to “SiteGround > Frontend” menu and enable “Minify CSS Files” under “CSS” section.
- Your settings will be automatically saved and you will see a success message showing “CSS Minification Enabled”. Make sure to click on the “Purge Cache” option showing on top admin bar to clear your old cached files.
- If there are any problems in the frontend, use “Exclude from CSS Minification” option to exclude specific CSS files and fix the issue.
As you can see, SiteGround Optimizer plugin also offers minify and combine as two different options to manage the result effectively.
4. Minify with CDN Like Cloudflare
Almost every WordPress site owner uses Content Delivery Network (CDN) to speed up the delivery of HTML, CSS and JS static files. Since these files are static and do not change all the time, it is a good option to use the minifying feature in your CDN setup instead of additionally using a plugin on your site. Here we will explain enabling minify option in Cloudflare CDN. You may need to check with your CDN provider on how to enable minify option.
- Login to Cloudflare account and select your site that you want to enable minify CSS option.
- Go to “Optimization” settings under “Speed” section.
- Scroll down on the right pane and enable “CSS” option against “Auto Minify”.
- Your settings are automatically saved and CSS minification is enabled for your WordPress site with Cloudflare.
There are two important points you should take care when using minify feature with your CDN setup:
- Make sure this feature is not overlapping if you are using caching plugin or the server side minify option. For example, WP Rocket plugin offers an add-on to configure Cloudflare setup to avoid interference. Similarly, you can configure Cloudflare settings in SiteGround hosting panel (called Site Tools).
- Whenever you update something on your site, go to your CDN setup and purge the cache. This will avoid serving old CSS and JS files and start using the latest updated versions.
How Do I Know Minifying Works?
The easy way to check whether your files are minified or not is to check the page source. Before enabling minify options, open any of your page in Chrome or other browser, right click on an empty area and select “View Page Source” option. This will open the page’s source content in a new tab where you can search for theme’s style.css. For example, below is how it looks with GeneratePress child theme showing style.css with version number.
After removing the query string and applying minify, you should find all static files are compressed and minified with .min.css version. In our example, GeneratePress child theme’s style.css will be available as style.min.css without any query string like below:
Another way of checking is to test your website in Google PageSpeed Insights tool. You should see “Minify CSS” item under “Passed Audits” section in the green color. This indicates the files are compressed and served with reduced size.
Final Words
Minifying CSS in WordPress is a simple task using plugins that helps to reduce the file size. You can use one of the above mentioned options and fix minify CSS issue in Google PageSpeed Insights tool. Though free plugin is sufficient to do this, we always recommend using a premium plugins like WP Rocket to get proper support if needed.
Leave a Reply
Your email is safe with us.