)
2378867408 4cc90791d6 1

How to Minify CSS and JavaScript

by

Last Updated: 3 years ago by BrodNeil

Have you tried to test your website or blog only to find out that it did not pass the Google’s PageSpeed Insights?

Here is a suggestion to help you get a better result in Google’s PageSpeed Insights.  This is not meant to be a step-by-step guide; yet I am hoping that this can serve your purpose and save you time.

  1. I use the following plugins :
    1. Speed Booster Pack
    2. WP Smush
  2. I am also lucky to use SiteGround as my web host/server, which has a caching plugin ready for my WordPress sites.
  3. When necessary, I use the following online tools to minify my CSS and JavaScript files:
    1. Javascript-Minifier.com
    2. CSSMinifier.com

Minify CSS and JavaScript Files

Here are the steps I do when manually minifying CSS and JavaScript files:

  1. I go to Google’s PageSpeed Insights and paste the website URL I want to test.
  2. I check the results.
  3. If a CSS or JavaScript file still needs to be minified even after using the Speed Booster Pack, I give time for the plugin to work.  If same files are still recurring during the next tests, I will then look for that CSS or JavaScript file via CPanel or FTP.
  4. After locating the file, I will copy that file and rename the copy. Ex. style.css is copied and renamed to style-raw.css.
  5. After making and renaming the copy, I will then open the file and copy the entire content. Ex. Copy-paste content in style.css into the clipboard.
  6. If it is a CSS file, I will copy-paste the file to the tool box in CSSMinifier.com; and for JavaScript I do the same in Javascript-Minifier.com.  Use the left box.
  7. After copy-pasting, you simply just have to click Minify and retrieve the results located at the right box.
  8. Go back to the said file via CPanel or FTP and then paste the retrieved CSS or JavaScript back to where you got it in the first place. Ex. if you copy-pasted from the style.css in step 4, then paste the minified version of that file on same file — that is style.css in our example.
  9. Once done, save the changes.
  10. Go back to Google PageSpeed Insights and do the test again.

Let me know what you think of the steps. Do you find this helpful? If yes, please consider sharing this to others via Facebook, Twitter, Google+, blog, etc.

Thank you.