How to group and minify resources in WordPress

Have the better performance possible is the dream of all everyone that manage a website, group and minify resources on WordPress is one of the best things we can do for that but it could be really hard. Group all your resources (css and js files mainly) may expose your website if you are not a developer because it may generates conflict.

WP Speed of Light is the best solution to perform your wordpress site because it has a lot of options to make your site load fast with a really friendly dashboard and yes, one of these options is group and minify resources. The single file inclusion/exclusion from the group and minify process is a key for a custom optimisation without conflicts.

We are going to use an example wordpress site for this blog post and we will learn how to do this so the process to configure everything will be easier.

How to do a WordPress JS and CSS minification

Let's learn how to do a wordpress js and CSS minification but first, we need to know what does the minification means “Minification refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on”.

Now what we are going to do is a speed test to our page in order to see the changes, for this example, we are using a site with woocommerce and some products so the first time it will load a little slowly.

Yes, 2,79 seconds to load the page, not bad but it could be better, just let´s minify the js and CSS and see the difference, go to WP Speed of light > SpeedUp > Group & Minify, you will be able to see the menu with all the options to minify. The plugin free version does include the group and minify option but the visual file exclusion is only available in the PRO Addon version.

PRO addon options are: Exclude inline script (Exclude inline script from minification), move scripts to footer (it allows you to speed up your site by moving all minified scripts to footer), Group font and Google Fonts(Group local fonts and Google fonts in a single file to be served faster) and Advanced file exclusion.
 
You have the option to minify, as you can see, JS, CSS and also the HTML now just activate these options, click on save and all your resources will be minified right away, it could have troubles as it is an advanced configuration but everything can be fixed with the exclusion of some code and files (with the pro addon).

Now all the developer job that could take hours is done in just some seconds.

Next step, WordPress optimize CSS and JS

With this plugin we will let that wordpress optimize CSS and js just by enabling the group options on the dashboard, go to WP Speed of Light > SpeedUp > Group & Minify, you are going to be able to see a dashboard with the options to group CSS and js.

These options allows you to:

• Group JS: Grouping several Javascript files into a single file will minimize the HTTP requests number
• Group CSS: Grouping several CSS files into a single file will minimize the HTTP requests number.

HTTP requests: these are requests that are made to the server every time that we select something or go to another page in the same site so if we can reduce these requests, the load time would reduce.

To check how much files, scripts you can group on your website, just open your browser console (right click > Inspect or F12) and open the network panel.

You can then list all file loaded by type, here in this example I've click on the JS file list only.

Now that we are on this settings, just enable the group options (Group CSS and Group JS) and click on save, take in mind that these options have to be used with caution and you will have to test your page because it may cause conflicts.

Let’s get serious and optimize font weight

What? Other optimization? Yes! you will be able to optimize the font weight and it will be as easy as enabling the option on the settings, just go to WP Speed of Light > SpeedUp > Group & Minify > Group fonts and Google Fonts option.
Group fonts and Google fonts option will allow you to group them in a single file to be served faster, this is pretty handy as most of the WordPress themes and layouts are coming with 2 or fonts by default with all declinaisons (regular, bold, italic...) 

Just enable that option, click on save and all the fonts will be grouped.

Now that we have activated all the options to minify and group the resources, we should see a difference in the load time of our site, Let’s check the speed.

What a difference, From 2.8 to 0.56 seconds! As we told you at the beginning of this post, we can make better the load time ;)

How to use the file minification exclusion

The minification could cause troubles in your site, it mainly happens when you group certain files that contain error in syntax error or similar variable, class name. That’s why with the “file minification exclusion” option, you will be able to exclude files from the minification and group process, go to WP Speed of Light > SpeedUp > Group & Minify, you will be able to see the Advanced file exclusion option.

In order to use the advanced file exclusion, you will have to run a scan first enable the option and click on Run Scan.

 
To be able to list the script loaded on your website, WP Speed of Light needs to scan your folder to list them. They are usually all contained in your /wp-content folder that group all your plugins and theme. Select that folder (at least) and click on “Scan Now”

It will run a scan, finally, click on view results when the scan is completed.

A list of files classified by type (All, JS, CSS, Font) should be displayed below. If you've identified one file that causes trouble, when activating the file group and minification, you can exclude it from here by using a simple ON/OFF switcher.

This will help you to exclude files and, in this way, easily solve any problem that may exist when minifying resources… Group and minify process still require some work, especially in testing, but it definitely worth the effort, and you will. be always able to test how it works by running the speed test directly from WP Speed of Light.
 
Go ahead and try WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light

×

×

Don't leave without sharing your email!

We can’t guarantee you’ll win the lottery, but we can promise some interesting informational news around WordPress or Joomla and occasional discounts.

Your Name:

Your Email:

Subscribe to our blog