This document discusses ways to make JavaScript faster in web pages. It recommends loading scripts asynchronously or with defer, preloading scripts, reducing CPU time spent evaluating scripts and function calls, budgeting third-party scripts, ensuring proper compression of scripts, and reviewing code coverage to optimize performance.

1. Make
JavaScript
Faster
Steve Souders
@souders

2. We should forget about
small efficiencies, say
about 97% of the time:
premature optimization
is the root of all evil.
Yet we should not pass
up our opportunities in
that critical 3%.
- Don Knuth
“

5. Start Render
First Paint
First Contentful Paint
First Meaningful Paint
DOM Interactive
DOM Content Loaded
DOM Complete
First Painted Hero
Last Painted Hero
Speed Index
First CPU Idle
Time to Interactive
Page Load
Visually Complete

6. 0s 1s 2s 3s 4s 5s 6s
TTFB
DOM Content Loaded
Page Load
First Meaningful Paint
Speed Index
DOM Interactive
DOM Complete
First Contentful Paint
First CPU Idle
Time to Interactive
Visually Complete
medians from 1.3M sites
source: httparchive.org
First Paint

7. 0s 2s 4s 6s 8s 12s 16s
TTFB
DOM Content Loaded
First Meaningful Paint
Speed Index
DOM Interactive
DOM Complete
First Contentful Paint
Time to Interactive
Visually Complete
mobile medians from 1.3M
sites
source: httparchive.org
1s 3s 5s 7s 9s 10s 15s14s13s11s
First Paint
First CPU Idle
Page Load

11. IE 7
source: Pat Meenan

12. Preloader
(aka "Lookahead Parser")
Biggest performance improvement EVER!
Scans HTML for tags that make requests:
SCRIPT, LINK, IMG, etc.
Prioritizes and initiates requests before
tags are parsed.

13. source: speedcurve.com

14. IE 7
source: Pat Meenan

15. source: speedcurve.com

17. browserscope.org
preloader in IE 8

18. IE 8
Opera 12
Safari 4
Firefox 3.5
Chrome 2
preloader
2009 2010 2011 2012 2013 2014
source: browserscope.org

19. source: speedcurve.com

20. IE 8
Opera 12
Safari 4
Firefox 3.5
Chrome 2
IE 10
Chrome 10
Firefox 3.6
Opera 14
Safari 6
preloader
async
2009 2010 2011 2012 2013 2014
source: browserscope.org
async hacks

21. source: speedcurve.com

22. async adoption
source: browserscope.org

23. Make JavaScript Faster
• load scripts async
• even better, prefer defer

24. source: speedcurve.com

25. Get scripts downloading earlier:
<link rel="preload"
href="main.js"
as="script">
Response header is even better:
Link: <main.js>;
rel="preload";
as="script"

26. https://www.chromestatus.com/metrics/feature/timeline/popularity/901

27. source: httparchive.org
Sites Using Preload
...for scripts in the main page

28. Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts

29. source: speedcurve.com

30. median CPU time from 1.3M sites
JS = 433ms
source: httparchive.org

31. JS = 3648ms
source: httparchive.org
95th percentile CPU time from 1.3M sites

32. JS = 8113ms
source: httparchive.org
99th percentile CPU time from 1.3M sites

33. Mobile median CPU time from 1.3M sites
JS = 1121ms
source: httparchive.org

34. JS = 9833ms
source: httparchive.org
Mobile 95th percentile CPU time from 1.3M sites

35. JS = 19161ms
source: httparchive.org
Mobile 99th percentile CPU time from 1.3M sites

36. mobile 99th
mobile 95th
mobile median
desktop 95th
desktop median
desktop 99th
CPU time

37. Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall

38. source: httparchive.org
4
12
6
5
JS requests

39. source: httparchive.org
53 K
258 K
106 K32 K
JS size

40. source: httparchive.org
4
12
6
5
53 K
258 K
106 K32 K

41. Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall
• budget 3rd parties

42. Gzip missed opportunities

43. 1. http://parts.blog.livedoor.jp/js/jquery-1.7.1.min.js
2. http://clap.blogcms.jp/js/jquery-1.11.1.min.js
3. https://cdn.schoolloop.com/.../jquery-1.8.2.min.js
4. https://c.sd1.fr/js/jquery-1.8.3.min.js
5. https://d1bxh8uas1mnw7.cloudfront.net/.../altmetric_badges...js
6. https://frontpagegui.linkfire.com/.../jquery.min.js
7. https://www.blogmura.com/.../jquery-1.11.1.min.js
8. http://static.tumblr.com/.../jquery.js
9. https://tags.onscroll.com/.../tag.min.js
10. http://d1ldansk2in7nt.cloudfront.net/.../v-1.7.1/jquery.min.js
Most Popular 1st Party
Ungzipped (90-100KB)

44. Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall
• budget 3rd parties
• double-check compression

46. Make JavaScript Faster
• load scripts async
• even better, prefer defer
• preload scripts
• reduce CPU time: EvaluateScript & FunctionCall
• budget 3rd parties
• double-check compression
• review code coverage

47. @souders
stevesouders.com/talks