Prior to rendering a page, the browser has to build the Document Object Model (DOM) tree, a structural representation of the HTML that the browser understands, by parsing the HTML markup. During this process, the browser’s parser must stop every time it encounters a script to execute its content. Because this prevents further parsing and construction of the DOM, it is described as render-blocking. As you can imagine, each and every stop adds to the amount of time it takes for a page to load.
- declaring a script asynchronous
- deferring a script.
If you have small scripts, you may choose to include their contents inline in the HTML document.
Suppose the content of your external script looks like this:
You can inline the external script’s contents as follows:
The disadvantage of this method, however, is that the size of your HTML files increases (all the more so if same script contents must be included across multiple pages). As such, you should only use inline scripts for small amounts of content, such as the content required only for your above-the-fold content.
When including a script in your HTML, you have the option of declaring it as asynchronous:
<script async src= “js/sample.js”>
The browser immediately begins to download scripts that are declared asynchronous, but it does not stop parsing and constructing the DOM during the download process, nor does it prevent the processing of any other scripts required by the site. Only when the asynchronous script has fully downloaded does the browser halt any other actions it might be performing to execute the contents of the script.
Because the browser does not halt DOM parsing and construction or the fetching/execution of other scripts required by the site during the download process, it can perform multiple actions simultaneously and render your site faster.
There is, however, no guarantee as to the order in which asynchronous scripts execute, so this method works best for scripts that are not dependent on or depended upon by other scripts.
When including a script in your HTML, you have the option of declaring it as deferred:
<script defer src= “js/sample.js”>
The browser immediately begins to download scripts marked as deferred, but it holds off on executing the script’s contents until the HTML has been completely parsed and the DOM tree constructed.
- If the script stands by itself and does not rely on any other scripts, use async
- If the script relies on, or is relied upon, by another script, use defer
- Placed above the async script;
- Contains no attributes (such as async or defer).
Does not require download time like external scripts
Browser continues to parse and construct DOM during download, minimizing render delay
Execution order of asynchronous scripts may be random
Browser continues to parse and construct DOM during download and delays execution of script until DOM is complete, minimizing render delay
E-commerce revenue continues to grow,as consumers turn away from shopping in brick-and-mortar stores to shopping online. However, many businesses are not prepared for this growth because they do not fully understand the market and how to invest in...Read More
Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design...Read More
Google Webmaster Tools is a web service that allows webmasters to view the status of their sites as seen by Google and the Googlebot crawlers. In addition to indexing your site structure and content, the Googlebot crawlers also record data on perform...Read More
Web designers and developers are always looking for ways to speed up their page load times. Yahoo has an excellent article written on the best practices for speeding up your page. How do you know if implementing one of their suggested practices will...Read More