Hirazi Webtech

Improve the performance of your website with this little trick

There was a time when just having a website was considered luxury. But, today, the website isn’t any good until and unless the performance of the website, i.e., its load time and the time it takes to react to user actions, is top notch. According the “Web Fundamentals” by Google, 0-100ms is the apt time a website should take while responding to a user action. Following is an excerpt from their page-

 

Respond to a user action within this time window and users feel like the result is immediate. Any longer, and the connection between action and reaction is broken.

 

Javascript – where to load the external files

This is one of famous web developer interview questions. “Where should you load the external javascript files in your HTML page?” And, because most of us are anyway using document.ready or $(function($){ … }(jQuery), the automatic choice should be at the bottom (in the footer) of a HTML page.

 

That makes sense as well, because, otherwise the page parsing will stop as soon the script tag is found, for it to download and execute. This is of course true unless we look at “defer” attribute of a <script> tag.

 

“Defer” attribute is a boolean attribute set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded. This basically achieve similar results as we were able to achieve earlier. Our script will wait for the HTML to be parsed fully and then execute its content. Some of the benefits of using “defer” tag over “loading the scripts in the footer” are –

 

Benefits of scripts with “defer” over scripts in the footer of a HTML page:

 

  1. It helps improve the performance as the browser doesn’t stop the parsing the HTML.
  2. One of the important statement in the definition is “but before firing DOMContentLoaded”. What that means is this is even before the document.ready. The content of the page has loaded; the stylesheets, images may still be pending to load. So using defer attribute is, in fact, a little faster than document.ready. But, you need to aware of this difference in DOMContentLoaded vs document.ready, otherwise, it may lead to unexpected results.
  3. Because of the above point #2, “defer” attribute can be used to our advantage in certain situations as well. The combination of “defer” and document.ready can produce good presentation layer. We know that our content is ready when script with “defer” executes, and inside the script, we can have document.ready. This interim view can be definitely helpful to smoothen user experience.

 

“Defer” vs “Scripts in footer”

I would definitely go with <script src=”” defer></script>. But, remember that defer can produce unexpected results if not used properly. Please read following reference to understand the attribute in detail.

 

Link to social platforms of Hirazi Webtech

We like to spread happiness. Let's do it together.

Contact details of Hirazi Webtech

Get in Touch

Would love to hear you over coffee!

Contact Detail

Hirazi Webtech

Mumbai, India

+91 96994-53388

contact.us@hirazi.com