Javascript Async & Defer

Downloaded 1 241 times

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.

<script src="/foo/bar.js" type="text/javascript">// <![CDATA[

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

<script data-mce-type="text/javascript" src="/foo/bar.js" defer="true" />


If async is not present and defer is present: The script is executed when the page has finished parsing

<script data-mce-type="text/javascript" src="/foo/bar.js" async="true" />


If 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)

This will improve your global page loading time as illustrated below

javascript-sequence

 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.

Google Page Speed Insights : Use Asynchronous Scripts

Yahoo YSlow : Put Javascript at bottom

 

// ]]>

VersionRelease notesDate
1.0.0- Initial release2013-09-30


Top
joomlart