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:
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:
Second, let's compare just
async on a 4G connection:
There's not much difference between
async has 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
defer has things that tell it to wait. In particular, since with
defer the order of the
<script> tags is respected. Suppose that the file
some.jquery.plugin.js downloads before
jquery.min.js, then that file has to be blocked and execution delayed whilst waiting for
jquery.min.js to download, parse and execute. With
async it'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
.js files depend on the order. Another reason to use
defer if your scripts have that order-dependency problem.
Consider using a mix of
async has the advantage that some parsing/execution can be done by the main thread whilst waiting for other blocking resources like images.