async scores slightly better that
script tags) in this experiment using Webpagetest.
Much has been written about the difference between
<script defer src="..."> and
<script async src="..."> but nothing beats seeing it visually in Webpagetest.
Here are some good articles/resources:
- async vs defer attributes
- Script Tag - async & defer
- Prefer DEFER Over ASYNC
So I took a page off my own blog. Butchered it and cleaned up the 6
Then I copied that HTML file and replaced all
<script src="..."> with
<script defer src="...">: defer.html. And lastly, the same with: async.html.
First let's compare all three against each other:
Neither vs defer vs async on Webpagetest.
Second, let's compare just
async on a 4G connection:
async on 4G
Also, if you like here's
async on a desktop browser instead.
There's not much difference between
asynchas a slight advantage as per these experiments. I'm only capable of guessing, but I suspect it's because it can "spread out" the work better and get some work done in parallel whilst
deferhas things that tell it to wait. In particular, since with
deferthe order of the
<script>tags is respected. Suppose that the file
jquery.min.js, then that file has to be blocked and execution delayed whilst waiting for
jquery.min.jsto download, parse and execute. With
asyncit's more of a wild west of executing whenever you can.
The async.html is busted because of the unpredictable order of execution and these
.jsfiles depend on the order. Another reason to use
deferif your scripts have that order-dependency problem.
Consider using a mix of
asynchas the advantage that some parsing/execution can be done by the main thread whilst waiting for other blocking resources like images.