Download as PDF, PPTX
Uploaded byDave Olsen
Measuring Web Performance
The presentation discusses the importance of web performance, outlining tools and strategies for measuring and optimizing it. Key points include the challenges of responsive web design, emphasizing performance at the design stage, and methods for reducing requests and improving page render times. It also introduces Responsive Web Design + Server Side Components (RESS) as a solution to enhance performance by combining adaptive layouts with server-side optimizations.
More Related Content
Similar to Measuring Web Performance
Measuring Web Performance
- 1. Measuring Web Performance Dave Olsen,@dmolsen West Virginia University RWD Summit http://flic.kr/p/7A8xxN
- 2.
- 3.
- 4. What I’ll TalkAbout • Quick Intro About Why We Should Care About Web Perf • Tools for Measuring Web Performance • Setting Up a Device Lab • Responsive Design + Server- side Solutions
- 5. WHY SHOULD WECARE ABOUT WEB PERFORMANCE? http://flic.kr/p/4JY1Yr
- 6. brad’s iceberg © BradFrost © Brad Frost
- 7. 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
- 8. brad’s iceberg © BradFrost© Brad Frost © Brad Frost
- 9. The average weightof a web page today. Source: HTTP Archive Images JavaScript Flash HTML CSS Other 77% 1.3 MB
- 10. RWD sites whose smallscreen design weighs the same as the large screen design. Source: Podjarny 72%
- 11. Users expect your mobilesite to load as quickly as your desktop site. 71% Source: Gomez
- 12. Bounce Rate Conversion Rate CartSize 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
- 13. Mobile first means performancefirst. (start thinking about performance at the design stage)
- 14. Over Downloading Download &Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss
- 15. BREAKING DOWN AREQUEST DNS (1ms) Connecting (61ms) Waiting (199ms) Receiving (790ms)
- 16. MOBILE OPTIMIZATION FOCUS 1. Reducerequests 2. Reduce asset size 3. Speed-up page render http://flic.kr/p/4zzKee
- 17. Best request isno request. Worst request is one that blocks the parser. Source: Ilya Grigorik “ ”- Ilya Grigorik @ilyagrigorik
- 18. Browser cache The simplest wayto reduce requests is to make sure the browser doesn’t need to make them. Make sure assets are bring cached on the browser. Concatenate JS & CSS Combine similar files together in one or multiple larger files to reduce requests. May harm performance too. Lazy load content Don’t make requests until necessary. Filament Group’s AJAX Include Pattern or lazyBlock. data: URI For small images & fonts try embedding them in your CSS file by using the data: URI. Conditional loading Use a resource loader like Modernizr.load to conditionally include JavaScript & CSS files. 1. REDUCE REQUESTS
- 19. HTML & CSS compression Usemod_deflate to make sure text-based assets are compressed for transfer. Image compression Use a service like kraken.io to optimize images. Also use CSS sprites as appropriate. Try to avoid images When possible think about avoiding images. Implement with CSS or Canvas. Or use SVG or Progressive JPEGs. Minification Use a minifying service to make sure text-based assets are as small as possible. If using PHP use Minify. MicroJS or, even better, Vanilla JS Avoid using bulky frameworks if you’re using them for simple tasks like selectors. Try microjs.com to find libraries that may be smaller & more suitable. JavaScript also blocks the rendering of the page. 2. REDUCE ASSET SIZE
- 20. Avoid DOM reflows & repaints Byusing JS to modify the DOM you can cause unnecessary reflows & repaints of your browser. They slow down page render time as well as burn battery. Defer loading of JavaScript Use HTML5’s script defer & async attributes to delay downloading files. Can also insert script elements into the DOM using the onLoad event. Lazy load JavaScript Comment out JavaScript that isn’t required at page load. Uncomment & eval() when required. Touch beats onClick While not directly related to page render, by making sure your links use a Touch event rather than an onClick event user interactions will speed up by 300ms. Avoid SM widgets Try using simple links to services rather than utilizing the JavaScript widgets. They’re performance hogs. 3. SPEED-UP PAGE RENDER
- 21. Testing Tools toolbox, tools WEBPERFORMANCE TOOLS http://flic.kr/p/4BZsQJ
- 22.
- 23.
- 24. LEARN TO LOVETHE INSPECTOR
- 25. FOLLOW ALONG BYOPENING THE DEVELOPER TOOLS IN CHROME
- 26. SAVE YOURSELF AHEADACHE & DISABLE CACHE WHEN TESTING
- 27. EXPLAINING THE NETWORKPANEL: RESOURCE SIZE transferred size real size re-order
- 28. EXPLAINING THE NETWORKPANEL: LATENCY latency + download latency re-order
- 29. EXPLAINING THE NETWORKPANEL: EVENTS domcontentloaded onload
- 30. EXPLAINING THE NETWORKPANEL: SAVING HAR FILES FOR COMPARISON save HAR file locally
- 31. A narrower, shorter waterfallis the goal.
- 32.
- 33. Performance http://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6e A guide, nota hard & fast limit. Performance tweaks are compromises.
- 34.
- 35. EXPLAINING THE PROFILESPANEL: CSS SELECTORS
- 36. EXPLAINING THE PROFILESPANEL: CSS SELECTORS
- 37.
- 38.
- 39.
- 40. Google Analytics SiteSpeed http://www.httpwatch.com IE & FIREFOX PERFORMANCE ISSUES
- 41. Google Analytics SiteSpeed GOOGLE ANALYTICS’ SITE SPEED
- 42.
- 43. Google Analytics SiteSpeed http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - BEYOND THE BASICS
- 44. Google Analytics SiteSpeed CUSTOMIZING WebPagetest: CAPTURING EVENTS AFTER ONLOAD
- 45.
- 46. Google Analytics SiteSpeed CUSTOMIZING WebPagetest: SCRIPTING & CUSTOM VIEWPORTS
- 47.
- 48. CUSTOMIZING WebPageTest: VIDEO COMPARISON- SMALL VIEWPORT
- 49. mobile bookmarklet THE ULTIMATEMOBILE PERFORMANCE BOOKMARKLET
- 50.
- 51.
- 52. TEST & OPTIMIZEJAVASCRIPT WITH JSPERF http://jsperf.com
- 53.
- 54.
- 55. mod_pagespeed AUTOMATES ALOT http://developers.google.com/speed/pagespeed/mod add_head combine_css convert_jpeg_to_progressive convert_meta_tags extend_cache flatten_css_imports inline_css inline_import_to_link inline_javascript rewrite_css rewrite_images rewrite_javascript rewrite_style_attributes_with_url Default Filters
- 56. CodeKit CODEKIT: WEB PERFIN YOUR WORKFLOW Optimize Images Combine & Minify Features http://incident57.com/codekit/
- 57.
- 58.
- 59. eBay MobileKarma.com Cellphone store leftovers Opendevice labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
- 60.
- 61. 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 Samsung Fascinate + Google Nexus + $438 Example:
- 62. ADOBE EDGE INSPECT (THEAPP FORMERLY KNOWN AS ADOBE SHADOW)
- 64. RESS* can bea scalpel for your responsive designs. REsponsive Design + Server Side Components http://flic.kr/p/a4VsPv
- 65.
- 66.
- 67.
- 68. http://flic.kr/p/8x6b8X NOT SO FAST,MY FRIENDS...
- 69. Image & VideoMedia 3rd Party Content One Set of Mark-up CHALLENGES FOR RWD
- 70. STANDARDS ARE STILLDEVELOPING
- 71.
- 72. Responsive Web Design+ Server Side Components (I have no idea what becomes of the W, D, or C)
- 73. - Luke Wroblewski @lukew http://www.lukew.com/ff/entry.asp?1392 Ina nutshell, RESS combines adaptive layouts with server side component (not full page) optimization. So a single set of page templates define an entire Web site for all devices but key components within that site have device-class specific implementations that are rendered server side. “ ”
- 74. http://www.lukew.com/ff/entry.asp?1509 - Luke Wroblewski @lukew •If you want layout adjustments across devices. • And optimization at the component level to increase performance or tune user experience. • You trust server-side device detection with sensible defaults. “ ”
- 75.
- 76. Infancy http://flic.kr/p/7B7uyp RESS IS INITS INFANCY
- 77. ND data http://weedygarden.net/2012/05/a-case-for-ress/ Large Screen: 136requests @ 2.7MB Small Screen: 23 requests @ 291K
- 78.
- 79.
- 80.
- 81.
- 82. • Requires server-side languages. •Server-side feature detection so it can be spoofed. • RESS isn’t a silver bullet. • Data needs to be separated from layout. CHALLENGES FOR RESS
- 83. - Jon ArnesSæterås @jonarnes http://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/ It is not only the design of the web site and the layout of content that needs to be adapted or enhanced; the idea of being responsive, adaptive and enhancing, must be implemented in the whole value chain. “ ”
- 84. WEB PERF TWEEPSTO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @joshuabixby @yoavweiss@scottjehl just a sampling
- 85.
- 86.
- 87. Dave Olsen Professional Technologist WestVirginia University @dmolsen THANKS FOR LISTENING