How to make WordPress lazy load JavaScript to speed up page rendering?

WordPressLazy loading of JavaScript to speed up page rendering methods.

What is JavaScript's Defer property?

Everyone has probably encountered this situation:

There are N scripts in the head, and when the script is loaded, it will block the page rendering, which is usually blank.

Of course, we can get around this by putting the script in the source code into the footer.

However, some complex development environments can make this simple task particularly complex.

At this point we can use the Defer property, which is a relatively rare property in JavaScript.

You may never use it, but after reading this introduction, I'm sure you won't leave it.

Its main function is to let the script parse after the entire page is loaded, instead of parsing it on load, which provides full page load speed for scripts that only contain event-triggered JavaScript.

Yes, if the script tag has a defer attribute, it will be executed after parsing the HTML page even if it is placed in the head, which is similar to putting the script at the bottom of the page.

Of course, the use of delay is also limited, usually pay attention to 2 points:

1) Do not call the document.write command in a deferred defer type script block;

• Because document.write will produce direct output effect.

2) Do not use global variables or functions in Defer scripts, including any immediate execution scripts.

Add the Defer attribute to the script used in WordPress

In WordPress, how can we automatically add the Defer attribute to the scripts used by WordPress?

We can add the following code to the current theme's functions.php file ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• The above code only works, according toJavaScript code introduced by WordPresswill be effective.

Please Note

Live Preview Management may display blank:

If you use the above code, when you open the real-time preview management (Appearance → Customize), it may display blank, so please use it as appropriate.

When real-time preview management is required, comment out the above code, and delete the commented code after the customization is completed.

PHP comment code example:

/*

这里是代码 

*/