Adoption of Async Script Loading

Analysis
1

Loading script asynchronously improves performance:

  • Rendering isn’t blocked.
  • Script parsing & execution is spread out across the CPU timeline, rather than being bunched up.
  • Images get a chance to download sooner, which is a better user experience.

Async and defer were supported by Firefox and Chrome in 2010, followed by Safari and Internet Explorer in 2012. So I wanted to see the adoption of async scripts. HTTP Archive started tracking async scripts in late 2015. Here’s a query for both sync and async:

SELECT
       min(createDate)*1000 as x,
       CAST(ROUND(APPROX_QUANTILES(num_scripts_sync, 1001)[SAFE_ORDINAL(501)]) as INT64) AS y
FROM `httparchive.summary_pages.*`
WHERE  
  _TABLE_SUFFIX LIKE '%desktop'
  AND label NOT IN ('Oct 1 2015', 'Dec 15 2016', 'Jan 1 2017','Jan 15 2017', 'Feb 1 2017')
  AND createDate >= 1446375603
GROUP BY SUBSTR(_TABLE_SUFFIX, 0, 10)
order by x asc

SELECT
       min(createDate) as x,
       CAST(ROUND(APPROX_QUANTILES(num_scripts_async, 1001)[SAFE_ORDINAL(501)]) as INT64) AS y
FROM `httparchive.summary_pages.*`
WHERE  
  _TABLE_SUFFIX LIKE '%desktop'
  AND label NOT IN ('Oct 1 2015', 'Dec 15 2016', 'Jan 1 2017','Jan 15 2017', 'Feb 1 2017')
  AND createDate >= 1446375603
GROUP BY SUBSTR(_TABLE_SUFFIX, 0, 10)
order by x asc

And a pretty plot of the results:
image

The adoption of async script loading is impressive IMO. In late 2015, the median was 10 synchronous scripts and 2 asynchronous scripts. The number of sync dropped and async rose in June 2016. This is likely when some dominant third party snippets (Google Analytics, Facebook, etc.) switched from sync to async. (This would be a fun analysis to do to see what caused the change.) The total number of scripts has continued to climb since then, but all the new scripts use async, which is a great sign. Nevertheless, the most recent data shows that synchronous scripts outnumber asynchronous scripts 7 to 6.

I can’t wait to see async take the lead.

2

Hi :slight_smile:
Thanks for sharing.
This huge adoption could be mostly lead by the updates to very popular scripts switching to async / defer like Google Analytics or Facebook widgets.
That’s good anyway, because asynchronous is definitely what suits them the most, but I’m wondering if we could split between 1st party and 3rd party to better define the adoption ?

3

That would be interesting. To do that you could use the technique from this article to separate 1st and 3rd party: JS requests & size 1st party vs 3rd party

1 Like