This article is for an older version of CSS Optimizer (v1.2 and below). For v1.3 and above, please view this version instead.
This article explains how to set up CSS Optimizer on your website. Last updated: Oct 18, 2021.
You will need
CSS Optimizer – You can download CSS Optimizer from ZippiSite’s dashboard after signing up for a plan.
Autoptimize – You need this free plugin for CSS Optimizer to run properly. You can download it from WordPress Plugin Directory. It will combine all CSS into a single file for our CSS Optimizer to work on.
Once CSS Optimizer and Autoptimize are both installed, let’s proceed to set up Autoptimize.
Setting up Autoptimize
- Install Autoptimize on your website and activate it.
- In Autoptimize Settings page > CSS Options, enable Optimize CSS Code.
Enable Optimize CSS Code.
- Enable Also Aggregate Inline CSS.
- Under Misc Options, disable Also optimize for logged in editors/ administrators.
Disable Also optimize for logged in editors/ administrators
- Click Save Changes and Empty Cache.
With these settings applied, open your website in an incognito window to see if it is still working. Please note that enabling Also Aggregate Inline CSS may break your website. If it is working fine then you can leave the settings as it is. If your website is not working correctly then try disabling Also Aggregate Inline CSS and see if that fixes it.
How Autoptimize Works
Here is an example website with Autoptimize deactivated. In the page source of this example website, we can see the many separate CSS files from the theme and plugins.
How the example looks like.
CSS files from the theme and plugins.
Let’s activate Autoptimize and see what happens.
The website looks the same. But in the page source, all the separate CSS files have been collected into one single file.
Website looks the same after Autoptimize is activated.
The separate CSS files have been collected into one single file.
This is a very simple website and it already includes three CSS files. For a regular website, you should expect to see 20 or even more CSS files being used. Instead of accessing multiple CSS files, Autoptimize collects them all into one single file for convenience. But this is not enough, we can further optimize our CSS with CSS Optimizer.
Setting up CSS Optimizer
- Install CSS Optimizer on your website and activate it.
- Copy your authentication token from your account on ZippiSite.
Where to find your authentication token.
- On your website, go to CSS Optimizer Options page.
- Paste your authentication token into the Token field.
Paste your authentication token into the Token field.
- Tick the Enable checkbox.
- Click Save Changes.
CSS Optimizer is now running. Refresh your website and make sure it displays correctly. And that’s it. CSS Optimizer is successfully installed.
How CSS Optimizer Improves Your Website
When CSS Optimizer is activated, it will take the CSS file made by Autoptimize and optimize it. You can tell that CSS Optimizer has worked on it as the CSS file name previously ending with .css has been renamed to .purge.css.
CSS Optimizer off, ends with .css.
CSS Optimizer on, ends with .purge.css.
If you deactivate CSS Optimizer, the CSS file name will revert to .css only.
In the page source of our example website, we can access the CSS file to compare before and after CSS Optimizer is activated. The .css is without CSS Optimizer while .purge.css is with CSS Optimizer.
CSS Optimizer off – long scrollbar, big file.
CSS Optimizer on – short scrollbar, tiny file.
Noticed how small and efficient CSS Optimizer has made the CSS file. Comparing them side by side we can see the scrollbar is much shorter in the purge version. Even with this very simple website, the savings in file size is huge. Running CSS Optimizer on a real-world website will definitely save you a lot of bytes in CSS files. And this will benefit you as Google favors this type of clean and efficient coding.