Movement

Integrating CMS mobile detection and CDN network

20 March 2012Pawel Cegielski

Most performance sensitive websites use a content delivery network (CDN) to ensure optimal coverage and deliver the best possible user experience.  Now, desktop browsers may still account for most of your traffic but you've probably noticed a rapidly rising number of mobile user agents over the last couple of months. Here, we understand that savvy web marketers and expert CMS users (or in other words, Cognifide clients) prefer to explicitly specify what type of content is displayed over mobile devices as they recognise the merit in keeping content consistent over mobile and desktop browsers alike, in addition to having a url strategy that allows for content to be properly shared across different media.

Recently, we had an interesting request from one of our clients - to use the built-in CMS mobile detection mechanism together with a CDN network to allow for caching of specific content for different user-agents. While it was a standard to use the Vary-Header to indicate different types of content for different user agents, it did not really allow content to be stored on the CDN as the cache key is always based on the URL hierarchy and not on the specific headers. So, the challenge was how you could force your CDN to work with different user-agent based content and still ensure best cached responses?  

Firstly, we need to ensure that we minimize the number of requests that comes to the origin server and then, tell the CDN network what kind of mobile or desktop device actually hits the CDN network. Of course, the easiest way to do this is to use a cookie based value that indicates user-agent group, for instance, we can split most devices into these groups: desktop, smart, touch, feature.

Preview content on Android touchphone using Adobe CQ5 Mobile module

Illustration: Preview content on an Android based touch phone using the Adobe CQ5 Mobile module

The first hit should always hit the origin server to get a valid cookie however all of the subsequent requests should be served from CDN network. To ensure a single URL solution, we decided to use ESI (Edge Side Includes) and include different URLs based on the cookie value.

We have implemented ESI with CMS so it produces ESI code instead of HTML content for those html files that does not include *.smart.*, *.touch.*, *.feature.* or *.desktop.* in the requested filename. A simple solution might be described by the graph below:

mobile_detection_cdn

This solution allows you to cache all of the files on the CDN cache however it requires you to by-pass the cache if the request does not contain a valid cookie or if the cookie value is incorrect. Advance Cache Logic setting logic can be defined as below:

off
0s

It allows you to deliver content from cache only if valid device-group is set otherwise it will bypass cache content to get cookie. Entire logic has to redirect back to the same URL so end-user  browser hits the CDN and process ESI code. As a part of ready to go solution you might consider to create specific ESI code to catch all of the bots and spiders. It can be easily implemented using ESI syntax and USER_AGENT directive.

Feedback on alternative methods is always appreciated and questions, if any are welcome!

Author: Pawel Cegielski
Published: 20 March 2012
Tags:
CMSmobileAdobeCQdevelopment
 

People in or team love to share their experience. Explore our blog

Job Opportunities

We're always looking for new faces to join the Cognifide family. Take a look at our available jobs.