How to Minify CSS / JavaScript Files in WordPress (3 Ways)

0 0
Read Time:3 Minute, 4 Second

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 easily minify CSS/JavaScript files in WordPress to improve performance and speed.

The term ‘minify’ is used to describe a method that makes your website file sizes smaller. It does this by removing white spaces, lines, and unnecessary characters from the source code.

Here is an example of normal CSS code:

After minifying the code it will look like this:

Usually, it is recommended to only minify files that are sent to user’s browsers. This includes HTML, CSS, and JavaScript files.

The advantage of minifying files is improved WordPress speed and performance, since compact files are faster to load.

However, some experts believe that the performance improvement is very small for most websites and not worth the trouble. Minification only removes a few kilobytes of data on most WordPress sites. You can reduce more page load time by optimizing images for the web.

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.

We’ll go over 3 different options you can choose from:

Ready? Let’s get started with our top recommended method.

Upon activation, you need to visit the Settings » WP Rocket page and switch to the ‘File Optimization’ tab.

From here, you need to check the Minify CSS files option.

WP Rocket will then show you a warning that this could break things on your site. Go ahead and click on the ‘Activate Minify CSS’ button. You can always deactivate this option if it causes any issues with your website.

Next, you need to scroll down to the JavaScript Files section below.

Here, simply check the box next to the ‘Minify JavaScript files’ option.

Again, you’ll see a warning that this could break things on your site. Go ahead and click on the ‘Activate Minify JavaScript’ button.

After that, don’t forget to click on the Save changes button to store your settings.

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

This will take you to SG Optimizer settings.

From here you need to click on the ‘Go To Frontend’ button under ‘Other Optimizations’.

On the next screen, you need to switch on the toggle next to the ‘Minify CSS files’ option.

Next, you need to switch to the JavaScript tab and turn on the toggle next to ‘Minify JavaScript Files’ option.

That’s all! You can now empty your WordPress cache and visit your website to load minified versions of CSS and JS files.

This method is recommended for users who are not on SiteGround and not using WP Rocket.

Upon activation, you need to visit the Settings » Autoptimize page to configure the plugin settings.

From here, first you need to check the option ‘Optimize JavaScript Code’ under JavaScript Options.

After that, you need to scroll down to the CSS Options and check the box next to the ‘Optimize CSS code’ option.

Don’t forget to click on Save Changes button to store your settings.

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.

source

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post Judge rejects Elon Musk's bid to end 2018 settlement with SEC
Next post Wishpond Technologies has a 233 per cent upside, says Beacon

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.