May 1, 2019
Chart based on this analysis from the HTTP Archive.
JS performance and user behaviour
For example, looking at the distribution of real user traffic for an ecommerce site in the chart below, you can see that longer JS CPU times correlate to much higher bounce rates. At 0.8 seconds, the bounce rate is 20%. By 4 seconds, the bounce rate has more than doubled to 45.6%.
Load scripts asynchronously
The reality is that most scripts are still loaded synchronously. The best way to load scripts asynchronously is to use the
Notice that none of the scripts have the red hash pattern that (in SpeedCurve) marks a synchronous script. That means all of these 20+ scripts are loaded asynchronously. As a result, the page renders quickly (0.7 seconds) and the script parsing and execution are not blocked – each script is handled as soon as it arrives. Learn more.
Even when scripts are loaded async, the browser may still twiddle its thumbs for a second or more waiting for the first script to arrive. This delay can be decreased by using link rel=preload like this:
Link rel=preload is useful for downloading any important resource more quickly, such as stylesheets that contain critical CSS, fonts that are used in important design elements, and hero images. It's especially important for scripts because they block page content from rendering and consume the most CPU during page load. Learn more.
Track CPU usage
Create performance budgets for your third parties
We've recently revamped your Synthetic third-party dashboard. Now you can:
Questions? Ask us online and IRL