Member-only story
Improve Page Load Performance With These Different Script Loading Techniques
Different ways to load JavaScript onto your HTML page
When you think of improving page load performance, you try to optimize the back-end code, database connections, and so on. But one of the easiest ways to improve the page load speeds is by making some small adjustments to how you load the JavaScript using the script tag in the HTML page.
Problem With the Normal Way of Loading JavaScript
When you load JavaScript into the HTML page, you add the script tag in the head section of the web page. There is a problem here, but to have a better grasp of it, you need to understand how a web page renders.
When the browser opens a web page, it starts to render the page tag by tag and begins to construct the DOM. And whenever the parser sees the tags to load images and style sheets, those requests are handled in parallel to the render.
But when the parser comes across a script tag, the HTML render process stops and waits until all the scripts are fetched and executed. Then the render of the rest of the HTML page resumes. You can understand this process in a better way by looking at the code and visualization below.
Example of script tag in the head section of a page
Render flow when the script tag is in the head section of the page
This impacts the page load time since the scripts may be large, which can affect the time taken to execute them. And the actual content of the HTML page itself could be large in most cases. So, all this load and parse time would impact the user’s experience in terms of waiting time.
