Your SlideShare is downloading. ×
Web Performance & You - HighEdWeb Arkansas Version
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Performance & You - HighEdWeb Arkansas Version

7,157

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 …

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
7,157
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
57
Comments
1
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×