Successfully reported this slideshow.

Web Performance & You

6

Share

1 of 43
1 of 43

Web Performance & You

6

Share

A short talk on web performance given at Refresh Pittsburgh. Discusses how web performance fixes can be worked into a normal development workflow. Focuses on tweaks for responsive design sites.

A short talk on web performance given at Refresh Pittsburgh. Discusses how web performance fixes can be worked into a normal development workflow. Focuses on tweaks for responsive design sites.

More Related Content

Web Performance & You

  1. 1. Web Performance &You Dave Olsen, West Virginia University Refresh Pittsburgh, June 4 @dmolsen, dmolsen.com
  2. 2. slideshare.net/dmolsenwvu This presentation is available at:
  3. 3. Dave Olsen Professional Technologist West Virginia University About Moi @dmolsen
  4. 4. The Mobile Book • Covers everything mobile • Produced by Smashing Media • Chapters by Peter-Paul Koch, Stephanie Rieger, Brad Frost, Trent Walton, me & others http://the-mobile-book.com
  5. 5. Why ShouldYou Care About Web Performance? Part Une:
  6. 6. brad’s iceberg © Brad Frost © Brad Frost
  7. 7. brad’s iceberg © Brad Frost© Brad Frost © Brad Frost
  8. 8. The way in which CSS media queries have been promoted for mobile hides tough problems and gives developers a false promise of a simple solution for designing for small screens. Source: Jason Grigsby on Speakerdeck “ ”- Jason Grigsby @grigs
  9. 9. RWD could also mean responsible web design.
  10. 10. Over Downloading Download & Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss
  11. 11. Adding Web Performance to Your Workflow Part Deux:
  12. 12. Introducing the Team Because performance is a team effort.
  13. 13. Introducing the Team “Dave” full stack dev “Adam” front-end dev Any resemblance to real persons, living or dead, is purely coincidental. Serious.
  14. 14. The New Project Should... 1. Look cool 2.Have pizzazz 3.Use brand colors ... 99. Be fast 98. Look good on an iPhone First Steps
  15. 15. Mobile first means performance first. First Steps
  16. 16. Set a Performance Budget First Steps A budget is a guide, not a hard & fast limit. Performance tweaks are compromises. http://timkadlec.com/2013/01/setting-a-performance-budget/
  17. 17. First Steps Best request is no request. Worst request is one that blocks the parser. Source: Ilya Grigorik - Ilya Grigorik @ilyagrigorik “ ”
  18. 18. First Steps Corollary: The next best request is the one not parsed. Source: My brain - Me @dmolsen “ ”
  19. 19. Web Performance Assumptions Faster is better. Smaller is better. First Steps
  20. 20. Web Perf Optimization Tenets Reduce requests. Reduce asset size. Reduce page render time. First Steps
  21. 21. First Steps Learn to Love the Inspector http://bit.ly/15sWYsx
  22. 22. First Steps Save Yourself a Headache & Disable Your Cache When Testing
  23. 23. Design & Performance Things to Keep in Mind... Images are the devil. Consider using CSS, sprites, symbol fonts, & SVG. display: none; is the devil. Lots of things are the devil. Just understand the trade-offs when using social widgets, web fonts & CSS. The “devil” talk is tongue-in-cheek. Serious.
  24. 24. Design & Performance Explaining the Network Panel: Resource Size transferred size real size re-order
  25. 25. Design & Performance latency + download latency re-order Explaining the Network Panel: Latency
  26. 26. Design & Performance domcontentloaded onload Explaining the Network Panel: Events
  27. 27. Design & Performance Your goal when using the Network Panel is to shorten & compress the waterfall. Remember, test the squishy too.
  28. 28. Design & Performance save HAR file locally Explaining the Network Panel: Saving Files for Comparison
  29. 29. Design & Performance Explaining the Profiles Panel: CSS Selectors
  30. 30. Design & Performance Explaining the Profiles Panel: CSS Selectors
  31. 31. Responsive Images Most solutions are silly & verbose. Focus on properly formatting images. Lazy load them & don’t worry about “high DPI.”
  32. 32. Programming & Performance Things to Keep in Mind... JavaScript libraries are devils. Consider using microjs.com or vanilla JS. Defer loading of JavaScript. Use onTouch events when appropriate. Reflow & repaints are the devil. The “devil” talk is tongue-in-cheek. Serious.
  33. 33. Programming & Performance Explaining the Timeline Panel
  34. 34. PageSpeed Insights Extension https://developers.google.com/speed/pagespeed/insights Testing
  35. 35. Testing WebPagetest http://www.webpagetest.org
  36. 36. Testing BrowserStack http://browserstack.com
  37. 37. Deployment Finally getting to “traditional” performance techniques... Performance can’t simply be tacked onto the end of a project.
  38. 38. Concatenate files within reason. Minify files as appropriate. Make sure the server supports file compression & cache headers. Deployment Things to Keep in Mind...
  39. 39. mod_pagespeed Automates a Lot http://developers.google.com/speed/pagespeed/mod Deployment
  40. 40. Google Analytics’ Site Speed Monitoring
  41. 41. WEB PERF TWEEPS TO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @tameverts @yoavweiss@scottjehl just a sampling...
  42. 42. Questions?
  43. 43. Dave Olsen Professional Technologist West Virginia University @dmolsen Thanks for Listening Illustrations by Graham Curry

×