Download as PDF, PPTX
Uploaded byDave Olsen
Measuring Web Performance (HighEdWeb FL Edition)
The document discusses the importance of web performance, particularly in mobile design, emphasizing how it impacts user expectations and business outcomes. It covers tools and methods for measuring and optimizing web performance, such as reducing asset size and requests, and best practices for mobile optimization. Additionally, it provides insights into setting up a device lab for effective testing and highlights useful resources and communities for further learning.
More Related Content
Similar to Measuring Web Performance (HighEdWeb FL Edition)
Measuring Web Performance (HighEdWeb FL Edition)
- 1. Measuring Web Performance Dave Olsen,@dmolsen West Virginia University HighEdWeb Florida http://flic.kr/p/7A8xxN
- 2.
- 3.
- 4. The Mobile Book •Covers everything mobile • Produced by Smashing Media • Chapters by Peter-Paul Koch, Stephanie Rieger, Brad Frost, Trent Walton, me & others • Door prize here! http://the-mobile-book.com
- 5. What I’ll TalkAbout • Quick Intro About Why We Should Care About Web Perf • Tools for Measuring Web Performance • Setting Up a Device Lab
- 6. WHY SHOULD WECARE ABOUT WEB PERFORMANCE? http://flic.kr/p/4JY1Yr
- 7. brad’s iceberg © BradFrost © Brad Frost
- 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. brad’s iceberg © BradFrost© Brad Frost © Brad Frost
- 10. The average weightof a web page today. Source: HTTP Archive Images JavaScript Flash HTML CSS Other 77% 1.3 MB
- 11. RWD sites whose smallscreen design weighs the same as the large screen design. Source: Podjarny 72%
- 12. Users expect your mobilesite to load as quickly as your desktop site. 71% Source: Gomez
- 13. 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
- 14. Mobile first means performancefirst. (start thinking about performance at the design stage)
- 15. Over Downloading Download &Hide Download & Shrink Download & Ignore PRIMARY PERFORMANCE ISSUES FOR RWD Poor Networks High Latency Variable Bandwidth Packet Loss
- 16. MOBILE OPTIMIZATION FOCUS 1. Reducerequests 2. Reduce asset size 3. Speed-up page render http://flic.kr/p/4zzKee
- 17. 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 FE P FE FE FE
- 18. Best request isno request. Worst request is one that blocks the parser. Source: Ilya Grigorik “ ”- Ilya Grigorik @ilyagrigorik
- 19. Image compression Use a servicelike kraken.io to optimize images. Also use CSS sprites as appropriate. Compress HTML & CSS Use mod_deflate to make sure text-based assets are compressed for transfer. 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 P SS FE P FE
- 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 FE FE FE FE FE
- 21. Testing Tools toolbox, tools WEBPERFORMANCE TOOLS http://flic.kr/p/4BZsQJ
- 22.
- 23.
- 24. LEARN TO LOVETHE INSPECTOR
- 25. DEVTOOLS CAN DOTHAT? http://bit.ly/15sWYsx
- 26. FOLLOW ALONG BYOPENING THE DEVELOPER TOOLS IN CHROME
- 27. SAVE YOURSELF AHEADACHE & DISABLE CACHE WHEN TESTING
- 28. EXPLAINING THE NETWORKPANEL: RESOURCE SIZE transferred size real size re-order
- 29. EXPLAINING THE NETWORKPANEL: LATENCY latency + download latency re-order
- 30. EXPLAINING THE NETWORKPANEL: EVENTS domcontentloaded onload
- 31. EXPLAINING THE NETWORKPANEL: SAVING HAR FILES FOR COMPARISON save HAR file locally
- 32. A narrower, shorter waterfallis the goal.
- 33. http://flic.kr/p/bMdzZ2 Test the squishy. defaultstyles vs. min-width vs. max-width
- 34. Performance http://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6e A budget isa guide, not a hard & fast limit. Performance tweaks are compromises.
- 35.
- 36. EXPLAINING THE PROFILESPANEL: CSS SELECTORS
- 37. EXPLAINING THE PROFILESPANEL: CSS SELECTORS
- 38.
- 39.
- 40.
- 41. Google Analytics SiteSpeed http://www.httpwatch.com IE & FIREFOX PERFORMANCE ISSUES
- 42. Google Analytics SiteSpeed GOOGLE ANALYTICS’ SITE SPEED
- 43.
- 44. Google Analytics SiteSpeed http://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basics WebPagetest - BEYOND THE BASICS
- 45. Google Analytics SiteSpeed CUSTOMIZING WebPagetest: CAPTURING EVENTS AFTER ONLOAD
- 46.
- 47. Google Analytics SiteSpeed CUSTOMIZING WebPagetest: SCRIPTING & CUSTOM VIEWPORTS
- 48.
- 49. CUSTOMIZING WebPageTest: VIDEO COMPARISON- SMALL VIEWPORT
- 50. mobile bookmarklet THE ULTIMATEMOBILE PERFORMANCE BOOKMARKLET
- 51.
- 52.
- 53. TEST & OPTIMIZEJAVASCRIPT WITH JSPERF http://jsperf.com
- 54.
- 55.
- 56. 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
- 57. CodeKit CODEKIT: WEB PERFIN YOUR WORKFLOW Optimize Images Combine & Minify Features http://incident57.com/codekit/
- 58.
- 59.
- 60. eBay MobileKarma.com Cellphone store leftovers Opendevice labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
- 61.
- 62. 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:
- 63. ADOBE EDGE INSPECT (THEAPP FORMERLY KNOWN AS ADOBE SHADOW)
- 64. RESS: AN EVOLUTIONOF RESPONSIVE DESIGN http://slidesha.re/KtByzQ
- 65. WEB PERF TWEEPSTO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @joshuabixby @yoavweiss@scottjehl just a sampling
- 66.
- 67.
- 68. Dave Olsen Professional Technologist WestVirginia University @dmolsen THANKS FOR LISTENING