mobile	  web	  performance@rolandguelle	  |	  Sevenval	  GmbH
about:sevenval•Web Expert since 1999Adaptive One Web Infrastructure TechnologyFuture Friendly web design expertiseHighl...
Why?
Who likes slow loading web sites betterthan fast ones?Why?
Why?Who likes slow loading web sites betterthan fast ones?...you should leave now ;)
The problem withThe Web on Mobile.Sevenval Device Lab / Android & iOS with Adobe Edge Inspect
The Web on Mobile.•Mobile is mainstream•Mobile will overtake is overtaking desktop•But mobile is different!
Mobile is Di!erent•Powerful browsers•CPU & GPU•Memory•Battery•Connections•Parallel downloads•Cellular vs. wifi•High latency
The Developers‘ Viewhttp://www.flickr.com/photos/nathij/3126806723• Browser & OS & Version fragmentation• -webkit- fragment...
What isPerformance?http://www.flickr.com/photos/laserstars/908946494•Latency for a single user•Capacity of the whole system...
Why Performancematters?http://www.flickr.com/photos/adamcrowe/2236109611
We ♥ Fast Websites!
What Users Want From Mobile?...62% agreed that speed wasthe most important feature forthem while browsing the mobile web,f...
http://www.webperformancetoday.com/2011/11/23/case-study-slow-page-load-mobile-business-metrics/Users Hate Slow Websites
May 29, 2008„When the company (Google) trimmed the120KB page size down by about 30percent, the company started getting abo...
•Shopzilla speed up average pageload time from 6 seconds to 1.2seconds.•Result: 12% increase in revenue.http://velocitycon...
Real World Checkhttp://www.flickr.com/photos/mumpfpuffel/2349081281
„The extent of consumer annoyance is hardlysurprising when we consider the average Britonestimates that they waste 9 minut...
We waste9 minutes a day, 2 days a year, 0.56% our livesfor waiting on slow websites?!
How fast is your site?•5 seconds•less than 5 seconds?•more than 5 seconds?
Germany Retail – Mobile – O2/iPhoneJuly 01, 2012 - August 01, 2012 / 0:00 - midnight18.9 sec?!Averagehttp://www.gomez.com/...
27.7 sec????Averagehttp://www.compuware.com/en_us/application-performance-management/resources/benchmarks/germanyretail-mo...
Sites are growinghttp://mobile.httparchive.org/trends.php#numurlshttp://httparchive.org/trends.php#numurls1466kBMobile: 76...
https://twitter.com/scottjehl/status/332871134934626306http://de.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth
39kB HTML150kB JavaScript526kB Images27kB CSShttp://mobile.httparchive.org/trends.php?s=All&minlabel=Jan+1+2013&maxlabel=J...
JavaScript FrameworksApple WWDC 2012 http://vaporjs.comDon‘t use jQuery for everything...
RWD will save us!
„...I used http://mediaqueri.es/ as a repository (471 websites) ... resized to one of 4 differentscreen resolutions each t...
D‘OH!
You can’t fix whatyou can’t measure.http://www.flickr.com/photos/tiffanyday/2929861461
Client Measuring•Client•Real Device•Simulator•User-Agent String•Test Instanz•Connection•Carrier Network•Rewriting Proxies•...
Tools•www.webpagetest.org•Google PageSpeed Insights•https://developers.google.com/speed/pagespeed/insights•Yahoo! YSlow•.....
WebPageTest.org•all waterfall charts are made with WPT•we use an private instance•Test types: 1st view vs repeat view•Scri...
UnderstandingWaterfall Charts•Server vs Client time•Time to first byte•# Connections•# HTTP-Requests•Dependencies (Critica...
Server vs. ClientWhere to optimize?
Server vs. ClientServer17%Client83%•Server 10-30%•Client 70-90%
Bottleneckshttp://www.flickr.com/photos/kino/438237794/
<outbreakname=“Making a MobileConnection“>
http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/http://www.research.att.com/articles/featured_stori...
Mobile NetworksDelayLimited connectionsOperatorNetworkLimited bandwithOperatorTranscoding?Internethttp://www.stevesouders....
Network Latencyhttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns1175/Cloud_Index_White_Paper.html...
</outbreak>
•Consider load & render dependencies•CSS loading/parsing blocks imageloading•inline JS/CSS blocks new externalrequests•Ima...
Time to First Byte•DNS Lookup + TCP Connection + SSLHandshake + HTTP Request + ServerProcessing + transfer of first TCP pa...
Connections•DNS lookup for every domain (andCNAMEs)•TCP handshake takes timeDNSTCP handshake
HTTP Requests•The biggest problem!•More requests, more connections•Total of 2-6 connections per domain•Each Request: Uploa...
CSS loading/parsing blocks image loadingCritical PathCSS Rendering
Critical PathImage/ressourceloading blocksdocument completefont blocksdocumentcomplete
Document Complete•document complete blocks onload-events•onload-events (may) block userinteraction•usually trigger for uno...
Bottlenecks•The mobile Web isslooooow•Connections hasdelays, are slow andlimited•Sites are too big•Too many requests /conn...
Fix it!http://www.flickr.com/photos/thomashawk/4927579251Software
Our Approachhttp://www.netmagazine.com/tutorials/getting-started-resshttp://slideshare.net/4nd3rsen/ress-responsive-design...
Measures
•Enable•keep-alive•compression (gzip) / excluding imagesMust-Have
E!ectw/o gzip w/ gzip 36%w/o keep-alive
•Image resizing•Image quality•Depend on network quality•Server Side Content Filter (Server SideMedia Queries)•HTML, JavaSc...
Browser Dependencies•<script async HTML5 attribute/>•Non blocking JS loader (RequireJS, LabJS,head.js, )•Order of inline &...
Reduce Content•JS minifying for inline & external code•CSS minifying for inline & external code•switch bitmap image format...
Reduce HTTP Requests• Inline images• Inline scripts• Inline styles• „JS pipe“
Inline Images Disabled25 of 38 requests
Inline Images Enabled3 of 16 requests
•must be <2k•must appear only once•works in src‘ed CSS, too! (Think sprites)•for all other images:•developer enables inlin...
Delayed Images•unblocks document onload•events trigger MUCH earlier•with fold-logic•„important“ images first•invisible sli...
Low Quality Previews•Large images get l/q previews•preview may be inlined•Big image is loaded after onload•Looks like prog...
•external scripts can be cached andcombined (good)•least size of script for each page (good)•many HTTP requests on first v...
External Scripts12 requests
JS „Pipe“ &Application Cache•All scripts are delivered in a single request perpage•Minimize HTTP roundtrips•Core Scripts a...
only 1 requestJS „Pipe“ &Application Cache
Caching•Assets are requsted on every page request•Make sure they are cacheable!First View
Caching•cache assets forever (+ cache buster)•/path/;lm=1332923272/layout.css•no sub-requests on repeat/flow viewsRepeat V...
<outbreakname=“HTTP Caching“>
Caching?http://mobile.httparchive.org/trends.php#maxageNullhttp://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-c...
Caching?http://mobile.httparchive.org/trends.php#maxageNullhttp://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-c...
D‘OH!
</outbreak>
SPDY•SPDY for SSL enabled by default•SPDY = „HTTP Super Pipelining“•We don‘t advertise SPDY for HTTP (itsslower)•Reduces T...
Even More?•Fast clicks on touch devices•Avoid 302 redirects•document.write
Resultshttp://www.flickr.com/photos/rosasay/4675053765
RWD* without FEODocument Complete: 11.838sBytes In: 1,634 KBRequests: 122Fully Loaded: 12.357sBytes In: 1,634 KBRequests: ...
Scaled Images & Filtered ContentDocument Complete: 2.732sBytes In: 285 KBRequests: 51Fully Loaded: 4.193sBytes In: 288 KBR...
Document Complete: 1.088sBytes In: 69 KBRequests: 7Fully Loaded: 3.552sBytes In: 269 KBRequests: 14ADVERTISING:This is the...
OverviewDocumentComplete11.838s 2.732s 1.088sBytes In 1,634KB 285KB 69KBRequests 122 51 7Fully Loaded 12.357s 4.193s 3.552...
http://www.flickr.com/photos/insouciance/3061759623/YES, THIS IS COOL!
Performance Killer•unscaled images•large inline scripts/styles•large CSS background images•Session = Cache-control: privat...
Takeawayshttp://www.flickr.com/photos/specialkrb/3375397148
Mindset•Performance is like diets:•Avoid Yo-yo effects!•Live performance every day!•Performance is mindset – not a feature...
Performance TriangleSecurityPerformanceEye-Candy2012 Sevenval, Credits to @ffilex
Performance TriangleSecurityPerformanceEye-Candy2012 Sevenval, Credits to @ffilex
Performance TriangleSecurityPerformanceEye-Candy= $ = $$$2012 Sevenval, Credits to @ffilex
Thank You!@rolandguelle
Upcoming SlideShare
Loading in …5
×

Mobile web performance dwx13

1,351 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,351
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile web performance dwx13

  1. 1. mobile  web  performance@rolandguelle  |  Sevenval  GmbH
  2. 2. about:sevenval•Web Expert since 1999Adaptive One Web Infrastructure TechnologyFuture Friendly web design expertiseHighly experienced: over 800 accomplished projects•Offices in Cologne, Berlin, London and Vienna•Our Clients: Fortune 500 and DAX companies•Our Partner: PayPal, Interone, GSI Commerce, CoreMedia,Wincor Nixdorf, T-Systems, etc.
  3. 3. Why?
  4. 4. Who likes slow loading web sites betterthan fast ones?Why?
  5. 5. Why?Who likes slow loading web sites betterthan fast ones?...you should leave now ;)
  6. 6. The problem withThe Web on Mobile.Sevenval Device Lab / Android & iOS with Adobe Edge Inspect
  7. 7. The Web on Mobile.•Mobile is mainstream•Mobile will overtake is overtaking desktop•But mobile is different!
  8. 8. Mobile is Di!erent•Powerful browsers•CPU & GPU•Memory•Battery•Connections•Parallel downloads•Cellular vs. wifi•High latency
  9. 9. The Developers‘ Viewhttp://www.flickr.com/photos/nathij/3126806723• Browser & OS & Version fragmentation• -webkit- fragmentation• HTML5 fragmentation• Thousands of devices• Transcoding browsers (Opera Mini, AmazonSilk, Nokia Express, ...)• Carrier transcoding• Upcoming Platforms (Firefox OS, Ubuntu,Tizen, BB10...)• Legacy Platforms (Symbian, Bada,BlackBerry, ...)• ...make it work!
  10. 10. What isPerformance?http://www.flickr.com/photos/laserstars/908946494•Latency for a single user•Capacity of the whole system•We are talking about latency here
  11. 11. Why Performancematters?http://www.flickr.com/photos/adamcrowe/2236109611
  12. 12. We ♥ Fast Websites!
  13. 13. What Users Want From Mobile?...62% agreed that speed wasthe most important feature forthem while browsing the mobile web,followed by ease of use (42%), morefunctionality (30%) and saving moneyand data (29%).http://business.opera.com/press/releases/mobile/brazil-feels-the-need-for-speed
  14. 14. http://www.webperformancetoday.com/2011/11/23/case-study-slow-page-load-mobile-business-metrics/Users Hate Slow Websites
  15. 15. May 29, 2008„When the company (Google) trimmed the120KB page size down by about 30percent, the company started getting about30 percent more map requests.“http://news.cnet.com/8301-10784_3-9954972-7.html
  16. 16. •Shopzilla speed up average pageload time from 6 seconds to 1.2seconds.•Result: 12% increase in revenue.http://velocityconf.com/velocity2009/public/schedule/detail/7709Your Boss ♥ Fast Websites
  17. 17. Real World Checkhttp://www.flickr.com/photos/mumpfpuffel/2349081281
  18. 18. „The extent of consumer annoyance is hardlysurprising when we consider the average Britonestimates that they waste 9 minutes every day,or 2 days a year, waiting for slowwebsites to load.“http://press.1and1.co.uk/xml/article?article_id=1123http://www.flickr.com/photos/donkeyhotey/5679642883/
  19. 19. We waste9 minutes a day, 2 days a year, 0.56% our livesfor waiting on slow websites?!
  20. 20. How fast is your site?•5 seconds•less than 5 seconds?•more than 5 seconds?
  21. 21. Germany Retail – Mobile – O2/iPhoneJuly 01, 2012 - August 01, 2012 / 0:00 - midnight18.9 sec?!Averagehttp://www.gomez.com/germany-retail-mobile
  22. 22. 27.7 sec????Averagehttp://www.compuware.com/en_us/application-performance-management/resources/benchmarks/germanyretail-mobile-o2-iphoneDERETIRMBHPiPhone010.htmlGermany Retail – Mobile – O2/iPhoneMay 01, 2013 - June 01, 2012 / 0:00 - midnight
  23. 23. Sites are growinghttp://mobile.httparchive.org/trends.php#numurlshttp://httparchive.org/trends.php#numurls1466kBMobile: 764kB
  24. 24. https://twitter.com/scottjehl/status/332871134934626306http://de.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth
  25. 25. 39kB HTML150kB JavaScript526kB Images27kB CSShttp://mobile.httparchive.org/trends.php?s=All&minlabel=Jan+1+2013&maxlabel=Jun+15+2013#bytesHtml&reqHtml
  26. 26. JavaScript FrameworksApple WWDC 2012 http://vaporjs.comDon‘t use jQuery for everything...
  27. 27. RWD will save us!
  28. 28. „...I used http://mediaqueri.es/ as a repository (471 websites) ... resized to one of 4 differentscreen resolutions each time ... less than 7% of websites were at least2x smaller when loaded on the smallest screen compared tothe biggest screen. Another 22% weighed between 50-90%of the large-screen page size when loaded on the smallest one,and the majority (72%) were roughly the samesize on the smallest and biggest screens.http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
  29. 29. D‘OH!
  30. 30. You can’t fix whatyou can’t measure.http://www.flickr.com/photos/tiffanyday/2929861461
  31. 31. Client Measuring•Client•Real Device•Simulator•User-Agent String•Test Instanz•Connection•Carrier Network•Rewriting Proxies•WiFi•Bandwith
  32. 32. Tools•www.webpagetest.org•Google PageSpeed Insights•https://developers.google.com/speed/pagespeed/insights•Yahoo! YSlow•.. and thousands more out in the web –find ‘em, use ‘em!http://slideshare.net/klick_ass/mobile-web-testing-debugging-best-practices
  33. 33. WebPageTest.org•all waterfall charts are made with WPT•we use an private instance•Test types: 1st view vs repeat view•Script user navigation with flow views
  34. 34. UnderstandingWaterfall Charts•Server vs Client time•Time to first byte•# Connections•# HTTP-Requests•Dependencies (Critical Path)•# Domains/Origins•Document Complete
  35. 35. Server vs. ClientWhere to optimize?
  36. 36. Server vs. ClientServer17%Client83%•Server 10-30%•Client 70-90%
  37. 37. Bottleneckshttp://www.flickr.com/photos/kino/438237794/
  38. 38. <outbreakname=“Making a MobileConnection“>
  39. 39. http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficientRadio Connections2 sec delay 1.5 sec delay
  40. 40. Mobile NetworksDelayLimited connectionsOperatorNetworkLimited bandwithOperatorTranscoding?Internethttp://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient
  41. 41. Network Latencyhttp://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns1175/Cloud_Index_White_Paper.htmlhttp://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/DSL without Fastpath:40-50ms~ 350ms
  42. 42. </outbreak>
  43. 43. •Consider load & render dependencies•CSS loading/parsing blocks imageloading•inline JS/CSS blocks new externalrequests•Image/ressource loading blocksdocument completeCritical Path
  44. 44. Time to First Byte•DNS Lookup + TCP Connection + SSLHandshake + HTTP Request + ServerProcessing + transfer of first TCP packet•Always critical path
  45. 45. Connections•DNS lookup for every domain (andCNAMEs)•TCP handshake takes timeDNSTCP handshake
  46. 46. HTTP Requests•The biggest problem!•More requests, more connections•Total of 2-6 connections per domain•Each Request: Upload on slow connections•Size does matter: More content, longerdownloads•Mobile specific: Download on sloooowconnections
  47. 47. CSS loading/parsing blocks image loadingCritical PathCSS Rendering
  48. 48. Critical PathImage/ressourceloading blocksdocument completefont blocksdocumentcomplete
  49. 49. Document Complete•document complete blocks onload-events•onload-events (may) block userinteraction•usually trigger for unobtrusive JavaScript
  50. 50. Bottlenecks•The mobile Web isslooooow•Connections hasdelays, are slow andlimited•Sites are too big•Too many requests /connections needed•Critical Path consider load& render dependencies•css blocks images•image blocks documentcomplete•blocking JS•rendering / painting•DOM manipulation =rerendering
  51. 51. Fix it!http://www.flickr.com/photos/thomashawk/4927579251Software
  52. 52. Our Approachhttp://www.netmagazine.com/tutorials/getting-started-resshttp://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972
  53. 53. Measures
  54. 54. •Enable•keep-alive•compression (gzip) / excluding imagesMust-Have
  55. 55. E!ectw/o gzip w/ gzip 36%w/o keep-alive
  56. 56. •Image resizing•Image quality•Depend on network quality•Server Side Content Filter (Server SideMedia Queries)•HTML, JavaScript & CSSReduce Transfer Size
  57. 57. Browser Dependencies•<script async HTML5 attribute/>•Non blocking JS loader (RequireJS, LabJS,head.js, )•Order of inline & extern scriptshttp://www.netmagazine.com/features/essential-javascript-top-five-script-loaders
  58. 58. Reduce Content•JS minifying for inline & external code•CSS minifying for inline & external code•switch bitmap image formats (GIF -> JPG)•JPEGs performs better than GIFs and PNGs
  59. 59. Reduce HTTP Requests• Inline images• Inline scripts• Inline styles• „JS pipe“
  60. 60. Inline Images Disabled25 of 38 requests
  61. 61. Inline Images Enabled3 of 16 requests
  62. 62. •must be <2k•must appear only once•works in src‘ed CSS, too! (Think sprites)•for all other images:•developer enables inliningAutoinline Images
  63. 63. Delayed Images•unblocks document onload•events trigger MUCH earlier•with fold-logic•„important“ images first•invisible slider images last•header first, footer last..
  64. 64. Low Quality Previews•Large images get l/q previews•preview may be inlined•Big image is loaded after onload•Looks like progressive images•Gives a complete look right from the start
  65. 65. •external scripts can be cached andcombined (good)•least size of script for each page (good)•many HTTP requests on first view (BAD)External Scripts
  66. 66. External Scripts12 requests
  67. 67. JS „Pipe“ &Application Cache•All scripts are delivered in a single request perpage•Minimize HTTP roundtrips•Core Scripts are stored in Application Cache•Not affected by „reload“•Scripts still public cacheable (CDN)
  68. 68. only 1 requestJS „Pipe“ &Application Cache
  69. 69. Caching•Assets are requsted on every page request•Make sure they are cacheable!First View
  70. 70. Caching•cache assets forever (+ cache buster)•/path/;lm=1332923272/layout.css•no sub-requests on repeat/flow viewsRepeat View
  71. 71. <outbreakname=“HTTP Caching“>
  72. 72. Caching?http://mobile.httparchive.org/trends.php#maxageNullhttp://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/
  73. 73. Caching?http://mobile.httparchive.org/trends.php#maxageNullhttp://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/•55% of resources don’t specify a max-age value•46% of the resources without any max-ageremained unchanged over a 2 week period
  74. 74. D‘OH!
  75. 75. </outbreak>
  76. 76. SPDY•SPDY for SSL enabled by default•SPDY = „HTTP Super Pipelining“•We don‘t advertise SPDY for HTTP (itsslower)•Reduces TCP connections, roundtrips,slow startshttp://research.microsoft.com/pubs/170059/A%20comparison%20of%20SPDY%20and%20HTTP%20performance.pdf
  77. 77. Even More?•Fast clicks on touch devices•Avoid 302 redirects•document.write
  78. 78. Resultshttp://www.flickr.com/photos/rosasay/4675053765
  79. 79. RWD* without FEODocument Complete: 11.838sBytes In: 1,634 KBRequests: 122Fully Loaded: 12.357sBytes In: 1,634 KBRequests: 126*added to an existing desktop site
  80. 80. Scaled Images & Filtered ContentDocument Complete: 2.732sBytes In: 285 KBRequests: 51Fully Loaded: 4.193sBytes In: 288 KBRequests: 53
  81. 81. Document Complete: 1.088sBytes In: 69 KBRequests: 7Fully Loaded: 3.552sBytes In: 269 KBRequests: 14ADVERTISING:This is the standard result bySevenval FIT Version 12.0.2.Scaled Images, Filtered Content & FEO
  82. 82. OverviewDocumentComplete11.838s 2.732s 1.088sBytes In 1,634KB 285KB 69KBRequests 122 51 7Fully Loaded 12.357s 4.193s 3.552sBytes In 1,634KB 288KB 269KBRequests 126 53 14loadEvent 11.806s 2.696s 0.862sRWD RESS RESS + FEOpoor
  83. 83. http://www.flickr.com/photos/insouciance/3061759623/YES, THIS IS COOL!
  84. 84. Performance Killer•unscaled images•large inline scripts/styles•large CSS background images•Session = Cache-control: private•3rd Party JavaScript (twitter, fb, Ads, tracking, ...)•SLOW SERVERS!
  85. 85. Takeawayshttp://www.flickr.com/photos/specialkrb/3375397148
  86. 86. Mindset•Performance is like diets:•Avoid Yo-yo effects!•Live performance every day!•Performance is mindset – not a feature•Consider performance from day 0•Performance is hard to apply „at the end“
  87. 87. Performance TriangleSecurityPerformanceEye-Candy2012 Sevenval, Credits to @ffilex
  88. 88. Performance TriangleSecurityPerformanceEye-Candy2012 Sevenval, Credits to @ffilex
  89. 89. Performance TriangleSecurityPerformanceEye-Candy= $ = $$$2012 Sevenval, Credits to @ffilex
  90. 90. Thank You!@rolandguelle

×