Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
With 7.1 billion humans, 
we need more recycling 
Avoid data theft and downtime by extending the 
security perimeter outsi...
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
Avoid data theft and downtime by extending the 
security perimeter outside the data-center and 
protect from increasing fr...
But recycling the Web for Mobile 
Apps can be stinky for 
performance 
Grow revenue opportunities with fast, personalized ...
Lessons Learned (Clean Your Recyclables First) 
Avoid data theft and downtime by extending the 
security perimeter outside...
©2014 AKAMAI | FASTER FORWARDTM 
Why do we Recycle Content for Mobile Apps? 
• Accelerate time to market 
• Code & service...
Avoid data theft and downtime by extending the 
security perimeter outside the data-center and 
protect from increasing fr...
©2014 AKAMAI | FASTER FORWARDTM 
What Kinds of Content are we Recycling? 
• Images, Video, Audio 
• Beacons 
• Formal APIs...
Do Mobile Apps 
Make a Better Web? 
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
©2014 AKAMAI | FASTER FORWARDTM 
Mobile App 
Performance 
(an honest conversation)
©2014 AKAMAI | FASTER FORWARDTM 
Mobile App Performance Monitoring is Hard 
• No OS standard for performance data collecti...
©2014 AKAMAI | FASTER FORWARDTM 
Mobile Apps Have Man More Important Metrics 
• Time to transform api to user widgets 
• U...
©2014 AKAMAI | FASTER FORWARDTM 
We've Learned from Browsers and the Web 
• The Network is painful 
• Round trips are pain...
©2014 AKAMAI | FASTER FORWARDTM 
Lessons 
Learned
©2014 AKAMAI | FASTER FORWARDTM 
1. Please don't 
[connection cancel];
Avoid data theft and downtime by extending the 
security perimeter outside the data-center and 
protect from increasing fr...
Initial Load: Connection View 
Avoid data theft and downtime by extending the 
security perimeter outside the data-center ...
Silly Human 
Interactive Time 
Avoid data theft and downtime by extending the 
security perimeter outside the data-center ...
Avoid data theft and downtime by extending the 
security perimeter outside the data-center and 
protect from increasing fr...
©2014 AKAMAI | FASTER FORWARDTM 
App Connection Pools are Managed by the OS 
Connections per Host Max Connections 
<7 6 15...
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
©2014 AKAMAI | FASTER FORWARDTM 
Connection Pools can be controlled by the App 
• Don't [connection cancel] or 
finally {u...
©2014 AKAMAI | FASTER FORWARDTM 
2. Clean Messy 
Infrastructure
©2014 AKAMAI | FASTER FORWARDTM 
Mobile API: HTTP Overhead for each request 
Request Size: 1,109 bytes 
Response Size: 3,7...
©2014 AKAMAI | FASTER FORWARDTM 
TCP Window is not as stable as you think
©2014 AKAMAI | FASTER FORWARDTM 
Don't forget about retransmissions
©2014 AKAMAI | FASTER FORWARDTM 
Take Action 
• Watch for "Packet Eaters" 
• Superfluous Headers like CORS (X-Frame-Option...
3. Compressible 
Content-Type 
©2014 AKAMAI | FASTER FORWARDTM
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
Over 300 unique values! 
©2014 AKAMAI | FASTER FORWARDTM 
Content-Types by Hits over 7 Days
©2014 AKAMAI | FASTER FORWARDTM 
HTML v. API (Hits) … but what is JSON? 
application/json 
application/javascript 
text/ja...
Avoid data theft and downtime by extending the 
security perimeter outside the data-center and 
protect from increasing fr...
©2014 AKAMAI | FASTER FORWARDTM 
And what about these? 
application/octet-stream 
application/binary 
application/x-compre...
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
©2014 AKAMAI | FASTER FORWARDTM 
4. Stop 
Redirects
Example 1: POST-302-200 
Avoid data theft and downtime by extending the 
security perimeter outside the data-center and 
p...
©2014 AKAMAI | FASTER FORWARDTM 
302 Moved Temporarily 
• 302 Redirects are likely used to: 
• Prime workflow and session ...
©2014 AKAMAI | FASTER FORWARDTM 
5. Fragmented 
Caches
©2014 AKAMAI | FASTER FORWARDTM 
Fragmented Cache 
example.com/weather?lat=47.43&lon=19.27&langid=20 
example.com/weather?...
©2014 AKAMAI | FASTER FORWARDTM 
Fragmented Cache 
example.com/weather?lat=47.43&lon=19.27&langid=20 
example.com/weather?...
©2014 AKAMAI | FASTER FORWARDTM 
Recommendations 
• Do all the usual caching best practices 
• Seriously. 
• Do all the us...
©2014 AKAMAI | FASTER FORWARDTM 
6. Prefetching 
And PreProcessors
©2014 AKAMAI | FASTER FORWARDTM 
Images and api commands in json payload 
{"audioOnly":false,"bias":"0.9,0,0.1","breadCrum...
©2014 AKAMAI | FASTER FORWARDTM 
Images and api commands in json payload 
{"audioOnly":false,"bias":"0.9,0,0.1","breadCrum...
©2014 AKAMAI | FASTER FORWARDTM 
Browsers 
• Browsers try to predict what is coming next 
<img src="logo.jpg" ...> 
<link ...
©2014 AKAMAI | FASTER FORWARDTM
7. View v. Model APIs 
©2014 AKAMAI | FASTER FORWARDTM
©2014 AKAMAI | FASTER FORWARDTM 
Merge API Calls into a Single Request 
<units> 
<temp>F</temp> 
<dist>mf</dist> 
<speed>m...
©2014 AKAMAI | FASTER FORWARDTM 
API Aggregation 
• Good SOA taught us to fragment out our Services; 
• Fragmented service...
©2014 AKAMAI | FASTER FORWARDTM 
8. Others
©2014 AKAMAI | FASTER FORWARDTM 
Other Best Practices 
• 500/404 error page sizes 
• CaptivePortals intercepting your API ...
©2014 AKAMAI | FASTER FORWARDTM 
Summary 
• HTTP/2 for Header compression & conn. Optimization 
• Scrutinize your Infrastr...
Grow revenue opportunities with fast, personalized 
web experiences and manage complexity from peak 
demand, mobile device...
Upcoming SlideShare
Loading in …5
×

Velocity EU 2014: Recycling the Web (why it's slowing your mobile app)

1,713 views

Published on

If you are building a mobile app or hybrid responsive app you are probably thinking deeply about reusing components and data APIs from your web site. In this talk we will explore some common pitfalls in using web components & web APIs in mobile apps. We will look at the impact on operations, network performance, scalability and reliability - and how to overcome these challenges.

Published in: Technology
  • Be the first to comment

Velocity EU 2014: Recycling the Web (why it's slowing your mobile app)

  1. 1. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM Recycling the Web (why it's slowing your mobile app) @ColinBendell
  2. 2. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM I'm Colin
  3. 3. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM I live in Canada. Most people imagine Canada is like this
  4. 4. With 7.1 billion humans, we need more recycling Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM But it's not all Postcards 1,031 Kg of waste / person (G17 Avg: 578 Kg) Additional 257 Kg recycled / person Canadian landfills produce 20% of Canada's methane
  5. 5. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. 7:1 ©2014 AKAMAI | FASTER FORWARDTM Smartphones sold to Humans born
  6. 6. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM 1/3 of Mobile Traffic is from Mobile Devices Source: KPCB Internet Trends, 2014
  7. 7. But recycling the Web for Mobile Apps can be stinky for performance Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  8. 8. Lessons Learned (Clean Your Recyclables First) Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM • Connection Pools • Infrastructure • Cookies • Content Type • Caching • POST-302-200 redirect • Deadly ?_=123552416 • 404 error pages • Support Prefetch & Preparsers • API Fragmentation • Stateful v. Sateless (and Client, Edge and Server MVC) • Authorization
  9. 9. ©2014 AKAMAI | FASTER FORWARDTM Why do we Recycle Content for Mobile Apps? • Accelerate time to market • Code & service reuse (SOA baby!) • Operational simplicity • Focus on the important parts; reuse the rest • To meet deadlines • Reduce Risk • Content/service is managed elsewhere • Too complex (fragile) to fork • Technology black box (ATG, SAP)
  10. 10. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM App Design Paradigms Encouraging Recycling Traditional Website Single-Page WebApp mDot WebView Hybrid Native RWD/RESS
  11. 11. ©2014 AKAMAI | FASTER FORWARDTM What Kinds of Content are we Recycling? • Images, Video, Audio • Beacons • Formal APIs (MVC) • Informal APIs • HTML pages (in whole or in part) • Infrastructure (CDN, WAF, IDS, SIEM, App Server, DB …)
  12. 12. Do Mobile Apps Make a Better Web? ©2014 AKAMAI | FASTER FORWARDTM
  13. 13. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  14. 14. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM
  15. 15. ©2014 AKAMAI | FASTER FORWARDTM Mobile App Performance (an honest conversation)
  16. 16. ©2014 AKAMAI | FASTER FORWARDTM Mobile App Performance Monitoring is Hard • No OS standard for performance data collection • All APM solutions leverage custom beacons • Many emerging with SDKs to help • Mobile app perf. monitoring is where browser RUM was 7 years ago
  17. 17. ©2014 AKAMAI | FASTER FORWARDTM Mobile Apps Have Man More Important Metrics • Time to transform api to user widgets • Usage time (with and without network) • Number of times the app is used • Signal strength, gps quality, battery life over time • Top interactions in the app • Number of failed attempts to load content • Number of message retries • Completed v. incomplete transactions • etc
  18. 18. ©2014 AKAMAI | FASTER FORWARDTM We've Learned from Browsers and the Web • The Network is painful • Round trips are painful • Reduce the number of requests • Reduce the size of requests • Utilize the network asynchronously • Reduce processor load
  19. 19. ©2014 AKAMAI | FASTER FORWARDTM Lessons Learned
  20. 20. ©2014 AKAMAI | FASTER FORWARDTM 1. Please don't [connection cancel];
  21. 21. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Initial Load (wifi): Requests
  22. 22. Initial Load: Connection View Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM
  23. 23. Silly Human Interactive Time Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM
  24. 24. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Schedule: Connection View
  25. 25. ©2014 AKAMAI | FASTER FORWARDTM App Connection Pools are Managed by the OS Connections per Host Max Connections <7 6 15 7+ 4 15 2.2 4 4 2.3 8 10 3.1+ 6 35 android/app/mobile.js:pref("network.http.max-connections", 6);
  26. 26. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ~20% ©2014 AKAMAI | FASTER FORWARDTM
  27. 27. ©2014 AKAMAI | FASTER FORWARDTM Connection Pools can be controlled by the App • Don't [connection cancel] or finally {urlConnection.disconnect();} • Make API calls strategically • Use local cache for queued or slow requests • Use a HTTP/2 (or SPDY) library until the OS adds support (you control both client and server!) • Out of sequence parallel connections can cause unnecessary cookie overhead
  28. 28. ©2014 AKAMAI | FASTER FORWARDTM 2. Clean Messy Infrastructure
  29. 29. ©2014 AKAMAI | FASTER FORWARDTM Mobile API: HTTP Overhead for each request Request Size: 1,109 bytes Response Size: 3,766 bytes Response Payload: 75 bytes Set-Cookie overhead: 1928 bytes
  30. 30. ©2014 AKAMAI | FASTER FORWARDTM TCP Window is not as stable as you think
  31. 31. ©2014 AKAMAI | FASTER FORWARDTM Don't forget about retransmissions
  32. 32. ©2014 AKAMAI | FASTER FORWARDTM Take Action • Watch for "Packet Eaters" • Superfluous Headers like CORS (X-Frame-Options and their ilk) • Repeated Set-Cookies from load balancers and session handlers • Know the impact on your Environment: Load Balancers, IDS, ADC, etc • Know which systems that assume request ordering • Use HTTP/2, SPDY and even SHUTR
  33. 33. 3. Compressible Content-Type ©2014 AKAMAI | FASTER FORWARDTM
  34. 34. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM 70-90% Compression for text/*
  35. 35. Over 300 unique values! ©2014 AKAMAI | FASTER FORWARDTM Content-Types by Hits over 7 Days
  36. 36. ©2014 AKAMAI | FASTER FORWARDTM HTML v. API (Hits) … but what is JSON? application/json application/javascript text/javascript text/json text/x-json text/x-js Application/js text/js application/x-json application/vnd.XXXX+json application/vnd.wap.xhtml+xml text/javascript+json application/json%2C application/javascript%2Capplication/x-javascript%2Ctext/ application/vnd.XXXX.ent.suggestions+json application/javascript%2Capplication/x-javascript application/JSON application/unified-detail+json application/vnd.radio-XXXX.neuro+json application/vnd.XXXX.match3.canvas.session.v1+json text/JavaScript application/x+javascript Application/javascript text/x-javascript application/com.XXXX.search.process.farelist+json application/jsonp application/vnd.XXX.dm.app-configs+json
  37. 37. Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM Variations of Content-Types
  38. 38. ©2014 AKAMAI | FASTER FORWARDTM And what about these? application/octet-stream application/binary application/x-compress application/unknown text/cache-manifest text/HTML application/x-octet-stream text/text text/xml%2Capplication/xml image/jpeg%2Cimage/jpeg text/css%2Ctext/css text/html%2C image/*
  39. 39. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. text/binary?! ©2014 AKAMAI | FASTER FORWARDTM If only there was a standard… http://www.iana.org/assignments/media-types/media-types.xhtml
  40. 40. ©2014 AKAMAI | FASTER FORWARDTM 4. Stop Redirects
  41. 41. Example 1: POST-302-200 Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. ©2014 AKAMAI | FASTER FORWARDTM 302 Moved Temporarily POST GET Example 2: Rogue Load Balancer Rule
  42. 42. ©2014 AKAMAI | FASTER FORWARDTM 302 Moved Temporarily • 302 Redirects are likely used to: • Prime workflow and session objects on server side • Evaluate cookies • Execute business logic processing • Fixes browser 'refresh' problem (Fix the back button) • For XHR & Mobile Apps this just wastes time
  43. 43. ©2014 AKAMAI | FASTER FORWARDTM 5. Fragmented Caches
  44. 44. ©2014 AKAMAI | FASTER FORWARDTM Fragmented Cache example.com/weather?lat=47.43&lon=19.27&langid=20 example.com/weather?lat=47.43&lon=19.28&langid=20 example.com/weather?lat=47.43&lon=19.29&langid=20 example.com/weather?lat=47.43&lon=19.30&langid=20 Same Location weather?lat… 302 Redirect ?location 42x cache hit rate
  45. 45. ©2014 AKAMAI | FASTER FORWARDTM Fragmented Cache example.com/weather?lat=47.43&lon=19.27&langid=20 example.com/weather?lat=47.43&lon=19.28&langid=20 example.com/weather?lat=47.43&lon=19.29&langid=20 example.com/weather?lat=47.43&lon=19.30&langid=20 Same Location weather?lat… Edge 302 Redirect weather?lat… ?location 42x cache hit rate; Reduced RTT
  46. 46. ©2014 AKAMAI | FASTER FORWARDTM Recommendations • Do all the usual caching best practices • Seriously. • Do all the usual caching best practices (Cache-Control, Etags, 304, deterministic urls) • Max-Age: 30s ~= RealTime
  47. 47. ©2014 AKAMAI | FASTER FORWARDTM 6. Prefetching And PreProcessors
  48. 48. ©2014 AKAMAI | FASTER FORWARDTM Images and api commands in json payload {"audioOnly":false,"bias":"0.9,0,0.1","breadCrumb":"C197aTan ullA16SA0AInullETnaVnAPsl0LAbmU0D1118044605MnOn:0SSf","cvTer mIds":[818249],"errorCode":0,"krAdjustmentInfo":"No KR Curation","lookAhead":20,"meritMixID":1,"oKey":1395206487,"p age":2,"resultCount":100,"results":[{"id":23505412,"editorsP ick":0,"title":"LEGO figure heads","type":"photo","url":{"page":"http://www.istockphot o.com/photo/lego-figure-heads- 23505412","thumb":"http://i.istockimg.com/file_thumbview_ approve/23505412/1/stock-photo-23505412-lego-figure-heads. jpg","thumb_large":"http://i.istockimg.com/file_thu mbview_approve/23505412/3/stock-photo-23505412-lego-figure-heads. jpg","preview":"http://i.istockimg.com/file_thumbvi
  49. 49. ©2014 AKAMAI | FASTER FORWARDTM Images and api commands in json payload {"audioOnly":false,"bias":"0.9,0,0.1","breadCrumb":"C197aTan ullA16SA0AInullETnaVnAPsl0LAbmU0D1118044605MnOn:0SSf","cvTer mIds":[818249],"errorCode":0,"krAdjustmentInfo":"No KR Curation","lookAhead":20,"meritMixID":1,"oKey":1395206487,"p age":2,"resultCount":100,"results":[{"id":23505412,"editorsP ick":0,"title":"LEGO figure heads","type":"photo","url":{"page":"http://www.istockphot o.com/photo/lego-figure-heads- 23505412","thumb":"http://i.istockimg.com/file_thumbview_ approve/23505412/1/stock-photo-23505412-lego-figure-heads. jpg","thumb_large":"http://i.istockimg.com/file_thu mbview_approve/23505412/3/stock-photo-23505412-lego-figure-heads. jpg","preview":"http://i.istockimg.com/file_thumbvi
  50. 50. ©2014 AKAMAI | FASTER FORWARDTM Browsers • Browsers try to predict what is coming next <img src="logo.jpg" ...> <link rel="prefetch" ...> • JSON hides from the Browser PreProcessor • Native Apps = roll your own PreProcessor • CDN can help, also needs queues
  51. 51. ©2014 AKAMAI | FASTER FORWARDTM
  52. 52. 7. View v. Model APIs ©2014 AKAMAI | FASTER FORWARDTM
  53. 53. ©2014 AKAMAI | FASTER FORWARDTM Merge API Calls into a Single Request <units> <temp>F</temp> <dist>mf</dist> <speed>mph</speed> </units> <planets> <sun rise="5:56 AM" set="7:32 PM"/> <moon rise="8/28/2014 8:45:00 AM" set="8/28/2014 8:30:00 PM"/> <mercury rise="5:28 AM" set="6:09 PM"/> <venus rise="2:29 AM" set="5:03 PM"/> <mars rise="10:45 AM" set="8:01 PM"/> <jupiter rise="1:37 AM" set="4:34 PM"/> <saturn rise="10:26 AM" set="8:18 PM"/> <uranus rise="6:49 PM" set="7:47 AM"/> <neptune rise="5:31 PM" set="4:11 AM"/> <pluto rise="2:36 PM" set="11:35 PM"/> </planets>
  54. 54. ©2014 AKAMAI | FASTER FORWARDTM API Aggregation • Good SOA taught us to fragment out our Services; • Fragmented services has negative impact on the network • Use the View layer to aggregate API calls • ESI can be used to merge API calls at the edge
  55. 55. ©2014 AKAMAI | FASTER FORWARDTM 8. Others
  56. 56. ©2014 AKAMAI | FASTER FORWARDTM Other Best Practices • 500/404 error page sizes • CaptivePortals intercepting your API calls • API Design patterns: • Pagination & Search results with multiple Etag values • Avoid Statefull requests to reduce session round trips • Authorization & Authentication • Bonus: $.ajaxSetup({cache:false}) and the deadly ?_=123552416
  57. 57. ©2014 AKAMAI | FASTER FORWARDTM Summary • HTTP/2 for Header compression & conn. Optimization • Scrutinize your Infrastructure for packet-eaters • Use Caching best practices • Assemble view API responses at the Edge (ESI) • Build Prefetching support • More work needs to be done!
  58. 58. Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. ©2014 AKAMAI | FASTER FORWARDTM Thanks! @ColinBendell

×