Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Northeastern Lunch and Learn

Northeastern Lunch and Learn

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

72f8175ac13e367bb500dd4da1f1aa32?s=128

Jonathan Klein

June 18, 2014
Tweet

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