How one can Minify CSS / JavaScript Information in WordPress (3 Methods)

Do you need to minify information in your WordPress website?

Minifying your WordPress CSS and JavaScript information could make them load sooner and velocity up your WordPress website.

On this information, we are going to present you easy methods to simply minify CSS/JavaScript information in WordPress to enhance efficiency and velocity.

What’s Minification and When Do You Want it?

The time period ‘minify’ is used to explain a technique that makes your web site file sizes smaller. It does this by eradicating white areas, strains, and pointless characters from the supply code.

Right here is an instance of regular CSS code:

After minifying the code it would appear like this:

Normally, it’s endorsed to solely minify information which might be despatched to consumer’s browsers. This consists of HTML, CSS, and JavaScript information.

You possibly can minify PHP information too, however minifying it won’t enhance web page load velocity to your customers. That’s as a result of PHP is a server-side programming language, that means it runs on servers earlier than something is shipped to the customer’s internet browser.

The benefit of minifying information is improved WordPress velocity and efficiency, since compact information are sooner to load.

Nonetheless, some specialists imagine that the efficiency enchancment could be very small for many web sites and never definitely worth the hassle. Minification solely removes a number of kilobytes of knowledge on most WordPress websites. You possibly can cut back extra web page load time by optimizing photos for the online.

If you’re making an attempt to attain 100/100 rating on Google Pagespeed or GTMetrix device, then minifying CSS and JavaScript will considerably enhance your rating.

Having stated that, let’s check out easy methods to simply minify CSS/JavaScript in your WordPress website.

We’ll go over 3 totally different choices you’ll be able to select from:

Technique 1. Minify CSS/JavaScript in WordPress Utilizing WP Rocket (Advisable)Technique 2. Minify CSS/JavaScript in WordPress Utilizing SiteGroundTechnique 3. Minify CSS/JavaScript utilizing Autoptimize

Prepared? Let’s get began with our prime beneficial methodology.

Technique 1. Minify CSS/JavaScript in WordPress Utilizing WP Rocket

This methodology is simpler and is beneficial for all customers. It really works no matter which WordPress internet hosting you might be utilizing.

First, you’ll want to set up and activate the WP Rocket plugin. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.

WP Rocket is the perfect WordPress caching plugin available on the market. It means that you can simply add caching to WordPress and considerably enhance web site velocity and web page load occasions.

For extra particulars, see our tutorial on easy methods to set up and arrange WP Rocket in WordPress.

Upon activation, you’ll want to go to the Settings » WP Rocket web page and change to the ‘File Optimization’ tab.

From right here, you’ll want to test the Minify CSS information possibility.

WP Rocket will then present you a warning that this might break issues in your website. Go forward and click on on the ‘Activate Minify CSS’ button. You possibly can all the time deactivate this feature if it causes any points together with your web site.

Subsequent, you’ll want to scroll right down to the JavaScript Information part beneath.

Right here, merely test the field subsequent to the ‘Minify JavaScript information’ possibility.

Once more, you’ll see a warning that this might break issues in your website. Go forward and click on on the ‘Activate Minify JavaScript’ button.

After that, don’t overlook to click on on the Save modifications button to retailer your settings.

WP Rocket will now begin minifying your CSS and JavaScript information. You possibly can clear your cache within the plugin settings to guarantee that it begins utilizing the minified CSS and JavaScript for the subsequent web site customer.

Technique 2. Minify CSS/JavaScript in WordPress Utilizing SiteGround

If you’re utilizing SiteGround as your WordPress internet hosting supplier, then you’ll be able to minify CSS information utilizing SiteGround Optimizer.

SiteGround Optimizer is a efficiency optimization plugin that works on their very own platform. It really works properly with their Ultrafast PHP to enhance your website’s loading occasions.

Merely set up and activate the SiteGround Optimizer plugin in your WordPress website. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.

After that, you’ll want to click on on the SG Optimizer menu in your WordPress admin sidebar.

This can take you to SG Optimizer settings.

From right here you’ll want to click on on the ‘Go To Frontend’ button underneath ‘Different Optimizations’.

On the subsequent display, you’ll want to change on the toggle subsequent to the ‘Minify CSS information’ possibility.

Subsequent, you’ll want to change to the JavaScript tab and activate the toggle subsequent to ‘Minify JavaScript Information’ possibility.

That’s all! Now you can empty your WordPress cache and go to your web site to load minified variations of CSS and JS information.

Technique 3. Minify CSS/JavaScript utilizing Autoptimize

This methodology is beneficial for customers who aren’t on SiteGround and never utilizing WP Rocket.

First, you’ll want to set up and activate the Autoptimize plugin. For extra particulars, see our step-by-step information on easy methods to set up a WordPress plugin.

Upon activation, you’ll want to go to the Settings » Autoptimize web page to configure the plugin settings.

From right here, first you’ll want to test the choice ‘Optimize JavaScript Code’ underneath JavaScript Choices.

After that, you’ll want to scroll right down to the CSS Choices and test the field subsequent to the ‘Optimize CSS code’ possibility.

Don’t overlook to click on on Save Adjustments button to retailer your settings.

Then you’ll be able to click on the Empty Cache button to start out utilizing your minified information. The plugin will also be used to repair render blocking JavaScript and CSS in WordPress.

We hope this text helped you minify CSS and JavaScript in your WordPress website. You may additionally need to see our tutorial on optimizing core internet vitals in WordPress and comply with our final WordPress efficiency information.

For those who appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You can even discover us on Twitter and Fb.

The submit How one can Minify CSS / JavaScript Information in WordPress (3 Methods) first appeared on WPBeginner.