How to Add Defer and Async Attributes for External Scripts I'm sure all Webpage using external script whether it is jquery or navigation script in blogger blog/site. Have you noticed some perform...
2018-07-31T07:46:55Z

How to Add Defer and Async Attributes for External Scripts

I'm sure all Webpage using external script whether it is jquery or navigation script in blogger blog/site. Have you noticed some performance issue with that?

Add Defer and Async Attributes for External Scripts

Defer Attribute: The defer attribute ensures that the script is executed only after all contents of the page have finished loading.

Async Attribute: The async attribute on the other hand ensures that the script loads asynchronously along side the other contents of the page after which it is executed.

Both these attributes are well supported in all modern browsers including Firefox, Chrome and Internet explorer. Internet explorer has added support for these attribute since IE10.

Note: It is to be noted that these attributes will not be the best solution in case your scripts need to follow an execution order or make use of document.write.

An example of a script tag with the async and defer attributes is as follows:

Here is the Original Code:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Updated Code: (just add async='async')

<script async='async' src="//code.jquery.com/jquery-1.12.0.min.js"></script>

Updated Code: (just add defer='defer')

<script defer='defer' src="//code.jquery.com/jquery-1.12.0.min.js"></script>


I hope this article helps you to load efficiently in your blog or Website. If you liked this article, then please subscribe to our blog.
Share it:

Blogging

How To

Tutorial

Post A Comment:

0 comments: