For you more advanced folks looking to speed up your website, by addressing JavaScript included in your website, I’ll discuss some of your options in this article that relate to your Theme Blvd WordPress theme.
Removing Unnecessary Scripts
If you’ve built a fairly simple website using Jump Start or another Theme Blvd theme, you may find there’s scripts being included in your website that you don’t need. So it’s not a bad idea to tighty things up a bit and remove those.
Now, the most traditional way to do this would be to de-enqueue them. However, this can get a tricky because you’d need to know exactly how every script in the framework is enqueued, and at what priority. Also, it’s possible that (1) a script might also have an enqueued CSS files that goes with and even worse, (2) it may have some associated JavaScript in the framework’s themeblvd.js file that would then break.
So the best way to tighty up unused assets is to use the themeblvd_global_config filter. You can read more about how that works here, but I’ll give you a snippet to start with here.
Go through the following snippet and only keep the items, you know you don’t need. This might be tricky and may involve some trial and error.
/**
* Disable framework assets.
*/
function my_global_config( $setup ) {
// Disable Flexslider
$setup['assets']['flexslider'] = false;
// Disable Bootstrap (JavaScript and CSS)
$setup['assets']['bootstrap'] = false;
// Disable Magnific Popup lightbox script
$setup['assets']['magnific_popup'] = false;
// Disable Superfish script (used for main menu dropdowns)
$setup['assets']['superfish'] = false;
// Disable EasyPieChart script
$setup['assets']['easypiechart'] = false;
// Disable Charts.js script
$setup['assets']['charts'] = false;
// Disable isotope script (used for frontend post sorting/filtering)
$setup['assets']['isotope'] = false;
// Disable Owl Carousel for gallery sliders
$setup['assets']['owl_carousel'] = false;
// Disable primary themeblvd.js
$setup['assets']['primary_js'] = false;
// Disable primary themeblvd.css
$setup['assets']['primary_css'] = false;
return $setup;
}
add_filter('themeblvd_global_config', 'my_global_config');
Remeber that the assets above may be different in different versions of the theme framework. So for the most recent list of available assets you can disable in the global configuration, see the themeblvd_setup() function in /framework/includes/general.php of your current theme.
Google-Hosted jQuery
jQuery is a popular JavaScript library used in most WordPress websites, and it’s used in your website, built with a Theme Blvd theme. You can often get a slight performance boost by loading google-hosted version of jQuery, opposed to including WordPress’s, which exists on your own server.
From your child theme’s functions.php, you’ll de-register WordPress’s jQuery and swap it for the google-hosted version of the file.
/**
* Swap WordPress's jQuery for Google-hosted jQuery.
*/
function my_jquery() {
// Get version of WordPress's jQuery
$ver = $GLOBALS['wp_scripts']->registered['jquery']->ver;
// De-register WordPress jQuery
wp_deregister_script('jquery');
// Register google-hosted jQuery
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/' . $ver . '/jquery.min.js', array(), $ver);
}
add_action('wp_enqueue_scripts', 'my_jquery');
Minifying JavaScript
As we discussed in the previous article, if you’re including custom scripts from your child theme, you may consider minifying them. This can have give a nicer performance boost to your website’s JavaScript. — This basically just means to mash all the JavaScript up together to reduce the physical size of the JavaScript file.
If you’re including third-party scripts, often they’ll provide you both the minified and unminified versions. Make sure to download the the minified version, if possible, and enqueue that into your website.
And when it comes to your custom scripts, you can minify those, as well. There are many tools online you can find to help you with that.
Personally, I use the Atom code editor for all of my web development, and I use an atom-minify package. I’ll have an unminified version of the JavaScript file I make changes to, and then every time I’m ready to save, it’ll automatically generate a separate .min version of the file, which is what I enqueue with WordPress.
Further Compression
If you really want to explore other options to speed things up, the W3 Total Cache plugin has a feature built-in that’ll compress scripts together into one file call, and minify them. You may run into hiccups with complex sites using a ton of plugins, but in general, this is a nice way to speed things up fairly significantly.
This is extremely helpful in the WordPress system, because all theme and plugin authors should be enqueuing scripts into your site separately. This is important for WordPress system for handling scripts. However, when it gets to your final website, taking this extra step of optimization is your decision, and something you can choose to do for your final website.