CODEWITHSUNDEEP
javascriptjqueryhtmlasynchronous
serhio
serhio

Reputation: 28586

Defer, Async and the PageSpeed Insights

I try to optimize the page speed load using the recommendations of PageSpeed Insights about, particularly, the deferring JavaScripts, in order do not block the page content to render.

So, it appears that HTML5 introduced a preatty cool feature, the async attribute, that permits to load scripts asynchronously in the "chaotic" mode. There is another attribute, the defer one, that loads them also asynchronously, but in the "ordered" mode (as I understood from that article).

So, I concluded that

  1. Always use (for every <script src='my.js'>) the defer attribute.
  2. In case if the script is not "load critical" (like jQuery, or jQuery-ui) the async attribute can be used.

Is it the right conclusion ?

PS.

Complimentary question:
Is the fact of adding scripts at the end of the document, automatically "unblocks" the rendering of the document? As I could understand, some scripts blocks the rendering, without difference of their location in the document (the <head> or just before </body>)...

Upvotes: 2

Views: 3434

Answers (1)

zzzzBov
zzzzBov

Reputation: 179046

1. Always use (for every <script src='my.js'>) the defer attribute.

You should only defer scripts that can be deferred. In some cases you may need to guarantee execution order, or rely on features that must happen inline. For example, scripts that call document.write must not be deferred.

2. In case if the script is not "load critical" (like jQuery, or jQuery-ui) the async attribute can be used.

"load critical" doesn't have any specific meaning, so it's a poor choice of phrasing. async should be used for scripts that can execute in any order and aren't a dependency of other scripts.

Upvotes: 1

Related Questions