Note: The above function will add the async attribute to all scripts.
Return str_replace( ' src', ' async="async" src', $tag ) Īdd_filter( 'script_loader_tag', 'js_async_attr', 10 )
#Wp enqueue script defer code
Open your theme's functions.php page and add this code to the bottom of the page. If you would like to add the async or defer attribute to all scripts without exception then you can use the following code. Method 1: Adding Async or Defer to All Scripts You can use any method that suits your need. (Most flexible method as it allows you to add async to some scripts and defer to others.)
Method 3: Adding defer/async only to selective scripts. Method 2: Adding defer/async to all scripts with exception of a few. Method 1: Adding defer/async to all scripts without exception. In this article, we are going to look at three different methods to add these attributes to your render blocking javascripts. Internet explorer has added support for these attribute since IE10.Īn example of a script tag with the async and defer attributes is as follows: įunction to add 'async/defer' attribute to your render blocking scripts It ensures that the script is executed only after all contents of the page have finished loading.īoth these attributes are well supported in all modern browsers including Firefox, Chrome and Internet explorer. In other words, ensures that the script loads asynchronously along side the other contents of the page, after which it is executed.ĭefer Attribute: The defer attribute defers loading of the script. Here's what the async and defer attributes do:Īsync Attribute: The async attribute loads the script asynchronously. Let's see what these attributes are and how they can help you improve page load times. One way to resolve this issue is to move all your scripts to the footer of the page, but in the event that this is not possible, another option is to add a defer or async attribute to your script tags. This is why these scripts are referred to as render blocking javascripts. Scripts located within the head and body section of a page can cause page load delays as the browser tries to load and execute these script(s) even before the actual content of the page. Depending on the type of script, it may be located within the head, body or footer section of your web pages. These include the standard scripts added by wordpress and a few that are added by your theme and plugins using the wp_enqueue_scripts function. WordPress loads a host of external JavaScript references every time a page renders.
0 kommentar(er)
