Defer loading of JavaScript in WordPress


If we use the tool  PageSpeed Insights from Google to analyze our WordPress is quite probable that among the items to be corrected as follows:

Remove blocking JavaScript and CSS display the contents of the upper half of the page

What this means in our web CSS files are loaded to style pages and Javascript files to generate dynamic elements, among other things . Typically, these files are located in the top of the web, so that the browser loads these contents before the code of the page itself, causing longer wait until contents are displayed in the browser.

To solve this Google recommended to place only at the top Javascript and CSS code that will be used in the displayed page or make a deferred load code. The first option is impractical in WordPress, as it would be very difficult to find the specific code that is loaded on each page, but you can do something with deferred loading.

First, deferred loading of CSS is not recommended because, to do so, the page is initially displayed no design to pass maquetar after charging, which usually causes a strange effect on the load.

The deferred loading of JavaScript itself can be tested, considering that this deferred loading can sometimes cause problems in the web, especially if you are using plugins with dynamic performance and image galleries, or WordPress theme itself it has those elements. Therefore, you can test the deferred load, and only if we see that everything is working well on the web we leave it on.

The first way to achieve that delayed loading of JavaScript is to add the following code to the file functions.php of the theme you're using:
 function footer_enqueue_scripts () {

 remove_action ( 'wp_head' , 'wp_print_scripts' );

 remove_action ( 'wp_head' , 'wp_print_head_scripts' , 9);

 remove_action ( 'wp_head' , 'wp_enqueue_scripts' , 1);

 add_action ( 'wp_footer' , 'wp_print_scripts' , 5);

 add_action ( 'wp_footer' , 'wp_enqueue_scripts' , 5);

 add_action ( 'wp_footer' , 'wp_print_head_scripts' , 5);


add_action ( 'after_setup_theme' , 'footer_enqueue_scripts' );

To check if the applied code worked can load our website and view the source code to analyze whether the files js loaded last. Keep in mind that not necessarily all files js will be moved to the bottom of the web.

If you do not want to modify the code there are several plugins for WordPress that also serve to delay the burden of JavaScript at the bottom of the web . One option would be the plugin  JS & CSS Script Optimizer . Once installed we will see in section Settings option Script Optimizer . Here you can configure some aspects of the functioning of the plugin: combining Javascript and CSS files into a single archvio, add exceptions to the optimization, etc. That way, if a problem occurs upon activation of the plugin we can always apply configuration changes to see if the problem is solved.

There are other plugins that are used to do the same, more or less options added: Scripts to Footer , JavaScript to Footer , JCH Optimize , etc.

Another way of delaying the load of JavaScript or CSS is to make an asynchronous parallel load to other web content, rather than do a load sequentially (other elements behind). To do this, we can use a plugin like Async JS and CSS . This plugin also adds in Settings  option Async Settings , where you can configure the operation of the plugin: elements loaded asynchronously, charging method of CSS, etc.

Remember again that if you try any of these plugins or modifications to the code have to do tests on the front of the site to verify that everything is working as it should. In case of any problem it is better not to postpone the burden of JavaScript and CSS.

It also is important to note that this deferred load does not always have to translate into an improvement in the score we get in PageSpeed, being able to make the case that even the note down. For such cases it will also be desirable to disable these plugins.

Members online

No members online now.