MeasuringWeb PerformanceDave Olsen, @dmolsenWest Virginia UniversityRWD Summithttp://flic.kr/p/7A8xxN
slideshare.net/dmolsenwvu
introduction about me@dmolsen
What I’ll Talk About• Quick Intro About Why WeShould Care About Web Perf• Tools for Measuring WebPerformance• Setting Up a...
WHY SHOULD WE CARE ABOUTWEB PERFORMANCE?http://flic.kr/p/4JY1Yr
brad’s iceberg© Brad Frost© Brad Frost
The way in which CSS mediaqueries have been promoted formobile hides tough problemsand gives developers a falsepromise of ...
brad’s iceberg© Brad Frost© Brad Frost© Brad Frost
The average weight of a web page today.Source: HTTP ArchiveImages JavaScriptFlashHTMLCSSOther77%1.3 MB
RWD sites whosesmall screen designweighs the same as thelarge screen design.Source: Podjarny72%
Users expect yourmobile site to loadas quickly as yourdesktop site.71%Source: Gomez
Bounce RateConversionRate Cart Size PageViews200ms - - - -1.2%500ms -4.7% -1.9% - -5.7%1000ms -8.3% -3.5% -2.1% -9.4%CASE ...
Mobile first meansperformance first.(start thinking about performance at the design stage)
Over DownloadingDownload & HideDownload & ShrinkDownload & IgnorePRIMARY PERFORMANCE ISSUES FOR RWDPoor NetworksHigh Laten...
BREAKING DOWN A REQUESTDNS (1ms)Connecting (61ms)Waiting (199ms)Receiving (790ms)
MOBILE OPTIMIZATIONFOCUS1. Reduce requests2. Reduce asset size3. Speed-up pagerenderhttp://flic.kr/p/4zzKee
Best request is no request.Worst request is one thatblocks the parser.Source: Ilya Grigorik“”- Ilya Grigorik@ilyagrigorik
BrowsercacheThe simplest way to reduce requests is to make sure thebrowser doesn’t need to make them. Make sure assetsare ...
HTML & CSScompressionUse mod_deflate to make sure text-based assets arecompressed for transfer.ImagecompressionUse a servi...
Avoid DOMreflows &repaintsBy using JS to modify the DOM you can causeunnecessary reflows & repaints of your browser. Theys...
Testing Toolstoolbox, toolsWEB PERFORMANCETOOLShttp://flic.kr/p/4BZsQJ
DiagnosticToolsAutomatedTools
DiagnosticToolsAutomatedTools
LEARN TO LOVE THE INSPECTOR
FOLLOW ALONG BY OPENING THEDEVELOPER TOOLS IN CHROME
SAVE YOURSELF A HEADACHE &DISABLE CACHE WHEN TESTING
EXPLAINING THE NETWORK PANEL:RESOURCE SIZEtransferred sizereal sizere-order
EXPLAINING THE NETWORK PANEL:LATENCYlatency + downloadlatencyre-order
EXPLAINING THE NETWORK PANEL:EVENTSdomcontentloadedonload
EXPLAINING THE NETWORK PANEL:SAVING HAR FILES FOR COMPARISONsave HAR file locally
A narrower, shorterwaterfall is the goal.
http://flic.kr/p/bMdzZ2
Performancehttp://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6eA guide, not a hard & fast limi...
EXPLAINING THE TIMELINE PANEL
EXPLAINING THE PROFILES PANEL:CSS SELECTORS
EXPLAINING THE PROFILES PANEL:CSS SELECTORS
EXPLAINING THE AUDITS PANEL
PAGESPEED INSIGHTS EXTENSIONhttps://developers.google.com/speed/pagespeed/insights
REMOTE DEBUGGING
Google Analytics Site Speedhttp://www.httpwatch.comIE & FIREFOX PERFORMANCE ISSUES
Google Analytics Site SpeedGOOGLE ANALYTICS’ SITE SPEED
PERFORMANCE TESTING PROXIESMobitestWebPagetest
Google Analytics Site Speedhttp://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - BEYOND THE BA...
Google Analytics Site SpeedCUSTOMIZING WebPagetest:CAPTURING EVENTS AFTER ONLOAD
CUSTOMIZING WebPagetest:BLACKHOLES FOR REQUESTS
Google Analytics Site SpeedCUSTOMIZING WebPagetest:SCRIPTING & CUSTOM VIEWPORTS
CUSTOMIZING WebPageTest:VIDEO COMPARISON
CUSTOMIZING WebPageTest:VIDEO COMPARISON - SMALL VIEWPORT
mobile bookmarkletTHE ULTIMATE MOBILEPERFORMANCE BOOKMARKLET
charlesproxy.comSLOWING THINGS DOWNThrottleCharles
USING CHARLES PROXYhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
TEST & OPTIMIZE JAVASCRIPT WITH JSPERFhttp://jsperf.com
W3C’s NAVIGATION TIMINGhttp://www.w3.org/TR/navigation-timing/http://www.html5rocks.com/en/tutorials/webperformance/basics/
DiagnosticToolsAutomatedTools
mod_pagespeed AUTOMATES A LOThttp://developers.google.com/speed/pagespeed/mod  add_head  combine_css   convert_jpeg_to_pro...
CodeKitCODEKIT: WEB PERF IN YOUR WORKFLOW  Optimize Images  Combine & MinifyFeatureshttp://incident57.com/codekit/
DEVICEShttp://flic.kr/p/cfkZhN
charlesproxy.comEMULATING MOBILE DEVICESEmulatorsBrowserStack
eBayMobileKarma.comCellphone store leftoversOpen device labsGET YOUR HANDS ONREAL DEVICEShttp://flic.kr/p/7972f6
OPENDEVICELAB.COM
Base on:WiFi-capable, AnalyticsRank, OS, ScreenDimensions, & CostSuggested focus:iPod Touch, mid-levelAndroid, high-end An...
ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
RESS* can be a scalpelfor your responsive designs.REsponsive Design + Server Side Componentshttp://flic.kr/p/a4VsPv
One...URL.Set of Mark-up.Deployment.WHY USE RWD
futurefriend.ly
balloonshttp://flic.kr/p/h6McTTIME TO PARTY!
http://flic.kr/p/8x6b8XNOT SO FAST, MY FRIENDS...
Image & Video Media3rd Party ContentOne Set of Mark-upCHALLENGES FOR RWD
STANDARDS ARE STILL DEVELOPING
What is RESS?
Responsive Web Design +Server Side Components(I have no idea what becomes of the W, D, or C)
- Luke Wroblewski@lukewhttp://www.lukew.com/ff/entry.asp?1392In a nutshell, RESS combines adaptive layoutswith server side...
http://www.lukew.com/ff/entry.asp?1509- Luke Wroblewski@lukew• If you want layout adjustments across devices.• And optimiz...
DESKTOPWEBM-ADVANCEDress.dmolsen.comMOBILEBASIC
Infancyhttp://flic.kr/p/7B7uypRESS IS IN ITS INFANCY
ND datahttp://weedygarden.net/2012/05/a-case-for-ress/Large Screen:136 requests @ 2.7MBSmall Screen:23 requests @ 291K
developers and designershttp://flic.kr/p/7Ma9nDESIGNERS + DEVELOPERS?
Two Possible SolutionsServer-sideSolutionshttp://flic.kr/p/9jatna
Browser Detection#1
Server-sideFeature Detection#2
• Requires server-sidelanguages.• Server-side feature detectionso it can be spoofed.• RESS isn’t a silver bullet.• Data ne...
- Jon Arnes Sæterås@jonarneshttp://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/It is not only the design of the...
WEB PERF TWEEPS TO FOLLOW@ilyagrigorik@andydavies@souders @patmeenan@stoyanstefanov@joshuabixby @yoavweiss@scottjehljust a...
Doug GapinskiStrategistmStoner@thedougcoSPECIAL THANKS TO...
QUESTIONS?
Dave OlsenProfessional TechnologistWest Virginia University@dmolsenTHANKS FOR LISTENING
Measuring Web Performance
Upcoming SlideShare
Loading in...5
×

Measuring Web Performance

18,141

Published on

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.

Published in: Technology, Design
1 Comment
102 Likes
Statistics
Notes
  • great ,btw just check out this
    http://slidesha.re/YALYBY
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
18,141
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
303
Comments
1
Likes
102
Embeds 0
No embeds

No notes for slide

Measuring Web Performance

  1. 1. MeasuringWeb PerformanceDave Olsen, @dmolsenWest Virginia UniversityRWD Summithttp://flic.kr/p/7A8xxN
  2. 2. slideshare.net/dmolsenwvu
  3. 3. introduction about me@dmolsen
  4. 4. What I’ll Talk About• Quick Intro About Why WeShould Care About Web Perf• Tools for Measuring WebPerformance• Setting Up a Device Lab• Responsive Design + Server-side Solutions
  5. 5. WHY SHOULD WE CARE ABOUTWEB PERFORMANCE?http://flic.kr/p/4JY1Yr
  6. 6. brad’s iceberg© Brad Frost© Brad Frost
  7. 7. The way in which CSS mediaqueries have been promoted formobile hides tough problemsand gives developers a falsepromise of a simple solution fordesigning for small screens.Source: Jason Grigsby on Speakerdeck“”- Jason Grigsby@grigs
  8. 8. brad’s iceberg© Brad Frost© Brad Frost© Brad Frost
  9. 9. The average weight of a web page today.Source: HTTP ArchiveImages JavaScriptFlashHTMLCSSOther77%1.3 MB
  10. 10. RWD sites whosesmall screen designweighs the same as thelarge screen design.Source: Podjarny72%
  11. 11. Users expect yourmobile site to loadas quickly as yourdesktop site.71%Source: Gomez
  12. 12. Bounce RateConversionRate Cart Size PageViews200ms - - - -1.2%500ms -4.7% -1.9% - -5.7%1000ms -8.3% -3.5% -2.1% -9.4%CASE STUDY:MOBILE PERFORMANCE EFFECT ON BUSINESSSource: Web Performance Today
  13. 13. Mobile first meansperformance first.(start thinking about performance at the design stage)
  14. 14. Over DownloadingDownload & HideDownload & ShrinkDownload & IgnorePRIMARY PERFORMANCE ISSUES FOR RWDPoor NetworksHigh LatencyVariable BandwidthPacket Loss
  15. 15. BREAKING DOWN A REQUESTDNS (1ms)Connecting (61ms)Waiting (199ms)Receiving (790ms)
  16. 16. MOBILE OPTIMIZATIONFOCUS1. Reduce requests2. Reduce asset size3. Speed-up pagerenderhttp://flic.kr/p/4zzKee
  17. 17. Best request is no request.Worst request is one thatblocks the parser.Source: Ilya Grigorik“”- Ilya Grigorik@ilyagrigorik
  18. 18. BrowsercacheThe simplest way to reduce requests is to make sure thebrowser doesn’t need to make them. Make sure assetsare bring cached on the browser.ConcatenateJS & CSSCombine similar files together in one or multiple largerfiles to reduce requests. May harm performance too.Lazy loadcontentDon’t make requests until necessary. Filament Group’sAJAX Include Pattern or lazyBlock.data: URI For small images & fonts try embedding them in yourCSS file by using the data: URI.ConditionalloadingUse a resource loader like Modernizr.load toconditionally include JavaScript & CSS files.1. REDUCE REQUESTS
  19. 19. HTML & CSScompressionUse mod_deflate to make sure text-based assets arecompressed for transfer.ImagecompressionUse a service like kraken.io to optimize images.Also use CSS sprites as appropriate.Try to avoidimagesWhen possible think about avoiding images.Implement with CSS or Canvas. Or use SVG orProgressive JPEGs.Minification Use a minifying service to make sure text-based assetsare as small as possible. If using PHP use Minify.MicroJS or,even better,Vanilla JSAvoid using bulky frameworks if you’re using them forsimple tasks like selectors. Try microjs.com to findlibraries that may be smaller & more suitable.JavaScript also blocks the rendering of the page.2. REDUCE ASSET SIZE
  20. 20. Avoid DOMreflows &repaintsBy using JS to modify the DOM you can causeunnecessary reflows & repaints of your browser. Theyslow down page render time as well as burn battery.Deferloading ofJavaScriptUse HTML5’s script defer & async attributes to delaydownloading files. Can also insert script elements intothe DOM using the onLoad event.Lazy loadJavaScriptComment out JavaScript that isn’t required at page load.Uncomment & eval() when required.Touch beatsonClickWhile not directly related to page render, by makingsure your links use a Touch event rather than an onClickevent user interactions will speed up by 300ms.Avoid SMwidgetsTry using simple links to services rather than utilizing theJavaScript widgets. They’re performance hogs.3. SPEED-UP PAGE RENDER
  21. 21. Testing Toolstoolbox, toolsWEB PERFORMANCETOOLShttp://flic.kr/p/4BZsQJ
  22. 22. DiagnosticToolsAutomatedTools
  23. 23. DiagnosticToolsAutomatedTools
  24. 24. LEARN TO LOVE THE INSPECTOR
  25. 25. FOLLOW ALONG BY OPENING THEDEVELOPER TOOLS IN CHROME
  26. 26. SAVE YOURSELF A HEADACHE &DISABLE CACHE WHEN TESTING
  27. 27. EXPLAINING THE NETWORK PANEL:RESOURCE SIZEtransferred sizereal sizere-order
  28. 28. EXPLAINING THE NETWORK PANEL:LATENCYlatency + downloadlatencyre-order
  29. 29. EXPLAINING THE NETWORK PANEL:EVENTSdomcontentloadedonload
  30. 30. EXPLAINING THE NETWORK PANEL:SAVING HAR FILES FOR COMPARISONsave HAR file locally
  31. 31. A narrower, shorterwaterfall is the goal.
  32. 32. http://flic.kr/p/bMdzZ2
  33. 33. Performancehttp://timkadlec.com/2013/01/setting-a-performance-budget/http://flic.kr/p/7BBs6eA guide, not a hard & fast limit.Performance tweaks are compromises.
  34. 34. EXPLAINING THE TIMELINE PANEL
  35. 35. EXPLAINING THE PROFILES PANEL:CSS SELECTORS
  36. 36. EXPLAINING THE PROFILES PANEL:CSS SELECTORS
  37. 37. EXPLAINING THE AUDITS PANEL
  38. 38. PAGESPEED INSIGHTS EXTENSIONhttps://developers.google.com/speed/pagespeed/insights
  39. 39. REMOTE DEBUGGING
  40. 40. Google Analytics Site Speedhttp://www.httpwatch.comIE & FIREFOX PERFORMANCE ISSUES
  41. 41. Google Analytics Site SpeedGOOGLE ANALYTICS’ SITE SPEED
  42. 42. PERFORMANCE TESTING PROXIESMobitestWebPagetest
  43. 43. Google Analytics Site Speedhttp://www.slideshare.net/AndyDavies/web-page-test-beyond-the-basicsWebPagetest - BEYOND THE BASICS
  44. 44. Google Analytics Site SpeedCUSTOMIZING WebPagetest:CAPTURING EVENTS AFTER ONLOAD
  45. 45. CUSTOMIZING WebPagetest:BLACKHOLES FOR REQUESTS
  46. 46. Google Analytics Site SpeedCUSTOMIZING WebPagetest:SCRIPTING & CUSTOM VIEWPORTS
  47. 47. CUSTOMIZING WebPageTest:VIDEO COMPARISON
  48. 48. CUSTOMIZING WebPageTest:VIDEO COMPARISON - SMALL VIEWPORT
  49. 49. mobile bookmarkletTHE ULTIMATE MOBILEPERFORMANCE BOOKMARKLET
  50. 50. charlesproxy.comSLOWING THINGS DOWNThrottleCharles
  51. 51. USING CHARLES PROXYhttp://blog.cloudfour.com/using-charles-proxy-to-examine-ios-apps/
  52. 52. TEST & OPTIMIZE JAVASCRIPT WITH JSPERFhttp://jsperf.com
  53. 53. W3C’s NAVIGATION TIMINGhttp://www.w3.org/TR/navigation-timing/http://www.html5rocks.com/en/tutorials/webperformance/basics/
  54. 54. DiagnosticToolsAutomatedTools
  55. 55. mod_pagespeed AUTOMATES A LOThttp://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_urlDefault Filters
  56. 56. CodeKitCODEKIT: WEB PERF IN YOUR WORKFLOW  Optimize Images  Combine & MinifyFeatureshttp://incident57.com/codekit/
  57. 57. DEVICEShttp://flic.kr/p/cfkZhN
  58. 58. charlesproxy.comEMULATING MOBILE DEVICESEmulatorsBrowserStack
  59. 59. eBayMobileKarma.comCellphone store leftoversOpen device labsGET YOUR HANDS ONREAL DEVICEShttp://flic.kr/p/7972f6
  60. 60. OPENDEVICELAB.COM
  61. 61. Base on:WiFi-capable, AnalyticsRank, OS, ScreenDimensions, & CostSuggested focus:iPod Touch, mid-levelAndroid, high-end Android,a tablet, Blackberry,Windows Phone 7HOW TO DECIDE WHICH TO GETiPod TouchSamsung Fascinate +Google Nexus +$438Example:
  62. 62. ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
  63. 63. RESS* can be a scalpelfor your responsive designs.REsponsive Design + Server Side Componentshttp://flic.kr/p/a4VsPv
  64. 64. One...URL.Set of Mark-up.Deployment.WHY USE RWD
  65. 65. futurefriend.ly
  66. 66. balloonshttp://flic.kr/p/h6McTTIME TO PARTY!
  67. 67. http://flic.kr/p/8x6b8XNOT SO FAST, MY FRIENDS...
  68. 68. Image & Video Media3rd Party ContentOne Set of Mark-upCHALLENGES FOR RWD
  69. 69. STANDARDS ARE STILL DEVELOPING
  70. 70. What is RESS?
  71. 71. Responsive Web Design +Server Side Components(I have no idea what becomes of the W, D, or C)
  72. 72. - Luke Wroblewski@lukewhttp://www.lukew.com/ff/entry.asp?1392In a nutshell, RESS combines adaptive layoutswith server side component (not full page)optimization. So a single set of page templatesdefine an entire Web site for all devices but keycomponents within that site have device-classspecific implementations that are renderedserver side.“”
  73. 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 toincrease performance or tune user experience.• You trust server-side device detection withsensible defaults.“”
  74. 74. DESKTOPWEBM-ADVANCEDress.dmolsen.comMOBILEBASIC
  75. 75. Infancyhttp://flic.kr/p/7B7uypRESS IS IN ITS INFANCY
  76. 76. ND datahttp://weedygarden.net/2012/05/a-case-for-ress/Large Screen:136 requests @ 2.7MBSmall Screen:23 requests @ 291K
  77. 77. developers and designershttp://flic.kr/p/7Ma9nDESIGNERS + DEVELOPERS?
  78. 78. Two Possible SolutionsServer-sideSolutionshttp://flic.kr/p/9jatna
  79. 79. Browser Detection#1
  80. 80. Server-sideFeature Detection#2
  81. 81. • Requires server-sidelanguages.• Server-side feature detectionso it can be spoofed.• RESS isn’t a silver bullet.• Data needs to be separatedfrom layout.CHALLENGES FOR RESS
  82. 82. - Jon Arnes Sæterås@jonarneshttp://mpulp.mobi/2011/05/next-steps-of-responsive-web-design/It is not only the design of the web site andthe layout of content that needs to be adaptedor enhanced; the idea of being responsive,adaptive and enhancing, must be implementedin the whole value chain.“”
  83. 83. WEB PERF TWEEPS TO FOLLOW@ilyagrigorik@andydavies@souders @patmeenan@stoyanstefanov@joshuabixby @yoavweiss@scottjehljust a sampling
  84. 84. Doug GapinskiStrategistmStoner@thedougcoSPECIAL THANKS TO...
  85. 85. QUESTIONS?
  86. 86. Dave OlsenProfessional TechnologistWest Virginia University@dmolsenTHANKS FOR LISTENING
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×