Remove/ Defer Render-blocking JavaScripts


How to reduce initial load time

  1. By removing un-neccessary scripts from header.
  2. By deferring scripts from header to footer.

1. Which scripts to remove?

Check your site speed at GtMetrix or Google Page Speed Tool

In Gtmetrix you will get the following warning:

Defer parsing of JavaScript

96.8KiB of JavaScript is parsed during initial page load. Defer parsing JavaScript to reduce blocking of page rendering.

https://wbxpress.net/wp-includes/js/jquery/jquery.js?ver=1.12.4 (87.0KiB)
https://wbxpress.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1 (7.7KiB)
https://wbxpress.net/ (2.1KiB of inline JavaScript)
https://wbxpress.net/wp-content/themes/wbxpress/js/responsive-menu.js?ver=1.0.0 (336B)

If you check with Google Page Speed Insights you will get:

Eliminate render-blocking JavaScript in above-the-fold content

Your page has 3 blocking script resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.

https://wbxpress.net/wp-includes/js/jquery/jquery.js?ver=1.12.4
https://wbxpress.net/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1
https://wbxpress.net/wp-content/themes/wbxpress/js/responsive-menu.js?ver=1.0.0 (336B)

Now in this tutorial we will solve the above issues.

Remove responsive-menu.js

You can remove responsive-menu.js in the following cases:

a. Your site dont have a menu.
b. Your site have a menu with minimum items and there is no sub-menu.

For the above cases you van safely remove this script as follows:

Open functions.php from your theme directory and remove the following line of code.

wp_enqueue_script( 'wbxpress-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );

Next you need to remove the following codes from your theme style.css

Remove all the codes under

/* Responsive Menu
——————————————— */

Remove all lines of codes inside media only screen containing the following word:

responsive-menu

2. Which scripts to Defer?

From the GtMetrix and Google Page Speed result you notice that the jquery is loaded at the time of site loading resulting increased initial loading time. So we can load jquery at the end of site loading. To achieve this you need to add the following function in your functions.php file.


16 responses to “Remove/ Defer Render-blocking JavaScripts”

  1. I am using WP and my website load time is 3s, before it was low like 1s. How can I lower down my site loading speed ?

    I am not good in PHP and tech stuff. Kindly help.

    Thanks

  2. I have created the site on WordPress when I am trying to reduce site page speed using google speed test. It’s showing to Reduce Render-blocking JavaScripts. After, reading your post I have done above method. My website speed optimized….

Leave a Reply

Your email address will not be published. Required fields are marked *