In this article, you'll get familiar with async and defer - two script tag attributes that will speed up your website's rendering.
How does the website rendering work?
Have you ever wondered how web browsers render websites?
There are a couple of steps which have to be taken by the browser engine to display a web page:
- Receiving raw bytes of data from the server and transforming them into characters with proper encoding.
- Parsing characters to extract HTML structures. Without this process, data returned from a server would be just a bunch of meanless characters. This step is called tokenization, and it produces tokens.
- Converting tokens into nodes - distinct objects with properties.
- Linking nodes to create data structures, known as DOM (Document Object Model) and CSSOM (CSS Object Model).
One important website optimization rule applies to this process - ensuring that both the HTML and CSS are delivered to the browser as quickly as possible. In other words, you don't want to interrupt the process of constructing the Object Model in any way (learn more about this process).
Fetching the script in HTML head tag
During the process of building the DOM structure, the browser will send a request to fetch any related resources that your website links to.
Fetching the script at the end of HTML body tag
Is there any downside to this solution? If the script uses
document.write to insert part of the page's content, it can't be moved lower on the page; therefore, you can't place it at the end of the body tag.
Also, keep in mind that it doesn't affect the
document.ready state because the browser has not yet finished building DOM.
To sum up, we are able to render a page faster, but we still have to wait for scripts to be loaded synchronously.
Meet script async attribute for external scripts
In the typical case scenario, when the browser engine meets the following script tag:
You can speed it up with the script
Once again, let's illustrate in timeline how your website is going to be rendered by the browser engine, but in this case, with the script
With a lot of script tags included in your HTML, the script
async attribute saves a lot of time. Just imagine being able to download 10 scripts in parallel while the browser engine is busy building the rest of the DOM.
Is this a perfect solution? Not really. While we can save time on the download process, we are not exactly sure when each of the scripts will be executed.
Meet defer attribute for external scripts
It's as easy as in the case of async to add the script
Let's visualize what the process of rendering DOM will look like with the
The problem we had with the
async attribute is gone with the
It's what we needed since the website, in this case, is displayed to the user without two big latency sources:
executing fetched code during DOM render.
How and when to use Async and defer attributes?
As with everything in web programming, there are no holy grails. Why? Because of browser versions support.
You can check the current support here:
Should you care? Well, there might be some bugs in older browsers, like the one with defer in IE9, but unless you need to support these cases, you should go with the
defer attribute for most of the time, since it brings the fastest way to load DOM in the browser.
Async and defer are great script tag attributes that allow you to speed up building the DOM. Since in SEO speed matters, you should use them to rank higher in SERP.
If you're not technical, and you own a website based on WordPress, worry not - there are a lot of plugins out there for async script loading.
async improved your page load speed.