Northeastern Lunch and Learn

A Web Performance 101 talk given at Northeastern in June 2014.

Transcript

1. Northeastern Tech Talk Jonathan Klein 6/17/14 @jonathanklein
2. Slides, Links http://jkle.in/neu
3. About Me
4. About Me • Senior Performance Engineer At Etsy
5. About Me • Senior Performance Engineer At Etsy • I write the Etsy Site Performance Reports
6. About Me • Senior Performance Engineer At Etsy • I write the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group
7. The Value of Performance
9. Real World Examples
10. Real World Examples • Firefox: -2.2 seconds = 15.4% more downloads
11. Real World Examples • Firefox: -2.2 seconds = 15.4% more downloads • Shopzilla: -5 seconds = 7-12% increase in revenue
12. Real World Examples • Firefox: -2.2 seconds = 15.4% more downloads • Shopzilla: -5 seconds = 7-12% increase in revenue • Google: +400ms = 0.76% fewer searches
13. Real World Examples • Firefox: -2.2 seconds = 15.4% more downloads • Shopzilla: -5 seconds = 7-12% increase in revenue • Google: +400ms = 0.76% fewer searches • Amazon: +100ms = -1% revenue
14. Real World Examples • Firefox: -2.2 seconds = 15.4% more downloads • Shopzilla: -5 seconds = 7-12% increase in revenue • Google: +400ms = 0.76% fewer searches • Amazon: +100ms = -1% revenue • http://www.phpied.com/the-performance-business-pitch/
15. What About a University?
16. What About a University? • More applicants
17. What About a University? • More applicants • Happier Students/Faculty
18. What About a University? • More applicants • Happier Students/Faculty • Increased endowment contributions
19. Today’s Focus
20. Today’s Focus 1. Number of Bytes (Page Weight)
21. Today’s Focus 1. Number of Bytes (Page Weight) 2. What Kind of Bytes
22. Today’s Focus 1. Number of Bytes (Page Weight) 2. What Kind of Bytes 3. How They Are Delivered
23. 80% of page load time takes place on the client
24. 1. Page Weight
25. http://httparchive.org/interesting.php#bytesperpage
29. Things to do now
30. Things to do now • Gzip text resources (CSS/JS)
31. Things to do now • Gzip text resources (CSS/JS) • Minify CSS/JS
32. Things to do now • Gzip text resources (CSS/JS) • Minify CSS/JS • Optimize Images
33. Things to do now • Gzip text resources (CSS/JS) • Minify CSS/JS • Optimize Images • smush.it (web)
34. Things to do now • Gzip text resources (CSS/JS) • Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)
35. Things to do now • Gzip text resources (CSS/JS) • Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)
36. 2. The Right Bytes
39. /scripts/modernizr.js /scripts/mosaic.1.0.1.min.js /scripts/jquery.hashchange.min.js /scripts/jquery.easytabs.min.js /scripts/top-nav.js /scripts/content-swap.js /scripts/easytabs-settings.js /scripts/social-media-pane.js /scripts/jquery.touchSwipe.min.js /scripts/show-more.js /scripts/googleSearch.js /scripts/touchswipe-settings.js /scripts/mosaic-settings.js /scripts/jquery.flexslider.js /scripts/jquery.tmpl.min.js /scripts/facebook-wall.js /scripts/mobile-nav.js
40. Problems With JavaScript
41. Problems With JavaScript • Blocks the main thread
42. Problems With JavaScript • Blocks the main thread • Parse and execution time
43. Problems With JavaScript • Blocks the main thread • Parse and execution time • Eats up CPU/battery on mobile
44. Not All Bytes Are Created Equal
45. 3. Delivering The Bytes
51. KeepAlive On
55. Things to do now
56. Things to do now • Turn on KeepAlive in Your Apache Config
57. Things to do now • Turn on KeepAlive in Your Apache Config • Consolidate CSS/JS files
58. Things to do now • Turn on KeepAlive in Your Apache Config • Consolidate CSS/JS files • Add Caching Headers
59. Quick Recap
60. One Day of Work
61. One Day of Work 1. Gzip text resources (CSS/JS)
62. One Day of Work 1. Gzip text resources (CSS/JS) 2. Turn on KeepAlive
63. One Day of Work 1. Gzip text resources (CSS/JS) 2. Turn on KeepAlive 3. Minify CSS/JS
64. One Day of Work 1. Gzip text resources (CSS/JS) 2. Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images
65. One Day of Work 1. Gzip text resources (CSS/JS) 2. Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images 5. Add Caching Headers
66. One Day of Work 1. Gzip text resources (CSS/JS) 2. Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images 5. Add Caching Headers 6. Eliminate unnecessary JavaScript
67. One Day of Work 1. Gzip text resources (CSS/JS) 2. Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images 5. Add Caching Headers 6. Eliminate unnecessary JavaScript 7. Consolidate CSS/JS files
68. Thanks!
69. @jonathanklein ! jonathan@etsy.com Get in Touch