Make JavaScript Faster

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 “

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. 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. 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. IE 7 source: Pat Meenan

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. source: speedcurve.com

9. IE 7 source: Pat Meenan

11. browserscope.org preloader in IE 8

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

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

16. async adoption source: browserscope.org

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

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. https://www.chromestatus.com/metrics/feature/timeline/popularity/901

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

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

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

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

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

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

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

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

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

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

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

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

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

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

36. Gzip missed opportunities

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. Make JavaScript Faster • load scripts async • even better, prefer defer • preload scripts • reduce CPU time: EvaluateScript & FunctionCall • budget 3rd parties • double-check compression

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. @souders stevesouders.com/talks

Make JavaScript Faster

Vous êtes en train de lire un aperçu.

Consultez-les par la suite

Make JavaScript Faster

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à Make JavaScript Faster (20)

Plus par Steve Souders (20)

Plus récents (20)