Successfully reported this slideshow.

Measuring Web Performance

107

Share

Upcoming SlideShare
Web performance
Web performance
Loading in …3
×
1 of 87
1 of 87

Measuring Web Performance

107

Share

Download to read offline

Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.

In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.

This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.

Today, a web page can be delivered to desktop computers, televisions, or handheld devices like tablets or phones. While a technique like responsive design helps ensure that our web sites look good across that spectrum of devices we may forget that we need to make sure that our web sites also perform well across that same spectrum. More and more of our users are shifting their Internet usage to these more varied platforms and connection speeds with some moving entirely to mobile Internet.

In this session we’ll look at the tools that can help you understand, measure and improve the web performance of your web sites and applications. The talk will also discuss how new server-side techniques might help us optimize our front-end performance. Finally, since the best way to test is to have devices in your hand, we’ll discuss some tips for getting your hands on them cheaply.

This presentation builds upon Dave’s “Optimization for Mobile” chapter in Smashing Magazine’s “The Mobile Book.”

This talk was given at the Responsive Web Design Summit hosted by Environments for Humans.

More Related Content

Measuring Web Performance

  1. Measuring Web Performance Dave Olsen, @dmolsen West Virginia University RWD Summit http://flic.kr/p/7A8xxN
  2. slideshare.net/dmolsenwvu
  3. introduction about me @dmolsen
  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
  22. Diagnostic Tools Automated Tools
  23. Diagnostic Tools Automated Tools
  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.
  32. http://flic.kr/p/bMdzZ2
  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
  38. PAGESPEED INSIGHTS EXTENSION https://developers.google.com/speed/pagespeed/insights
  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
  42. PERFORMANCE TESTING PROXIES MobitestWebPagetest
  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
  47. CUSTOMIZING WebPageTest: VIDEO COMPARISON
  48. CUSTOMIZING WebPageTest: VIDEO COMPARISON - SMALL VIEWPORT
  49. mobile bookmarklet THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET
  50. charlesproxy.com SLOWING THINGS DOWN ThrottleCharles
  51. USING CHARLES PROXY http://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
  52. TEST & OPTIMIZE JAVASCRIPT WITH JSPERF http://jsperf.com
  53. W3C’s NAVIGATION TIMING http://www.w3.org/TR/navigation-timing/ http://www.html5rocks.com/en/tutorials/webperformance/basics/
  54. Diagnostic Tools Automated Tools
  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/
  57. DEVICES http://flic.kr/p/cfkZhN
  58. charlesproxy.com EMULATING MOBILE DEVICES EmulatorsBrowserStack
  59. eBay MobileKarma.com Cellphone store leftovers Open device labs GET YOUR HANDS ON REAL DEVICES http://flic.kr/p/7972f6
  60. OPENDEVICELAB.COM
  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)
  63. RESS* can be a scalpel for your responsive designs. REsponsive Design + Server Side Components http://flic.kr/p/a4VsPv
  64. One... URL. Set of Mark-up. Deployment. WHY USE RWD
  65. futurefriend.ly
  66. balloons http://flic.kr/p/h6McT TIME TO PARTY!
  67. http://flic.kr/p/8x6b8X NOT SO FAST, MY FRIENDS...
  68. Image & Video Media 3rd Party Content One Set of Mark-up CHALLENGES FOR RWD
  69. STANDARDS ARE STILL DEVELOPING
  70. What is RESS?
  71. Responsive Web Design + Server Side Components (I have no idea what becomes of the W, D, or C)
  72. - 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. “ ”
  73. 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. “ ”
  74. DESKTOPWEBM-ADVANCED ress.dmolsen.com MOBILEBASIC
  75. Infancy http://flic.kr/p/7B7uyp RESS IS IN ITS INFANCY
  76. ND data http://weedygarden.net/2012/05/a-case-for-ress/ Large Screen: 136 requests @ 2.7MB Small Screen: 23 requests @ 291K
  77. developers and designers http://flic.kr/p/7Ma9n DESIGNERS + DEVELOPERS?
  78. Two Possible Solutions Server-side Solutions http://flic.kr/p/9jatna
  79. Browser Detection#1
  80. Server-side Feature Detection#2
  81. • 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
  82. - 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. “ ”
  83. WEB PERF TWEEPS TO FOLLOW @ilyagrigorik @andydavies @souders @patmeenan @stoyanstefanov @joshuabixby @yoavweiss@scottjehl just a sampling
  84. Doug Gapinski Strategist mStoner @thedougco SPECIAL THANKS TO...
  85. QUESTIONS?
  86. Dave Olsen Professional Technologist West Virginia University @dmolsen THANKS FOR LISTENING

×