Measuring Web Performance
107 likes•39,120 views
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.
Measuring Web Performance
- 1. Measuring Web Performance Dave Olsen, @dmolsen West Virginia University RWD Summit http://flic.kr/p/7A8xxN
- 4. What I’ll Talk About • 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 WE CARE ABOUT WEB PERFORMANCE? http://flic.kr/p/4JY1Yr
- 6. brad’s iceberg © Brad Frost © Brad Frost
- 7. 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
- 8. brad’s iceberg © Brad Frost© Brad Frost © Brad Frost
- 9. The average weight of a web page today. Source: HTTP Archive Images JavaScript Flash HTML CSS Other 77% 1.3 MB
- 10. RWD sites whose small screen design weighs the same as the large screen design. Source: Podjarny 72%
- 11. Users expect your mobile site to load as quickly as your desktop site. 71% Source: Gomez
- 12. 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
- 13. Mobile first means performance first. (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 A REQUEST DNS (1ms) Connecting (61ms) Waiting (199ms) Receiving (790ms)
- 16. MOBILE OPTIMIZATION FOCUS 1. Reduce requests 2. Reduce asset size 3. Speed-up page render http://flic.kr/p/4zzKee
- 17. Best request is no request. Worst request is one that blocks the parser. Source: Ilya Grigorik “ ”- Ilya Grigorik @ilyagrigorik
- 18. Browser cache The simplest way to 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 Use mod_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 By using 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 WEB PERFORMANCE TOOLS http://flic.kr/p/4BZsQJ
- 24. LEARN TO LOVE THE INSPECTOR
- 25. FOLLOW ALONG BY OPENING THE DEVELOPER TOOLS IN CHROME
- 26. SAVE YOURSELF A HEADACHE & DISABLE CACHE WHEN TESTING
- 27. EXPLAINING THE NETWORK PANEL: RESOURCE SIZE transferred size real size re-order
- 28. EXPLAINING THE NETWORK PANEL: LATENCY latency + download latency re-order
- 29. EXPLAINING THE NETWORK PANEL: EVENTS domcontentloaded onload
- 30. EXPLAINING THE NETWORK PANEL: SAVING HAR FILES FOR COMPARISON save HAR file locally
- 31. A narrower, shorter waterfall is the goal.
- 33. Performance http://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6e A guide, not a hard & fast limit. Performance tweaks are compromises.
- 34. EXPLAINING THE TIMELINE PANEL
- 35. EXPLAINING THE PROFILES PANEL: CSS SELECTORS
- 36. EXPLAINING THE PROFILES PANEL: CSS SELECTORS
- 37. EXPLAINING THE AUDITS PANEL
- 39. REMOTE DEBUGGING
- 40. Google Analytics Site Speed http://www.httpwatch.com IE & FIREFOX PERFORMANCE ISSUES
- 41. Google Analytics Site Speed GOOGLE ANALYTICS’ SITE SPEED
- 43. Google Analytics Site Speed http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - BEYOND THE BASICS
- 44. Google Analytics Site Speed CUSTOMIZING WebPagetest: CAPTURING EVENTS AFTER ONLOAD
- 45. CUSTOMIZING WebPagetest: BLACKHOLES FOR REQUESTS
- 46. Google Analytics Site Speed CUSTOMIZING WebPagetest: SCRIPTING & CUSTOM VIEWPORTS
- 48. CUSTOMIZING WebPageTest: VIDEO COMPARISON - SMALL VIEWPORT
- 49. mobile bookmarklet THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET
- 52. TEST & OPTIMIZE JAVASCRIPT WITH JSPERF http://jsperf.com
- 55. mod_pagespeed AUTOMATES A LOT 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 PERF IN YOUR WORKFLOW Optimize Images Combine & Minify Features http://incident57.com/codekit/
- 59. eBay MobileKarma.com Cellphone store leftovers Open device labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
- 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 (THE APP FORMERLY KNOWN AS ADOBE SHADOW)
- 64. RESS* can be a scalpel for your responsive designs. REsponsive Design + Server Side Components http://flic.kr/p/a4VsPv
- 65. One... URL. Set of Mark-up. Deployment. WHY USE RWD
- 66. futurefriend.ly
- 68. http://flic.kr/p/8x6b8X NOT SO FAST, MY FRIENDS...
- 69. Image & Video Media 3rd Party Content One Set of Mark-up CHALLENGES FOR RWD
- 70. STANDARDS ARE STILL DEVELOPING
- 71. What is RESS?
- 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 In a 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. “ ”
- 76. Infancy http://flic.kr/p/7B7uyp RESS IS IN ITS INFANCY
- 77. ND data http://weedygarden.net/2012/05/a-case-for-ress/ Large Screen: 136 requests @ 2.7MB Small Screen: 23 requests @ 291K
- 78. developers and designers http://flic.kr/p/7Ma9n DESIGNERS + DEVELOPERS?
- 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 Arnes Sæ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 TWEEPS TO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @joshuabixby @yoavweiss@scottjehl just a sampling
- 86. QUESTIONS?
- 87. Dave Olsen Professional Technologist West Virginia University @dmolsen THANKS FOR LISTENING