WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Minify CSS / JavaScript Files in WordPress

How to Minify CSS / JavaScript Files in WordPress

Last updated on March 6th, 2017 by Editorial Staff
246 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Minify CSS / JavaScript Files in WordPress

Do you want to minify files on your WordPress site? Minifying your WordPress CSS and Javascript files can make them load faster and speed up your WordPress site. In this guide, we will show you how to minify CSS/Javascript files in WordPress to improve performance and speed.

How to Minify CSS/JavaScript Files in WordPress

What is Minify and When Do You Need it?

The term ‘Minify’ is used to describe a method which makes your website file size smaller. It achieves this goal by removing white spaces, lines, and unnecessary characters from the source code.

Usually it is recommended to be used only for files that are sent to user’s browsers. This includes HTML, CSS, and JavaScript files. You can minify PHP files too, but PHP is a server-side programming language and minifying it will not improve page load speed for your users.

The obvious advantage of minifying files is improved WordPress speed and performance. Compact files are faster to load and improve your site’s speed.

However, some experts believe that the performance improvement is very small for most websites and not worth the trouble. The minification only decreases few kilobytes of data on most WordPress sites. You can reduce more pageload time by simply optimizing images for web.

Here is an example of normal CSS code:

body {
margin:20px;
padding:20px;
color:#333333;
background:#f7f7f7;
}
h1 {
font-size:32px;
color#222222;
margin-bottom:10px;
}

After minifying the code it will look like this:

body{margin:20px;padding:20px;color:#333;background:#f7f7f7}h1{font-size:32px;margin-bottom:10px}

If you are trying to achieve 100/100 score on Google Pagespeed or GTMetrix tool, then minifying CSS and JavaScript will significantly improve your score.

Having said that let’s take a look at how to easily minify CSS/JavaScript on your WordPress site.

Minify CSS/Javascript in WordPress

First thing you need to do is install and activate the Better WordPress Minify plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, the plugin will add a new menu item labeled ‘BWP Minify’ to your WordPress admin bar. Clicking on it will take you to plugin’s settings page.

BWP Minify settings

On the settings page, you need to check the first two options to automatically minify JavaScript and CSS files on your WordPress site.

You can now click on the Save Changes button to store your settings.

There are many other advanced options on this page. The default settings will work for most websites, but you can review and change these options on a case by case basis.

Next, you need to head over to your website. Right click anywhere and then select ‘View Page Source’ from browser menu.

View page source of a WordPress site

You will now see the HTML source code generated by your WordPress site. If you look closely, you will notice that this plugin will load CSS/JavaScript files from plugin’s own folder instead of your WordPress themes and plugins.

These are the minified versions of your original CSS and JavaScript files. Better WordPress Minify plugin will keep them cached and serve the minified versions to browsers.

That’s all, we hope this article helped you learn how to minify your WordPress site. You may also want to see our ultimate guide on how to speed up WordPress for beginners.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

246 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

19 Comments

Leave a Reply
  1. Adnan says:
    May 24, 2019 at 8:41 pm

    What if I am not happy with results, can I undo with a click of a button and return to non-minify state?

    Reply
    • WPBeginner Support says:
      May 28, 2019 at 1:35 pm

      If you used the plugin then you would need to remove the plugin to stop it from minifying and clear any caching on your site.

      Reply
  2. Echo says:
    May 22, 2019 at 7:19 am

    It would be nice to minify the admin area as well. Anyone ever do that?

    Reply
    • WPBeginner Support says:
      May 22, 2019 at 11:43 am

      We do not have a guide on that at the moment.

      Reply
  3. Justin says:
    Mar 28, 2019 at 1:41 pm

    This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.

    Reply
    • WPBeginner Support says:
      Mar 29, 2019 at 10:20 am

      Thank you for letting us know, we’ll be sure to take a look at this.

      Reply
  4. Oskar says:
    Dec 20, 2018 at 12:14 pm

    I tried to find it for my site but I couldn’t find it?

    Reply
  5. Adri Oosterwijk says:
    Jun 18, 2018 at 11:48 am

    I’m looking for an outstanding Minify plugin. Reading this post I was willing to install Better WordPress Minify. Over at the WordPress repo I noticed that this plugin wasn’t updated in three years. I also noticed that there was not much going on on the support page.

    I’m sure you can understand my hesitation to install this plugin.
    Question is…. can I do it safely with the latest WordPress and php version or do you recommend another plugin at this moment.

    HTH

    Adri

    Reply
    • Felipe says:
      Sep 26, 2018 at 8:20 pm

      I’m using Autoptimize for most of my websites and it’s going very well.
      It has options for minify HTML, CSS and JS files.

      Reply
  6. Dave says:
    Mar 3, 2018 at 9:08 pm

    This plugin hasn’t been tested with the latest 3 major releases of WordPress!

    Reply
  7. Shaker says:
    Feb 3, 2018 at 12:44 am

    if you are using W3 Total Cache plugin, many of the WordPress users use this plugin to increase web PageSpeed. You might be aware that this plugin offers a feature to Minify CSS, JavaScript and HTML files. I would recommend this, because it serve the purpose and you don’t need to use additional plugin for Minification.

    Reply
  8. Sophie says:
    Jan 24, 2018 at 12:39 pm

    hello there,

    Once I checked the minify option from one of my cache plugin whose name I don’t know now, but it destroyed my theme. So I am in worry dost the plugin that you have suggested will do the same or it won’t destroy my theme when I install it? I have themify ultra theme.

    thanks,

    sophie.

    Reply
  9. Rashmi Korlekar says:
    Aug 17, 2017 at 11:58 pm

    I agree with JEREMY

    Reply
  10. Beth says:
    Mar 26, 2017 at 9:04 am

    Thank you for your article. is there another plug in you might recommend? Better WordPress Minify has not been updated in 2 years. Thank you

    Reply
  11. santy says:
    Mar 7, 2017 at 9:05 am

    informative and useful appreciating for your effort

    Reply
  12. Steve Eilertsen says:
    Mar 6, 2017 at 11:22 pm

    Your posts are always both useful and appreciated. Many thanks.

    Reply
  13. Jeremy says:
    Mar 6, 2017 at 3:48 pm

    Hello,

    I enjoyed the article, but I have a suggestion. I noticed with a lot of the WP Beginner articles that they feature a plugin based solution. I think that’s great, but at times it’s nice for advanced users to see some behind the scenes stuff.

    There are a few articles that you have that show the plugin way and then a manual (for advanced WordPress users) way. I like those articles because it’s geared toward the novice and advanced WP user or developer.

    As time permits, could you please consider updating the article to feature a how to minify for advanced users/developers?

    Thanks!

    Reply
    • Hamza Bhatti says:
      Oct 7, 2017 at 4:44 am

      I agree with you JERMY. But as from the website name i.e wpbeginner.com Here the word Beginner is used, which means it is not Pros.

      Reply
    • Branden says:
      Jan 9, 2018 at 7:10 pm

      Lol read the website domain you’re on. It’s WP beginner, not WP Advanced

      Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
Churnly Coupon
Get 30% OFF on Churnly WordPress automated churn-busting plugin.
AccessPress Themes
AccessPress Themes Coupon
Get 15% off on AccessPress Themes collection of premium WordPress themes and plugins.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.