In WordPress there are many ways to optimize the loading of your assets, such as using Grunt in your build process (allowing to you load features of your themes and plugins only when needed), combining them through plugins such as Autoptimize, or just manually combining them.

There are a number of ways this can be done and some ways are inherently better than others. Due to WordPress being dynamic manually combining files can lead to issues with upgrading, conditional loading and more but it can be done.

WordPress works off of a system of enqueues and registers. Which basically works like this, you register a file in WordPress so it can be identified by the CMS and it will then be enqueued the enqueue is what actually forces the CSS OR JS file to load on the frontend of the website. Now below are the steps to begin to manually combine CSS and JS files.

To begin you need to analyze the entire website and pick out what CSS files are loaded (it’s best to only do this with theme files (if you are the one who has written the theme) to avoid issues with keeping it updated. To find the handles of the scripts you can install a plugin such as WP Asset CleanUp (this way you can find the files of the enqueued scripts and styles on your website.

Scroll down to the bottom of the screen until you find the plugin menu (on your homepage). It will look like the below picture.

As you can see the handles of all the CSS and JS files are given now you need to write your code to remove these handles.

This code can be added to your functions.php or site-specific plugin I recommend placing it in a theme file as it will change depending on the theme you are using.

You will want to write a function such as the one below.

add_action( 'wp_enqueue_scripts', 'optimize_website_loading', 9999 );

function optimize_website_loading() {
 wp_deregister_style( 'woocommerce-general' );
 wp_deregister_script( 'woocommerce' );
}

Notice how we are using the de_register as opposed to dequeue the reason for this is to prevent the file from being recognized some styles will not dequeue properly if they are dependent on another while it’s more proper to dequeue the files deregister is simply faster if you aren’t going to be using the files at all.

After you have your nice list of CSS and JS files added to the list, you will need to combine them (please keep in mind if you activate the above code before your combined your files it will break (obviously) and you will not be able to find the CSS and JS files necessary.

To combine your CSS files aggregate a list of all the files on the site by going to view-source on your page then you will want to search (Control + F) and search for “.css” this will find all of the CSS files on your site.

Now you need to use a reliable minifier to minify the CSS without breaking it, I recommend going to https://cssminifier.com/ you will now go down the list of each CSS file and paste their code in the order as you see the CSS files on your site. In my case, i want to combine js_composer then add the newspaper/style.css. After your CSS has been minified add it to notepad, and name it optimized-styles.css you will now need to upload that file to your server by FTP or FileManager. I recommend adding it directly to your theme (if it’s a child theme or your own regardless the code will look similar to what I have below.

After your CSS file has been uploaded you need to enqueue it so go back to the original script you are working on and add to it.

add_action( 'wp_enqueue_scripts', 'optimize_website_loading', 9999 );
function optimize_website_loading() {
 wp_enqueue_style( 'optimized-styles', get_template_directory_uri() . '/optimized-styles.css' );
 wp_deregister_style( 'woocommerce-general' );
 wp_deregister_script( 'woocommerce' );
}

Great! Now your CSS will be enqueued and is optimized next comes the JavaScript files which we are going to skip over most of the repeating steps but simply make sure all of your JavaScript (except for any of the files that have the red triangle in asset cleanup (yes this includes JQuery)) are dequeued.

The next step is to minify and combine the JS which is slightly easier as Google has already built a tool to handle that and it is called Closure Compiler its an interesting and powerful Minify engine. In 9/10 cases you should only use the White Space optimization if you are a developer attempt to use the more advanced modes on each individual file then concatenate + white space minify the remaining files. The reason for this is because, the other minify modes are more dangerous and are known to cause bugs with poorly written JavaScript.

After you have combined your JavaScript you need to enqueue it on your website. Now, if you have excluded JQuery (and know that there are no dependencies then this should work without any problems). Simply download your JS file and upload it in the same directory as the CSS. Then you need to enqueue the JS file.

add_action( 'wp_enqueue_scripts', 'optimize_website_loading', 9999 );
function optimize_website_loading() {
 wp_enqueue_style( 'optimized-styles', get_template_directory_uri() . '/optimized-styles.css' );

wp_register_script('optimized-scripts', get_template_directory_uri() . '/js/optimized-scripts.js','','1.0', true); 
wp_enqueue_script('optimized-scripts'); }
 wp_deregister_style( 'woocommerce-general' );
 wp_deregister_script( 'woocommerce' );
}

And now the JS file will be enqueued into the footer of your website. Now, if this is causing you issues such as JS warnings, sliders aren’t working, or other issues you will need to troubleshoot this. If you are not a developer don’t use this method as it is too prone to breaking your site and is not a sustainable way of maintaining your website. If you have any questions feel free to ask them below but I am not going to optimize your website for you (unless you are looking to purchase our Website Optimization Service).

LEAVE A REPLY

Please enter your comment!
Please enter your name here