Northeastern Lunch and Learn

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

8. None

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

26. None
27. None
28. None

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

37. None
38. None

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

46. None
47. None
48. None
49. None
50. None

51. KeepAlive On

52. None
53. None
54. None

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