Page speed is a critical measure of your website’s performance. Page speed is the time it takes for a browser to display a website. Faster load times ensure that a higher proportion of your visitors stay on your website while it is loading. Page speed also partly determines how well your website ranks in search engine results. Therefore, speeding up a WordPress website is usually at the top of a site owner’s wishlist.

How to Defer Parsing of JavaScript in WordPress, featured image

Page speed is an important part of the user experience which depends on a lot of things. This article assumes you’ve verified an underlying factor: running your website on a WordPress host fairly quickly.

Why Defer Parsing of JavaScript?

To understand the carryover technique of JavaScript parsing, let’s take a step back and discuss how a web browser displays a page. When your browser sends a request to your web server, the page returned by the server is downloaded as an HTML document. This HTML document contains text, code that represents various DOM elements, and resources such as images, stylesheets, and scripts.

The browser reads this HTML markup line by line. In addition, the resources on the page must be downloaded. Since images represent a large portion of the page size, it is recommended that you optimize images for your WordPress site. For JavaScript files, you must identify the scripts required to properly display your page. You can defer downloading non-essential scripts to speed up your web page.

Which Scripts to Defer?

An easier way to assess which scripts are essential for your page to load is to use a speed testing tool like GTmetrix. Enter your website URL and wait for the tool to evaluate it. On the results page, go to the PageSpeed tab and expand the “Unload JavaScript parsing” section. This section shows you a list of non-essential scripts that are loaded during the rendering process.

Defer Parsing of JavaScript in WordPress

You can defer javascript file by 2 methods:

  1. Without plugin
  2. With plugin

Without plugin (Only For WordPress user)

To do this, you need to log into your wp-admin. Then click on the appearance and then on the theme editor. Inside, find the Function.php file and paste the following code

function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
if ( strpos( $url, ‘jquery.js’ ) ) return $url;
return “$url’ defer “;
}
add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );

By using plugins

There are many which can help you fix your warning For example

  1. Wp rocket 
  2. Comet cache
  3. WP Deferred JavaScripts
  4. Autoptimize
  5. W3 Total Cache
  6. Speed Booster Pack
  7. Wp fastest cache

You can use any plugin of the 7 plugins, they are all amazing and made by masters. But here we are going to learn how you can fix the warning using autoptimize plugin.

Method 1

Autoptimize

 Now you need to install and activate the autoptimize 

After installation go to javascript options setting tab and check added Js file. and click save.

autoptimize javascript options

Other than that, you can even use the async attribute to fix the warning from gtmetrix and Google PageSpeed Insights so that you can use this plugin mentioned below. With the async attribute, you can even add a control over the JavaScript file that the example does not host: https://www.google-analytics.com/analytics.js or https://apis.google. Com / js / .js platform. Even sometimes many of us face problem with this file like js / jquery / jquery.js? Ver = 1.12.4 although it differs https://www.gomahamaya.com/wp-includes/js/jquery/jquery.js? see = 1.12.4. For this we need to use the async attribute.

Method 2 

Async JavaScript

By using the asynchronous JavaScript plugin, you can remove render blocking. This plugin will greatly influence the speed of your page with higher rankings in search engines improving user experience. Now bingo no more warnings in the speed control tool and your website speed will reach the sky.

So after installing the asynchronous JavaScript plugin. Click on settings

defer parsing of javascript async

Then enable async javascript and in the method type also select async .

Now click and save

Method 3

Wp-rocket

Wp-rocket is a premium caching plugin, but it’s worth buying in my opinion. Almost all tech companies use Wp-rocket.

After installing the plugins, switch to the File Optimization tab. And inside you will find the JavaScript parameter

Now in this tab select minify JavaScript file. Then select lazy javascript loading

defer parsing of javascript wp rocket

Method 4

Speed Booster Pack 

Install and activate the Speed Booster Pack add-ons. Settings for speed booster plugins inside go to Advanced tab and enable button Defer JS file scanning and click Save

defer parsing of wordpres javascript using speed booster pack wordpress plugin

Conclusion

In this article, we first discuss the importance of page speed and how JavaScript rendering works. Here we explore the reasons why you should defer parsing JavaScript.

Now hopefully out of 5, the first method will work to fix JavaScript lazy parsing in WordPress. Feel free to share your comments below.

Search Tags

How to Defer Parsing of JavaScript in WordPress | Defer parsing of javascript in html | how to fix defer parsing of javascript in WordPress

+ posts

Similar Posts