Javascript Async and Defer

November 15th, 2013

Javascript Async and DeferIf async is not present and defer is present: The script is executed when the page has finished parsingIf async is present: The script is executed asynchronously with the rest of the page (the script will be executed while the page continues the parsing)

Improve your page loading time by allowing javascript loading asynchronously
You will see the difference with YSlow and Google Page speed ranking but your visitors will thank you for providing a speedy website.

When a browser loads a webpage, it will start by loading external Javascript and CSS ressources before loading the html and render it’s content.

– If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing the page

This will improve your global page loading time

However, this is not applicable to all scripts as you want to make sure the script is loaded while some other script or inline script will call it.

Usually, if your jQuery inline scripts are called within a jQuery(document).ready() declaration, you can safely load the javascript file asynchronously.