When a browser loads a webpage, while rendering it it has to parse the page. During the parsing process, if the browser comes across an external script it has to download it too which stops the parsing process until the JavaScript file is completely downloaded by the browser. With each file, it has to repeat the stop and download process for each file, which adds a network round trip for each file, resulting in considerable delay in the first rendering of the original webpage as that external javascript file keeps the rendering process blocked.
So the solution, how to prevent these round trips and delays in first time page rendering? Well there are few steps to be takes for that purpose.
For small files :
First of all, for very small JavaScript files which contain very little code in them, they should be added directly to the html file using inline script tag. For Example :
Instead of using :
<script type=”text/javascript” src=”verysmall.js”></script>
Use this :
<script type=”text/javascript”>
/* contents of a very small JavaScript file */
</script>
This will avoid one round trip to the server while not making much affect to the page code size.
Defer loading JavaScript files
Another thing to be done to prevent JavaScript from blocking the rendering and loading of the page, it’s recommended to use HTML async attribute in your script tag when loading external JavaScript file. For example:
<script async src=”external.js”>
However, in several cases, loading external JavaScript files using asynchronous loading can cause issues or conflicts with your code, so test this technique per JavaScript file when you employ the async technique.
Also, if one js file uses code from other JavaScript file, it’s important to load them in proper order of loading.