Downloaded 53 times
Uploaded byDave Olsen
Measuring Web Performance - HighEdWeb Edition
The presentation by Dave Olsen discusses the importance of web performance, detailing its significance for mobile-friendly designs and the common pitfalls developers face. It covers a range of optimization techniques to incorporate performance into workflows, highlighting collaboration across project phases from design to monitoring. Additionally, practical tools and strategies for testing, deployment, and device selection for efficient web development are introduced.
More Related Content
Similar to Measuring Web Performance - HighEdWeb Edition
Measuring Web Performance - HighEdWeb Edition
- 1. Measuring Web Performance Dave Olsen,West Virginia University HighEdWeb, October 6 @dmolsen, dmolsen.com
- 2. Dave Olsen Professional Technologist WestVirginia University About Me @dmolsen
- 3. What I’ll TalkAbout • Quick Intro About Why We Should Care About Web Perf • How to Add Performance to Your Workflow • Setting Up a Device Lab
- 4. Why ShouldYou Care AboutWeb Performance? Part Une:
- 5. The average weightof a home page today. Source: HTTP Archive Images JavaScript Flash HTML CSS Other 77% 1.5 MB
- 6. “RWD makes yourwebsite mobile friendly.” The marketing of responsive web design...
- 7. RWD sites whose smallscreen design weighs the same as the large screen design. Source: Podjarny 72%
- 8. The way inwhich 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. Over Downloading Download &Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss
- 10. Current Dev Practices +Desktop First RWD Web Performance Blues
- 11. RWD could alsomean responsible web design. Start with the small screen & its constraints.
- 12. Mobile first means performancefirst. First Steps
- 13. Adding Web Performance toYour Workflow Part Deux:
- 14. Web Perf OptimizationTenets Reduce requests. Reduce asset size. Reduce page render time.
- 15. Introducing the Team Becauseperformance is a team effort.
- 16. Introducing the Team “Dave” fullstack dev “Adam” front-end dev Any resemblance to real persons, living or dead, is purely coincidental. Serious.
- 17. Parts of aProject 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.
- 18. First Steps The SixParts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
- 19. The New ProjectShould... 1. Look cool 2.Have pizzazz 3.Use brand colors ... 99. Be fast 98. Look good on an iPhone First Steps
- 20. Set a PerformanceBudget 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/
- 21. First Steps Learn toLove the Inspector http://bit.ly/15sWYsx
- 22. First Steps Save Yourselfa Headache & Disable Your Cache When Testing
- 23. 1. First Steps 2.Design& Production 3.Programming 4.Testing 5.Deployment 6.Monitoring Design & Performance The Six Parts of a Project
- 24. Design & Performance Thingsto 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.
- 25. Responsive Images Most solutionsare silly & verbose. Focus on properly formatting images. Lazy load them & don’t worry about “high DPI.” Addy Osmani’s Tool List http://addyosmani.com/blog/image- optimization-tools/
- 26. Design & Performance Explainingthe Network Panel: The Waterfall
- 27. Design & Performance Explainingthe Network Panel: Resource Size transferred size real size re-order
- 28. Design & Performance latency+ download latency re-order Explaining the Network Panel: Latency
- 29. Design & Performance domcontentloaded onload Explainingthe Network Panel: Events
- 30. Design & Performance saveHAR file locally Explaining the Network Panel: Saving Files for Comparison
- 31. Best request isno request. Worst request is one that blocks the parser. Source: Ilya Grigorik - Ilya Grigorik @ilyagrigorik “ ” Design & Performance
- 32. Corollary: The nextbest request is the one not parsed. Source: My brain - Me @dmolsen “ ” Design & Performance
- 33. Design & Performance Yourgoal when using the Network Panel is to shorten & compress the waterfall by focusing on the critical path. Focus on delivering content that’s above the fold. Remember, test the squishy too.
- 34. Design & Performance Explainingthe Profiles Panel: CSS Selectors
- 35. Design & Performance Explainingthe Profiles Panel: CSS Selectors
- 36. CodeKit CodeKit:Web Perf inYour Workflow http://incident57.com/codekit/ Design & Performance
- 37. Programming & Performance TheSix Parts of a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
- 38. Programming & Performance Thingsto 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.
- 39. Programming & Performance Explainingthe Timeline Panel
- 40. Test & OptimizePerformance with jsPerf http://jsperf.com Programming & Performance
- 41. Responsive Design +Server-side http://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design http://www.slideshare.net/dmolsenwvu/ress-an-evolution-of-responsive-web-design
- 42. Testing The Six Partsof a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
- 43.
- 44.
- 45. Google Analytics SiteSpeed http://www.httpwatch.com IE & Firefox Performance Issues Testing
- 46.
- 47. Google Analytics SiteSpeed http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - Beyond the Basics Testing
- 48. Google Analytics SiteSpeed Customizing WebPagetest: Capturing Events After onLoad Testing
- 49. Customizing WebPagetest: Blackholes forRequests Testing
- 50. Google Analytics SiteSpeed Customizing WebPagetest: Scripting & Custom Viewports Testing
- 51.
- 52. Customizing WebPageTest: Video Comparison- Small Viewport Testing
- 53.
- 54.
- 55.
- 56. Deployment The Six Partsof a Project 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
- 57. Deployment Finally getting to“traditional” performance techniques... Performance can’t simply be tacked onto the end of a project.
- 58. Concatenate files withinreason. Minify files as appropriate. Make sure the server supports file compression & cache headers. Deployment Things to Keep in Mind...
- 59. mod_pagespeed Automates aLot http://developers.google.com/speed/pagespeed/mod Deployment
- 60. The Six Partsof a Project Monitoring 1. First Steps 2.Design & Production 3.Programming 4.Testing 5.Deployment 6.Monitoring
- 61. Google Analytics’ SiteSpeed Monitoring
- 62.
- 63. Setting Up aDevice Lab Part Trois:
- 64. eBay MobileKarma.com Cellphone store leftovers Opendevice labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
- 65.
- 66. 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:
- 67. WEB PERF TWEEPSTO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @tameverts @yoavweiss@scottjehl just a sampling...
- 68.
- 69. Dave Olsen Professional Technologist WestVirginia University @dmolsen Thanks for Listening Illustrations by Graham Curry