A simple strategy to optimise asset delivery in WordPress

Published June 20, 2019
.* :☆゚

I was working on finishing and auditing a website today and realised, over the course of at least the past three+ years, I have been a lazy developer.

I had a look at the assets being loaded in on a page, and honestly, I really need to use conditionals more. Code splitting may not be a thing for WordPress sites (at the moment) but I think I can definitely do better when it comes to assets delivery.


The typical WordPress way to serve scripts and styles is to register them in functions.php and enqueue them. You can place them in the header or footer too, manually, but the enqueue method is just a way easier method of managing all your assets in one place.

<?php 
function unicorn_tears_assets() {
    wp_enqueue_script( 'gmaps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE', '', date("dmY"), true );
    wp_enqueue_style( 'unicorn-tears-styles', get_template_directory_uri() . '/dist/css/style.min.css', '', date("dmY")  );
    wp_enqueue_script('unicorn-tears-scripts', get_template_directory_uri() . '/dist/js/script.min.js', ['jquery'], date("dmY"), true);
}
add_action( 'wp_enqueue_scripts', 'unicorn_tears_assets' );

Now, imagine doing all of this…but with conditionals.

<?php 
function unicorn_tears_assets() {
    if(is_page('contact')) {
        wp_enqueue_script( 'gmaps', 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE', '', date("dmY"), true );
    }

    wp_enqueue_style( 'unicorn-tears-styles', get_template_directory_uri() . '/dist/css/style.min.css', '', date("dmY")  );
    wp_enqueue_script('unicorn-tears-scripts', get_template_directory_uri() . '/dist/js/script.min.js', ['jquery'], date("dmY"), true);
}
add_action( 'wp_enqueue_scripts', 'unicorn_tears_assets' );

It may seem obvious to you now that you’ve seen how incredibly simple this strategy is, but to be completely honest, I’ve never bothered or really even thought to do this before.

In the years I’ve worked on pre-existing sites, many of which have been created by teams of people….not one have I noticed at any point an effort to control scripts or styles apart from the use of a caching plugin which is common practice for WordPress sites. I suppose that laziness has somewhat influenced my own lazy practices because I never even thought to conditionally load in assets until today.


I recently worked on a number of edits to the State Buildings site, and they had an interesting approach to assets.

They de-registered all default scripts from WordPress like jQuery, and re-enqueued them using a cdn. This approach makes a lot of sense to me because a lot of users would already have common scripts like jQuery or Bootstrap cached on the browser, and a cdn may arguably have a faster load time than a shared server.

However, one noticeable flaw I noticed was that some scripts that weren’t even being used at all were being loaded on the page for no other reason than it may be used by the client “in the future”.

In saying that, I am guilty of this logic too.

In the past, I have included things like slick, google maps, and isotope on almost every page of a website simply because…that was how it was always done.

But now, I’ve just come to realise it is a bit nonsensical to load all this stuff in the first place when the likelihood of it being actually used on a page is close to zero. Especially things like Google Maps which really doesn’t need to be loaded in on every page.


As I said before, I know this all sounds terribly obvious, but when you work with other people’s work for a while you get a feel for what is acceptable and what isn’t. For some reason, it became acceptable to throw all your dependencies on a page and hope for the best.

It’s no wonder WordPress gets such a bad rap for being bloated. In many ways it can be, but a WordPress site is really only as bloated as it is allowed to get. If you’re loading in multiple unnecessary scripts, that’s on you. If you rely on a mountain of plugins, that’s on you.

It’s actually incredibly simple to optimise the delivery of assets on a page using WordPress’ conditionals. Things like is_page(), is_post_type_archive() or is_home() will do the job. And there’s way more where that came from.

I used to think concatenating all scripts was a good idea, but now I think you just need to ensure the scripts are necessary for the page itself, and weigh the pros and cons of conditionally loading a script in vs. the overall page weight.