Get Our Latest Posts Sent Directly to Your Email Inbox!

How to Minify/Compress JavaScript Files and CSS Stylesheets | Rule #6

Please Share:

Level of Difficulty – [Easy]

The minification or compression process is the practice of removing unnecessary characters and white space from JavaScript and CSS stylesheet code to reduce its size, thereby improving your site speed and loading times.

When JavaScript or CSS stylesheet’s files are minified, all the comments are removed as well as the unneeded white-space.

How to Minify/Compress JavaScript Files and CSS Stylesheets

This minification process for JavaScript files and CSS stylesheets will improve response times and web performance for your WordPress site, because the size of the downloaded file is reduced.

The file size savings can vary anywhere between 10% and 38%, depending on white-space and non code related wording.

Rule #6 – Minify/Compress JavaScript and Stylesheet Files

This one is pretty straight forward… compress your CSS stylesheets and JavaScript files to increase your website’s speed.

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.

All you really need to do this is to back up your original files before you compress your CSS sytlesheet(s) or JavaScript files.

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?

Moving ON…

– – – –

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.

Moving On to JavaScript Files…

Minifying JavaScripts to Reduce File Size

Why Would I Want To Compress JavaScript?

Well… there are a number of reasons why compressing your javascript files are a good idea:

  • Quicker download times for your users.
  • Reduced bandwidth consumption of your website.
  • Reduced number of HTTP requests on your server when combining JavaScript files into 1 compressed file, thus reducing the server load and allowing more visitors to access your website.
  • Comments and white-space are not needed for JavaScript execution; Removing them will reduce file size and speed up script execution times.

As it is stated in the 3rd line of the list, the best advice is to follow the directions for Combining JavaScripts into 1 or 2 Files, then minifying those file(s).

Here’s the thing… your WordPress theme will most likely have a large number of JavaScript files, but you will not be using all of them… you’ll be lucky if you are using 1/2 of them.

Many of them are there in case you decide to use some form of functionality with your theme.

If you are not using all of the functions for your theme, then your JavaScript will not be triggered, meaning it won’t be used, which will be a lot of minifying for nothing.

If you decide to move forward anyways, you will need to locate your JavaScripts… they will most likely be in a ‘js’ folder within your theme.

The chances of anybody ever modifying a JavaScript file is pretty slim, other than the original author.

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.

You can copy then paste your JavaScript code into the compressor box using the link below.

JavaScript Compressor/Minifyer – http://jscompress.com/

NOTE: One thing you may find with many JavaScript files are that they are already compressed by the author, but it is worth a look to find out.

You can find out by visiting your source code… find a JavaScript file that you would like to check, and click on the link.

If it is in a straight line from left to right, then it is already compressed.

Closing Comments for Minifying JavaScript and CSS Stylesheet Files

This is a no-brainer… if you minify your stylesheets or JavaScript files, you will be saving somewhere between 10% and 38% of your file size, meaning faster downloading of your pages.

If You Have Combined/Modified Your JavaScript and CSS Stylesheets

For those who have followed the articles, ‘How to Combine CSS Stylesheets Into 1 File‘ or ‘How to Combine JavaScripts Into 1 File‘, all you would need to do is create a couple of additional files calling them ‘custom_plugins_raw.css’ and ‘custom_plugins_raw.js’ respectively.

Then minify the original files being used for your site, using the links above, and click SAVE CHANGES.

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.
YOUR Turn… What WordPress Performance Issues is Your Site Having Troubles with? Slow Loading Times? Takes Forever to Connect? Share YOUR Thoughts Below!

Don't Miss a Single Post!

Enter Your Email and We Will Send You Articles Just Like This Every Week!

Privacy guaranteed. We will never share information

Tags: , ,

Category: How to..., Website Performance, Website Speed

Leave a Reply