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.

Jonathan Klein

June 18, 2014
Tweet

More Decks by Jonathan Klein

Other Decks in Technology

Transcript

  1. About Me • Senior Performance Engineer At Etsy • I

    write the Etsy Site Performance Reports
  2. About Me • Senior Performance Engineer At Etsy • I

    write the Etsy Site Performance Reports • Organize Boston Web Perf Meetup Group
  3. Real World Examples • Firefox: -2.2 seconds = 15.4% more

    downloads • Shopzilla: -5 seconds = 7-12% increase in revenue
  4. 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
  5. 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
  6. 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/
  7. Today’s Focus 1. Number of Bytes (Page Weight) 2. What

    Kind of Bytes 3. How They Are Delivered
  8. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images
  9. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images • smush.it (web)
  10. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)
  11. Things to do now • Gzip text resources (CSS/JS) •

    Minify CSS/JS • Optimize Images • smush.it (web) • Wesley (command line)
  12. /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
  13. Problems With JavaScript • Blocks the main thread • Parse

    and execution time • Eats up CPU/battery on mobile
  14. Things to do now • Turn on KeepAlive in Your

    Apache Config • Consolidate CSS/JS files
  15. Things to do now • Turn on KeepAlive in Your

    Apache Config • Consolidate CSS/JS files • Add Caching Headers
  16. One Day of Work 1. Gzip text resources (CSS/JS) 2.

    Turn on KeepAlive 3. Minify CSS/JS
  17. One Day of Work 1. Gzip text resources (CSS/JS) 2.

    Turn on KeepAlive 3. Minify CSS/JS 4. Optimize Images
  18. 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
  19. 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
  20. 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