Improve page load speed by loading JavaScript code asynchronously

JavaScript execution may modify the DOM, affecting the presentation of the page, by default, it is safe to load and execute JavaScript first, then load and execute the code behind it, when loading and executing JavaScript code, it will stop the loading and execution of the code behind it, this behavior is called blocking, and this mode is synchronous loading. If we can let these JavaScript download and execute without affecting the execution of the subsequent page code, the page loading speed will be improved to a certain extent. Let's take the social network code as an example to demonstrate how the WordPress ThemesAsynchronous loading of social media sharing buttons in Improve page loading speed.

What is JavaScript Asynchronous Loading?

Asynchronous loading means that when the browser downloads and executes JavaScript, it does not affect the loading and execution of the code behind. There are many ways to realize asynchronous loading, the method introduced in this article is the most commonly used, this method is in the page within the tag, using JS to create a Script element and inserted into the Document. This achieves a non-blocking download of JavaScript code.

Benefits of asynchronous loading.

• Will increase page speed (reduce loading time). Colleagues who load and execute the following pages do not need to wait for responses from other (social network) servers.
• The content of the site is relatively independent, and if the social network's servers load the supermarket, the site's content will not be affected.
• It helps to reduce the user waiting time, lower the bounce rate, and is helpful for SEO.
• Users will be more likely to share our posts if they stay on our site for a longer period of time.

Below is the way to implement asynchronous loading of social network code in WordPress, three steps can be achieved, we can modify the code below as needed to load the files we need.

Step 1: Create the JavaScript file

For example, let's add the following code to a file called share.js and place it in the js folder in the theme root folder.

/* Asynchronously load the JavaScript for the share buttons */
 (function(w, d, s) {

   // Insert the loaded code
   function go(){
  var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
  if (d.getElementById(id)) { return; }
    js = d.createElement(s); js.src = url; js.id = id;
    fjs.parentNode.insertBefore(js, fjs); }; }
  };

       // Load the social network sharing code
  load('//connect.facebook.net/en_US/all.js#xfbml=1', 'fbjssdk'); //Facebook
  load('https://apis.google.com/js/plusone.js', 'gplus1js'); //Google+
  load('//platform.twitter.com/widgets.js', 'tweetjs'); //Twitter
  load('//platform.linkedin.com/in.js', 'lnkdjs'); // LinedIN
  load('//assets.pinterest.com/js/pinit.js', 'pinitjs'); ///Pinterest
    }
 if (w.addEventListener) {
        w.addEventListener("load", go, false);
    }
  else if (w.attachEvent) {
        w.attachEvent("onload", go); }
    }
}(window, document, 'script')).;

If any of you have followed the asynchronous loading statistics code of Baidu Statistics or Google Analytics, you will find that their code is similar to the above code.

Step 2: Load share.js file into the theme

Add the following code to the theme's functions.php Documentation:

/* Insert code into the theme's functions.php */
function meks_load_scripts(){

  // Load only on the post page, use "is_singular()" if you need to load in the page, if you also need to load in the archive page, just remove the following judgment statement.
  if(is_single()){
    wp_enqueue_script( 'meks_async_share', trailingslashit(get_template_directory_uri()).' /js/share.js', array( 'jquery' ));;
  }
}

add_action('wp_enqueue_scripts', 'meks_load_scripts');

Step 3: Place the HTML code into the theme's template

The last step is to insert a “placeholder” in the theme's template. The script will be executed and will populate the place where the “placeholder” is inserted with the share button, preferably in a loop. The code example is as follows:

<ul class="meks_share">
<!-- twitter -->
<li><a class="twitter-share-button" data-count="vertical" data-via="mekshq" data-url="<?php the_permalink() ?>"></a></li>

<!-- LinkedIN -->
<li><script type="IN/Share" data-counter="top" data-url="<?php the_permalink() ?>"></script></li>

<!-- facebook like -->
<li><div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-href="<?php the_permalink() ?>"></div></li>

<!-- g+ -->
<li><g:plusone size="tall" data-href="<?php the_permalink() ?>"></g:plusone></li>

<!-- pinterest -->
<li><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink() ?>&media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&description=<?php echo urlencode(get_the_title()); ?>" class="pin-it-button" count-layout="vertical"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></li>
</ul>

In addition, there are two specialized JavaScript libraries to help us implement asynchronous loading, one is the ControlJSA man named HeadJS, for those who are interested.