Sign in

How to Defer Parsing of JavaScript in WordPress without plugin

You are worried about the speed of your website . JavaScript can cause low speed . You can try Defer Parsing of JavaScript in WordPress . It allows the browser to render JavaScript only after it finishes loading the main content of a site. We do it without a plugin , just some line code .

Why Need to Use Defer Parsing of JavaScript?

The browser reads this HTML markup line by line. Additionally, the resources present on the page need to be downloaded. By default, the browser sequentially downloads these resources as it finds them in the document. The rendering of the web page only resumes once a resource has been downloaded.

The main fact is SEO . Because a slow website doesn’t rank on SEO. Your website doesn’t load fully until it finishes downloading all the JavaScript . You can use so many plugins for this issue . Other hand , if a visitor sees that page load slowly , visitors can be upset .

To solve this issue , We can use defer attribute on script tag , To delay the execution of a JavaScript file .

HTML example :

<script  defer  src=”your-file-name.js”></script>

Defer Parsing of JavaScript in WordPress:

Use this code :

add_filter( 'script_loader_tag', 'wpk_add_id_to_script', 10, 3 );
function wpk_add_id_to_script( $tag, $handle, $source ) {

if ( 'bootstrap' === $handle ) {
$tag = '<script type="text/javascript" defer src="' . $source . '" id="'.$handle.'"></script>';
}
return $tag;
}

Description :

Tag : That means full script tag html .

Handle: This is the name of the file . example :

wp_enqueue_script('bootstrap', get_stylesheet_directory_uri() .'/assets/js/bootstrap.min.js', array('jquery'),’5.0.0’, true);

In this case , “bootstrap” Handle .

Source: This is the path of the file .

Conclusion:

Note: I will be happy if you catch my mistakes.

Original Post