Question

I guess this is more of a general best practices question.

WordPress recommends including scripts using wp_enqueue_script which adds the scripts to a stack, but everything in the stack is loaded on every page.

However, for the sake of keeping the initial page load for the first-time visits as quick as possible and to prevent rouge code breaking other code, wouldn’t it be best to include the scripts only on the page it is needed?

I’ve seen a lot of articles about minifying code, but not much about when/where to load your code. Can someone recommend literature about this?

Many thanks in advance.

Answer 1

You can conditionally enqueue a script with any (I think) template tag. I just tested this one and it worked like a charm:

// hook to action
add_action( 'wp_enqueue_scripts', 'conditional_script' );
// function to load script on only the front page
function my_conditional_script() {
    if( is_front_page() ) {
        wp_enqueue_script( 'hello', get_template_directory_uri() . '/hello.js' );
    }
}

For you, it sounds like you might want to use if ( is_page( array( 1, 2, 3 ) ) ) {...

I don’t know how various caching plugins (like W3 Total Cache) that offer gzip and minifying will handle that, but, even if it doesn’t help, not loading on all pages might be worthwhile.