Include JS in the end – Demonstration

I was experimenting on how can we improve a page loading time which has loads of JS and image files. It turns out that we can optimize it by including JS files in the end of HTML content. That gives the flexibility to browser to render images and JS files in parallel.
The technical point of why should we include javascripts in the end, is that JS has the capability to alter the properties of HTML elements. Hence if the web developer has included JS earlier (say in the <head>), then this JS file might be modifying the HTML elements that are gonna get included in the <body>. In this case, browser first needs to know the properties that JS is applying on elements and only then it can fetch and load the elements. This halts the process of loading HTML elements when a JS is getting loaded.

Following are two screenshots where the same has been depicted. Please observe the network request for get_top_menu.js that has been highlighted. I have moved its position from <head> (screenshot 1) to <footer> (screenshot 2).

 

Comments