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

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

I'm Colin

I live in Canada.
Most people imagine Canada is like this

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.
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

demand, mobile devices and data collection. 7:1
Smartphones sold
to Humans born

1/3 of Mobile Traffic is from Mobile Devices
Source: KPCB Internet Trends, 2014

But recycling the Web for Mobile
Apps can be stinky for
performance

Lessons Learned (Clean Your Recyclables First)
• 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

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)

App Design Paradigms Encouraging Recycling
Traditional
Website
Single-Page
WebApp
mDot WebView Hybrid Native
RWD/RESS

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 …)

Do Mobile Apps
Make a Better Web?

Mobile App
Performance
(an honest conversation)

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

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

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

Lessons
Learned

1. Please don't
[connection cancel];

Initial Load (wifi): Requests

Initial Load: Connection View

Silly Human
Interactive Time

Schedule: Connection View

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);

~20%

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

2. Clean Messy
Infrastructure

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

TCP Window is not as stable as you think

Don't forget about retransmissions

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

3. Compressible
Content-Type

70-90%
Compression for text/*

Over 300 unique values!
Content-Types by Hits over 7 Days

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

Variations of Content-Types

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/*

demand, mobile devices and data collection. text/binary?!
If only there was a standard…
http://www.iana.org/assignments/media-types/media-types.xhtml

4. Stop
Redirects

Example 1: POST-302-200
302 Moved Temporarily
POST
GET
Example 2: Rogue Load Balancer Rule

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

5. Fragmented
Caches

Fragmented Cache
example.com/weather?lat=47.43&lon=19.27&langid=20
Same
Location
weather?lat…
302 Redirect
?location 42x cache hit rate

Fragmented Cache
Same
Location
weather?lat…
Edge
302 Redirect
weather?lat…
?location
42x cache hit rate; Reduced RTT

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

6. Prefetching
And PreProcessors

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

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

7. View v. Model APIs

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>

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

8. Others

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

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!

Thanks!
@ColinBendell

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

More Related Content

What's hot

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

Recently uploaded

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

Editor's Notes