Load JavaScript Only on Specific WordPress Pages to Improve Performance

When loading JavaScript in a WordPress theme or plug-in, the officially recommended method is to use wp_enqueue_script() to load. This function can specify the dependent library of JavaScript, specify the version of the JavaScript file, and set it to be loaded at the top or bottom of the page. It is very flexible and convenient. However, the plugin is missing a setting parameter that specifies loading JavaScript on certain pages. Fortunately, we can implement this function ourselves through WordPress functions.

Why should JavaScript be loaded on a specific page?

When a relatively large library is only used on a certain page or a few pages, we do not need to load all scripts on each page, but only need to load them in specific page templates to prevent other pages from loading unnecessary JavaScript files, which will affect the page opening speed and increase server overhead.

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

Only load specified JavaScript files on pages that use a certain page template

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

//注册加载函数到 hook 上
add_action('wp_enqueue_scripts', 'my_theme_load_scripts');
 
// 加载样式和脚本
function my_theme_load_scripts(){
   wp_enqueue_script('jquery');

   // 加载每个页面都需要的 JavaScript 文件
   wp_enqueue_script('my_second_script', get_template_directory_uri() . '/js/main.js');
 
   if(is_page()){ //检查当前页面
      global $wp_query;
      // 插件是否使用了某页面模板
      $template_name = get_post_meta( $wp_query->post->ID, '_wp_page_template', true );
	  if($template_name == 'portfolio-archive.php'){
         // 如果使用了指定的页面模板，加载需要库
	     wp_enqueue_script('my_third_script', get_template_directory_uri() .'/js/imagesloaded.js');
         ...
	  }
   }
}

in actualWordPress theme developmentAt work, not every topic requires this operation. If a theme uses relatively few JavaScript files, and loading them all together is not big, we can merge these JavaScript files into one file. This will not only reduce the number of page requests, but also cache the script files to the client, so that there is no need to download them again when opening the next page. When to merge the code into one file and when to split the code to load on demand depends on the actual situation of the theme and can be determined flexibly.