Level of Difficulty – [Easy]
The file size savings can vary anywhere between 10% and 38%, depending on white-space and non code related wording.
Even though this is a very easy task to complete, this is for the person that has an idea for which files they would like to minify.
Especially the CSS stylesheet file, that is created in a way that is easy to modify, this will be a file that you will most definitely want to backup before compressing.
Even if you are familiar with modifying a stylesheet, you will want to create a back up file in a different name, because after minifying a CSS stylesheet, it will look like it was processed in a blender.
Below are screenshots of a normal CSS stylesheet and the same one after it has been minified.
Before Minifying or Compressing Our CSS Stylesheet
All the rest to the right of the image is white-space.
After Minifying Our CSS Stylesheet
This may be tough for the human to follow and understand the code, but it is a piece of cake for the browser to read.
Minifying CSS Stylesheets to Reduce File Size
If you would like to go down this road, then you will need access to your WordPress site… you will need to find the CSS stylesheet within your WordPress theme.
It should have a similar file name to ‘style.css’, but to be sure, you can access your source code and look at the top of your page and look for a URL that ends with ‘.css’.
To access your Source Code, right click your mouse, then click on ‘View Page Source’ or whatever wording is used to see your ‘Source Code’.
With this open, hit the buttons ‘Ctrl’ + ‘F’ on your keyboard at the same time which will open a ‘Find’ box… type in the box ‘.css’.
Once you’ve done that, it will be time to look for your file within your WordPress theme and re-save the file as another name for a backup.
Accessing Your CSS Stylesheet Via cPanel
If you are using Dreameweaver or Filezilla to access your Wordress site, I am going to make the assumption that you already have some basic understanding for accessing and modifying your site’s files and information… you can follow the same path as I explain it for the cPanel.
– – – –
Log in to your cPanel, go to your ‘File Manager’ link (under ‘Files’), open the ‘File Manager’, click on the folder that contains your WordPress site, whether it’s ‘Public_html’, ‘www’ or another name.
From your cPanel’s left side files, click on ‘wp-content’ > ‘themes’ > ‘your-theme’s-name’… when you click on your theme’s name from the left panel, all of the files should show.
It’s time to look for your stylesheet… it could be in the directory of your theme or possibly in a folder that would most likely be marked ‘css’.
Once you locate your CSS stylesheet, it’s time to create a new one with a different name for backup purposes.
I have always used something similar to ‘style_raw.css’ or ‘style_original.css’ to indicate my stylesheet is in its original or raw condition before compressing.
In order to create a new file named style_raw.css or whatever name you have chosen, click on the + sign (top-left) to add a ‘file’ (not folder) and name it ‘your_chosen_name.css’ and click on the ‘Create New File’ button.
Now that you have your new backup CSS file, it’s time to go to your original CSS stylesheet, find the ‘style.css’ file or whatever the name of your stylesheet is, single click on the name to highlight it.
Click on ‘Edit’ or ‘Code Editor’ (doesn’t really matter which one at this point) from the top (above all the files).
Place your cursor anywhere inside the Edit box, then with your keyboard, hit Ctrl + A to highlight the code, then Ctrl + C to copy the code.
Now go back to your backup CSS file and hit Ctrl + V on your keyboard, or right click and Paste the code into your backup file.
Click on SAVE CHANGES… your back up file is there right?
– – – –
Time to Compress Your CSS Stylesheet
At this point, you should be able to visit the Online Minifyer tool to compress your stylesheet.
If you need to recopy the stylesheet that you want to minify, go ahead and do that now, then paste your stylesheet code into the CSS compressor box (link below) and click on the ‘Minify’ button.
CSS Compressor/Minifyer – http://www.freeformatter.com/css-minifier.html
After it has done its thing, copy your minified code from the box and paste it back into your ‘style.css’ stylesheet (or whatever your original theme’s stylesheet name is), then save the file… pretty easy.
You can verify that it all worked out OK by visiting your Source Code again, find the link to your stylesheet and click on it.
You should see one single line going from the left side to the right side… if not, hit F5 on your keyboard to refresh it.
Here is what the CSS compressor will do for your file:
- Removes useless white spaces, indentation characters and line breaks
- Strips all comments
- Removes the last semi-colon of a style declaration and extra semi-colons
- Removes empty CSS declarations
- Removes units when using zero values
- Removes the leading 0 if a float value is lower than one
- Changes RGB color values to a shorter hexadecimal format
- Hexadecimal colors following the pattern #AABBCC are reduced to #ABC
- Keeps a single charset per CSS file removing all extra declarations
- None values are converted to 0 whenever safe to do so
NOTE: You can do the same with your WordPress plugin stylesheets if you choose, but keep in mind that each time you update a plugin, the stylesheet will be overwritten, so it kinda seems like a waste of time.
You can find your plugin stylesheets inside the folder named ‘plugins’ which you will find in the ‘wp-content’ directory.
- Quicker download times for your users.
- Reduced bandwidth consumption of your website.
Many of them are there in case you decide to use some form of functionality with your theme.
So, it will be up to you whether you decide to make a backup of your originals using the word ‘raw’ or ‘original’ into the file name.
If it is in a straight line from left to right, then it is already compressed.
In Future Articles – We will be discussing additional WordPress Performance issues, so be sure to put your email address in the box below for notification.