Making clean WordPress Plugins

It is a very common thing for plugin developers to include assets (CSS and JS mainly) for their plugin functionality. After all, today’s web would be nothing without styling and async calling!

However, loading a lot of CSS and JS files adds loading time (and bytes). If they have functionality we need, that’s more than ok. However I’ve seen plugins including empty JS/CSS files, just because.

There are various ways to check if you should (or not) load your assets:

Is it empty?

If your plugin’s assets are empty, do not enqueue them. It might be empty (0 bytes), but the user’s device still has to connect to the server and download them, only to do… nothing!

Is it useful for the current page?

Now, this is where things become tricky and interesting. I love a good problem! This needs some strategic analysis on what the plugin does, if the output has something we can check etc.

If - for example - we are building something that is used only in the cart page, we can add an if to load it (or not load it). Here’s an example:

if (is_cart()) {
    wp_enqueue_script('my-js-file', get_stylesheet_directory_uri() . '/js/custom.js',  array('jquery'), false);
}

This will only enqueue the custom.js file in the cart page. Otherwise, we are loading a file that won’t be used 90% of the time.

A more difficult thing to check, is if we are loading shortcodes and need some JS for tabs or AJAX calls. How can I know where the user added the shortcode?

It’s much simpler than you are thinking! Actually, there are 2 different ways to do that! The first method, which might come at a cost: use has_shortcode()!

add_action('wp_enqueue_scripts', 'dp_conditionally_load_shortcode_js');
function dp_conditionally_load_shortcode_js() {
    global $post;
    
    // Replace 'your_shortcode_tag' with your actual shortcode name (without brackets)
    if ( is_a($post, 'WP_Post') && has_shortcode( $post->post_content, 'your_shortcode_tag' ) ) {
     wp_enqueue_script('my-js-file', get_stylesheet_directory_uri() . '/js/custom.js',  array('jquery'), false);
    }
}

What’s the cost? On every pageload, we are checking the post content for our shortcode. On a small site with low traffic, this is not going to cause an issue. However on big commerce sites, with insufficient caching, this might make the page load 1 second later. And this is much more common than you think! But there is another way. Enqueue it from within the shortcode:

function my_shortcode_func() {
    wp_enqueue_script('my-js-file', get_stylesheet_directory_uri() . 'js/custom.js',  array('jquery'), false);
    return '<div>Shortcode Content</div>';
}
add_shortcode('my_shortcode', 'my_shortcode_func');

Compress it till you break it!

Ok, that’s a little bit dramatic. However, minifying all your static assets can improve loading times. JS is notoriously horrific when minifying - especially when not correctly engineered, so make sure to optimize your code for this! You can try tools like minify-js.com, but make sure to test before you deploy. And make sure you don’t do it on a friday! ;)

Inspect, optimize and remove code

The same over-engineering problem shows up in how plugins register and load their assets. We are all eager to add more functionality to our code. However, we always do that without considering how the app will behave. Test your code, remove parts that are not needed, and optimize your code. Yes, it’s nice to have methods to do one thing, makes for a cleaner code. But it also adds complexity. If your method passes values around, without adding value, you are just adding overhead and complexity. There’s no need to do this:

class OrderService {
    public function process($data) {
        return $this->validate($data);
    }

    private function validate($data) {
        return $this->checkStock($data);
    }

    private function checkStock($data) {
        return $this->chargeCard($data);
    }

    private function chargeCard($data) {
        // Actual logic finally here
        return PaymentGateway::charge($data['amount']);
    }
}

when you can do this, and go on with your day:

Class OrderService {
    public function process($data) {
        $this->validate($data);
        $this->checkStock($data);
        
        return PaymentGateway::charge($data['amount']);
    }

    private function validate($data) {
        // Complex validation logic here
    }
    
    private function checkStock($data) {
        // Complex stock logic here
    }
}

That’s all folks

Performance is often an afterthought in plugin development, but small habits add up. Before shipping, ask yourself: are my assets actually needed on this page? Are they empty? Are they minified? Is my code doing more work than it needs to?

None of these checks are expensive to implement — but skipping them can be expensive for your users. A faster plugin is a better plugin, and your users (and their servers) will thank you for it.

See you next time!