Optimize page performance by loading JavaScript on-demand only on specific WordPress pages

When loading JavaScript in WordPress themes or plugins, the official recommended method is to use wp_enqueue_script() to load, this function can specify the JavaScript dependency libraries, specify the version of the JavaScript file, and set it to be loaded in the header or footer of the page, which is very flexible and convenient. However, the plugin lacks a parameter to specify the JavaScript to be loaded on certain pages. Fortunately, we can do it ourselves with WordPress functions.

Why should I load JavaScript on a specific page?

When a large library is used only on one or a few pages, we don't need to load all the scripts on each page, but only in specific page templates, so as not to load unneeded JavaScript files on the other pages, which affects the page opening speed and increases the server overhead.

For example, our theme has a page template named “Portfolio Archive”, in this template, we need to use “imagesloaded, masonry, isotope, jquery-ias ” These 4 JavaScript plugins to realize the effect of this page, and these libraries in other pages are not used, if directly in all the page load, each page will load these 4 libraries, even if the page does not need to use these libraries to achieve the effect.

Load the specified JavaScript file only on pages that use a page template.

In the following code, on the first page we load the jQuery and Main.js files needed for each page, then determine whether the current page uses the specified page template, and then based on the results of the judgment to load the JavaScript files needed for the specified page template.

//Register the load function to the hook
add_action('wp_enqueue_scripts', 'my_theme_load_scripts');

// Load styles and scripts
function my_theme_load_scripts(){
   wp_enqueue_script('jquery'); // Load styles and scripts.

   // Load the JavaScript files needed for each page.
   wp_enqueue_script('my_second_script', get_template_directory_uri() . '/js/main.js');

   if(is_page()){ //check current page
      global $wp_query;
      // Whether the plugin is using a page template
      $template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true );
if($template_name == 'portfolio-archive.php'){
         // If the specified page template is used, load the required library
wp_enqueue_script('my_third_script', get_template_directory_uri() .'' /js/imagesloaded.js'); ...
         ...
}
   }
}

在实际的 WordPress Theme DevelopmentAt work, not every theme needs to do this. If a theme uses fewer JavaScript files, it is not much to load them all together, we can merge them into one file, which not only reduces the number of page requests, but also caches the script file to the client, so that you don't have to download it again when you open the next page. Specifically when to merge the code into a file, when to split the code to load on demand, depends on the actual situation of the theme, flexible determination.