Downloaded 33 times
More Related Content
Make JavaScript Faster
- 1.
- 2. We should forgetabout 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 FirstContentful 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 2s3s 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 4s6s 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: PatMeenan
- 12. Preloader (aka "Lookahead Parser") Biggestperformance improvement EVER! Scans HTML for tags that make requests: SCRIPT, LINK, IMG, etc. Prioritizes and initiates requests before tags are parsed.
- 13.
- 14. IE 7 source: PatMeenan
- 15.
- 17.
- 18. IE 8 Opera 12 Safari4 Firefox 3.5 Chrome 2 preloader 2009 2010 2011 2012 2013 2014 source: browserscope.org
- 19.
- 20. IE 8 Opera 12 Safari4 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.
- 22.
- 23. Make JavaScript Faster •load scripts async • even better, prefer defer
- 24.
- 25. Get scripts downloadingearlier: <link rel="preload" href="main.js" as="script"> Response header is even better: Link: <main.js>; rel="preload"; as="script"
- 26.
- 27. source: httparchive.org Sites UsingPreload ...for scripts in the main page
- 28. Make JavaScript Faster •load scripts async • even better, prefer defer • preload scripts
- 29.
- 30. median CPU timefrom 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 CPUtime 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 mobilemedian 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.
- 39. source: httparchive.org 53 K 258K 106 K32 K JS size
- 40. source: httparchive.org 4 12 6 5 53 K 258K 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.
- 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.