Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Make JavaScript Faster

1,492 views

Published on

Everyone loves fast sites. While "make your site faster" is a simple mantra, the actual steps to achieve this can be daunting. Fortunately, we know where to start: JavaScript. JavaScript consumes more CPU than loading, layout, and rendering combined. Byte-for-byte, JavaScript inflicts more delays on sites than any other resource, and yet the amount of JavaScript on sites continues to grow.

In this session you'll learn the latest techniques for measuring and improving the impact JavaScript on your site, including: using the User Timing Spec and Long Tasks API to track the CPU cost of JavaScript for real users, moving expensive JavaScript off the main thread, using code coverage tools to reduce your JavaScript, and understanding why defer is probably a better technique than async for loading JavaScript.

Published in: Technology
  • Be the first to comment

Make JavaScript Faster

  1. 1. Make JavaScript Faster Steve Souders @souders
  2. 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 “
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. IE 7 source: Pat Meenan
  7. 7. 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.
  8. 8. source: speedcurve.com
  9. 9. IE 7 source: Pat Meenan
  10. 10. source: speedcurve.com
  11. 11. browserscope.org preloader in IE 8
  12. 12. IE 8 Opera 12 Safari 4 Firefox 3.5 Chrome 2 preloader 2009 2010 2011 2012 2013 2014 source: browserscope.org
  13. 13. source: speedcurve.com
  14. 14. 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
  15. 15. source: speedcurve.com
  16. 16. async adoption source: browserscope.org
  17. 17. Make JavaScript Faster • load scripts async • even better, prefer defer
  18. 18. source: speedcurve.com
  19. 19. Get scripts downloading earlier: <link rel="preload" href="main.js" as="script"> Response header is even better: Link: <main.js>; rel="preload"; as="script"
  20. 20. https://www.chromestatus.com/metrics/feature/timeline/popularity/901
  21. 21. source: httparchive.org Sites Using Preload ...for scripts in the main page
  22. 22. Make JavaScript Faster • load scripts async • even better, prefer defer • preload scripts
  23. 23. source: speedcurve.com
  24. 24. median CPU time from 1.3M sites JS = 433ms source: httparchive.org
  25. 25. JS = 3648ms source: httparchive.org 95th percentile CPU time from 1.3M sites
  26. 26. JS = 8113ms source: httparchive.org 99th percentile CPU time from 1.3M sites
  27. 27. Mobile median CPU time from 1.3M sites JS = 1121ms source: httparchive.org
  28. 28. JS = 9833ms source: httparchive.org Mobile 95th percentile CPU time from 1.3M sites
  29. 29. JS = 19161ms source: httparchive.org Mobile 99th percentile CPU time from 1.3M sites
  30. 30. mobile 99th mobile 95th mobile median desktop 95th desktop median desktop 99th CPU time
  31. 31. Make JavaScript Faster • load scripts async • even better, prefer defer • preload scripts • reduce CPU time: EvaluateScript & FunctionCall
  32. 32. source: httparchive.org 4 12 6 5 JS requests
  33. 33. source: httparchive.org 53 K 258 K 106 K32 K JS size
  34. 34. source: httparchive.org 4 12 6 5 53 K 258 K 106 K32 K
  35. 35. Make JavaScript Faster • load scripts async • even better, prefer defer • preload scripts • reduce CPU time: EvaluateScript & FunctionCall • budget 3rd parties
  36. 36. Gzip missed opportunities
  37. 37. 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)
  38. 38. Make JavaScript Faster • load scripts async • even better, prefer defer • preload scripts • reduce CPU time: EvaluateScript & FunctionCall • budget 3rd parties • double-check compression
  39. 39. 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
  40. 40. @souders stevesouders.com/talks

×