)
2378867408 4cc90791d6 1

How to Minify CSS and JavaScript

by

Last Updated: 2 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.

brodneil uses this ai-generated caricature of not himself
BrodNeil
Website | + posts

I am passionate about what I do.

Recommendations

  • FastPixel WP Caching plugin - FastPixel offers all the latest technology on how to accelerate your website neatly packed in a 1-minute-setup plugin.
  • BrandPush - gets you featured on 200+ news sites. Go viral with massive exposure through the likes of Daily Herald, Fox40, Digital Journal, Benzinga, The Chronicle Journal, NewsMax, AP, and even through Bloomberg and MSN.
  • SimpleTraffic - drives real visitors to your website, blog, or affiliate link. Get started with 2500 free visitors on your 5 day free trial!
  • MediaServe - is a web hosting service that values free speech, providing content policies and support aligned with these values. It is also known as free speech web hosting.
  • Leaver - is a web hosting service tailored for conservatives, providing content policies and support aligned with conservative values --- conservative web hosting.
  • Pictory - Create videos QUICKLY from scripts, articles, videos, or other channels.

Discover more tools - See our recommended tools, software, and services.

While I spend over 48 hours a week on SEO and digital marketing, it's not accurate to say that I live and breathe them..

This is what I believe: "And whatsoever you do, do it heartily, for YHWH, and not for men." (Colossians 23:3)

Recommendations

Discover more tools - See our recommended tools, software, and services.