Web Performance & You - HighEdWeb Arkansas Version

13,607 views

Published on

Today, a web page can be delivered to a desktop computer, a television, or a handheld device like a tablet or a phone. While a technique like responsive design helps ensure that our web sites look good across that spectrum of screen sizes we may forget our web sites should also be able to perform equally well across that same spectrum. While more and more of our users are shifting their Internet usage to these more varied platforms and connection speeds our development practices might not be keeping up.In this session we’ll review why optimizing web performance should be an important step in the development of responsive websites. We’ll look at the tools that can help you understand and measure the performance of those sites as well as discuss front-end and server-side techniques that can be used to help you improve their performance. Finally, since the best way to test your site is to have real devices in hand, we’ll share “lessons learned” so you can set-up your own device lab similar to what we have at West Virginia University.This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

Published in: Technology, Design
1 Comment
18 Likes
Statistics
Notes
  • Great overview Dave. I'm building SpeedCurve on top of WebPagetest to help with the monitoring of front-end performance and competitive benchmarking. Love to get your feedback and wish list for what a tool like this should offer.
    http://speedcurve.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,607
On SlideShare
0
From Embeds
0
Number of Embeds
3,515
Actions
Shares
0
Downloads
61
Comments
1
Likes
18
Embeds 0
No embeds

No notes for slide

Web Performance & You - HighEdWeb Arkansas Version

  1. Web Performance &You Dave Olsen, West Virginia University HighEdWeb Arkansas, July 26 @dmolsen, dmolsen.com
  2. slideshare.net/dmolsenwvu This presentation will be available later today at:
  3. Dave Olsen Professional Technologist West Virginia University About Moi @dmolsen
  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. What I’ll Talk About • Quick Intro About Why We Should Care About Web Perf • How to Add Performance to Your Workflow • Setting Up a Device Lab
  6. Why ShouldYou Care About Web Performance? Part Une:
  7. The average weight of a web page today. Source: HTTP Archive Images JavaScript Flash HTML CSS Other 77% 1.3 MB
  8. RWD sites whose small screen design weighs the same as the large screen design. Source: Podjarny 72%
  9. Users expect your mobile site to load as quickly as your desktop site. 71% Source: Gomez
  10. Bounce Rate Conversion Rate Cart Size PageViews 200ms - - - -1.2% 500ms -4.7% -1.9% - -5.7% 1000ms -8.3% -3.5% -2.1% -9.4% Case Study: Mobile Performance Effect on Business Source: Web Performance Today
  11. brad’s iceberg © Brad Frost
  12. 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
  13. brad’s iceberg © Brad Frost© Brad Frost
  14. RWD could also mean responsible web design.
  15. Over Downloading Download & Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss
  16. Adding Web Performance to Your Workflow Part Deux:
  17. Introducing the Team Because performance is a team effort.
  18. Introducing the Team “Dave” full stack dev “Adam” front-end dev Any resemblance to real persons, living or dead, is purely coincidental. Serious.
  19. Parts of a Project The Six Parts of a Project* 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring * - For the purposes of this talk.
  20. First Steps The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  21. 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
  22. Mobile first means performance first. First Steps
  23. 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/
  24. First Steps Best request is no request. Worst request is one that blocks the parser. Source: Ilya Grigorik - Ilya Grigorik @ilyagrigorik “ ”
  25. First Steps Corollary: The next best request is the one not parsed. Source: My brain - Me @dmolsen “ ”
  26. Web Performance Assumptions Faster is better. Smaller is better. First Steps
  27. Web Perf Optimization Tenets Reduce requests. Reduce asset size. Reduce page render time. First Steps
  28. First Steps Learn to Love the Inspector http://bit.ly/15sWYsx
  29. First Steps Save Yourself a Headache & Disable Your Cache When Testing
  30. 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring Design & Performance The Six Parts of a Project
  31. Design & Performance Things to Keep in Mind... Images are the devil. Consider using CSS, sprites, symbol fonts, & SVG. display: none; is definitely 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.
  32. Design & Performance Explaining the Network Panel: The Waterfall
  33. Design & Performance Explaining the Network Panel: Resource Size transferred size real size re-order
  34. Design & Performance latency + download latency re-order Explaining the Network Panel: Latency
  35. Design & Performance domcontentloaded onload Explaining the Network Panel: Events
  36. Design & Performance Your goal when using the Network Panel is to shorten & compress the waterfall. Remember, test the squishy too.
  37. Design & Performance save HAR file locally Explaining the Network Panel: Saving Files for Comparison
  38. Design & Performance Explaining the Profiles Panel: CSS Selectors
  39. Design & Performance Explaining the Profiles Panel: CSS Selectors
  40. CodeKit CodeKit:Web Perf in Your Workflow http://incident57.com/codekit/ Design & Performance
  41. Responsive Images Most solutions are silly & verbose. Focus on properly formatting images. Lazy load them & don’t worry about “high DPI.”
  42. Programming & Performance The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  43. 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.
  44. Programming & Performance Explaining the Timeline Panel
  45. Test & Optimize Performance with jsPerf http://jsperf.com Programming & Performance
  46. Testing The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  47. PageSpeed Insights Extension https://developers.google.com/speed/pagespeed/insights Testing
  48. Remote Debugging Testing
  49. Google Analytics Site Speed http://www.httpwatch.com IE & Firefox Performance Issues Testing
  50. Testing WebPagetest http://www.webpagetest.org
  51. Google Analytics Site Speed http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - Beyond the Basics Testing
  52. Google Analytics Site Speed Customizing WebPagetest: Capturing Events After onLoad Testing
  53. Customizing WebPagetest: Blackholes for Requests Testing
  54. Google Analytics Site Speed Customizing WebPagetest: Scripting & Custom Viewports Testing
  55. Customizing WebPageTest: Video Comparison Testing
  56. Customizing WebPageTest: Video Comparison - Small Viewport Testing
  57. charlesproxy.com SLOWING THINGS DOWN ThrottleCharles Testing
  58. Using Charles Proxy http://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/ Testing
  59. Testing BrowserStack http://browserstack.com
  60. Deployment The Six Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  61. Deployment Finally getting to “traditional” performance techniques... Performance can’t simply be tacked onto the end of a project.
  62. Concatenate files within reason. Minify files as appropriate. Make sure the server supports file compression & cache headers. Deployment Things to Keep in Mind...
  63. mod_pagespeed Automates a Lot http://developers.google.com/speed/pagespeed/mod Deployment
  64. The Six Parts of a Project Monitoring 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
  65. Google Analytics’ Site Speed Monitoring
  66. PageSpeed Insights Extension https://developers.google.com/speed/pagespeed/insights Monitoring
  67. Setting Up a Device Lab Part Trois:
  68. eBay MobileKarma.com Cellphone store leftovers Open device labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
  69. OpenDeviceLab.com
  70. Base on: WiFi-capable, Analytics Rank, OS, Screen Dimensions, & Cost Suggested focus: iPod Touch, mid-level Android, high-end Android, a tablet, Blackberry, Windows Phone 7 HOW TO DECIDE WHICH TO GET iPod Touch w/ Retina Samsung Fascinate + Google Nexus One + $537 Example:
  71. WEB PERF TWEEPS TO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @tameverts @yoavweiss@scottjehl just a sampling...
  72. Questions?
  73. Dave Olsen Professional Technologist West Virginia University @dmolsen Thanks for Listening Illustrations by Graham Curry

×