Manuel Alvarez

Accelerating Single Page Apps and Mobile Apps

Blog Post created by Manuel Alvarez Employee on Jan 9, 2015

Originally posted at Accelerating Single Page Apps and Mobile Apps - The Akamai Blog


Single page apps and hybrid mobile apps share something in common: a rich semi-static wrapper that makes API calls for small objects, normally JSON. It is a performance oriented design pattern where large content is cached as close as possible to the client (Edge server, client cache, etc.) and non-cacheable content is small and can be compressed and minified.In this scenario, you might think that caching and acceleration from a classic CDN provider would be enough; however, apps require much more than that. Apps are complex ecosystem of data and presentation elements where the client situations (connectivity, geo location, device type etc.) and capabilities (HTML5 support, screen width, etc.) directly impact user experience.


I want to share some of the interesting implementations where you can leverage your CDN capabilities beyond caching and acceleration to improve customer experience and reduce infrastructure costs. The most obvious example of this is the use of a cloud compute provider or CDN to create alternative renderings of images in order to be more responsive to the end user in delivering the best image for the specific client device and browser (aka responsive images). Not so obvious ones include:


  1. Cache Authentication Response: Each API request tends to require authentication, which is most likely done by checking an authentication agent (via an HTTP request) before allowing the request to reach the origin. That presents performance and scaling challenges as every request becomes two (the first to authenticate, the second to return the request response). CDNs can cache the authentication response under a unique cache key for few seconds to offload the origin from having to re-authenticate a user that has already been authenticated.
  2. Authenticate at the Edge: Time sensitive tokens can be validated by the CDN server that is closest to the end-user. It will improve performance and offload you from this task. I recommend a hybrid approach where you share private API keys only with your trusted partners and cache the authentication response of other users as explained in #1.
  3. Small timeouts: Requests that seem to inexplicably "hang" are frustrating for clients who do not know what is happening and do not have any way to abort the call. Your CDN can reduce read and connection time outs to detect "hangs" and serve an expected response to the client.
  4. Fail-Action: The CDN can detect error responses or timeouts (hangs) and take actions such as retrying a different origin or serve a default error JSON that the app would understand.
  5. Smart balancing in the Cloud: CDNs can help balance traffic between datacenters and/or cloud origins (AWS, Azure, etc.). Performance-based load balancing routes traffic to the nearest geographical availability zone. In the event of a down datacenter, traffic can be routed to the next closest availability zone.
  6. Prefetching: If you have a high confidence in knowing what your customer will do next after reaching a certain point in the app, the app and CDN can prefetch the next step(s) so the client does not have to wait for the request roundtrip. For more details, you can view Colin Bendell's presentation at Velocity EU 2014 onRecycling the Web.
  7. Reduce Permutations: By reducing the number of cache keys (unique identifier of content in cache) permutations, you will increase the number of cache hits at the CDN. For instance, a weather app might over-partition its cache key by including client latitude, longitude, zip code, and other geo information in the cache key. It is more efficient to have a location ID in the cache key and use your CDN to translate geo information to the location ID. You can also use the translator mechanism when migrating to a newer version of your API. The translator will transform request from the old API to the new one based on the rules you define.
  8. Next Generation of Protocols: To maximize their value, CDNs must support the newer protocols such as HTTP 2.0 (also known as HTTP/2), SPDY, and IPv6. These protocols go beyond acceleration and caching to optimize requests at the protocol level. CDNs can interact with clients that support them over new protocols, while still supporting requests to back-end origin infrastructure that may not yet support these newer protocols, allowing you to leverage new technology without costly upgrades at your origin data center.

Many times apps are not created with the intention to be used with a CDN. The use cases cited above are examples of how you can make your life easier, increase performance and reduce cost - even if you haven't considered them while designing an app.


Finally, do not hesitate to engage an Akamai Professional Services team member to learn more about how we can help optimize the delivery of app.




Where the app "lives" - either in a browser or as a native app - is not relevant in this discussion. This blog is aimed at optimizing a client app's usage and requirements for network transactions.


This post does not discuss images that the app might request either. It is highly recommended that you consider delivering responsive images that adjust to client conditions (bandwidth, screen size, browser support for advanced image formats, etc.). Do take a look Akamai's capabilities in this area, particularly Adaptive Image Compression andImage Converter for options on image optimization.