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.

Diese Optionen ermöglichen Ihnen:

• Group JS: Grouping several Javascript files into a single file will minimize the HTTP requests number
• Gruppen-CSS: Durch das Gruppieren mehrerer CSS-Dateien in eine einzelne Datei wird die Anzahl der HTTP-Anfragen minimiert.

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.

Was für ein Unterschied, von 2,8 auf 0,56 Sekunden! Wie wir Ihnen zu Beginn dieses Beitrags sagten, können wir die Ladezeit verbessern ;)

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.

Um den erweiterten Dateiausschluss zu verwenden, müssen Sie zuerst einen Scan durchführen, die Option aktivieren und auf Scan ausführen klicken.

  Um die auf Ihrer Website geladenen Skripte auflisten zu können, muss WP Speed of Light Ihren Ordner scannen, um sie aufzulisten. Sie sind normalerweise alle in Ihrem /wp-content-Ordner enthalten, der alle Ihre Plugins und Themes gruppiert. Wählen Sie diesen Ordner (mindestens) und klicken Sie auf “Jetzt scannen”

Es wird einen Scan durchführen, klicken Sie abschließend auf Ergebnisse anzeigen, wenn der Scan abgeschlossen ist.

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.

Dies hilft Ihnen, Dateien auszuschließen und auf diese Weise Probleme zu lösen, die bei der Minimierung von Ressourcen auftreten können… Der Prozess der Gruppierung und Minimierung erfordert immer noch einige Arbeit, insbesondere beim Testen, aber es lohnt sich auf jeden Fall, und Sie werden immer in der Lage sein, zu testen, wie es funktioniert, indem Sie den Geschwindigkeitstest direkt von WP Speed of Light ausführen.
 
Fahren Sie fort und probieren Sie WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light