Colin Bendell

RESS with ESI and Device Characteristics

Blog Post created by Colin Bendell Employee on Oct 22, 2014

TL;DR

  • Property Manager creates Device Characteristic variables for each attribute sent to the origin
  • ESI has access to these same variables
  • Using ESI you can move RESS logic to the Edge
  • Example:

<esi:choose>

    <esi:when test="$(EDC_F_IS_MOBILE) &amp; $(EDC_F_BRAND_NAME == 'Chrome')">

      <link href="mobile.css" type="text/css" />

      <script src="/utils/chrome.js" type="text/javascript"></script>

    </esi:when>

</esi:choose>


Intro

One of the best ways to maximize performance on RWD sites is to add server-side logic to remove or add components relevant to the display on a device. This technique is otherwise known as Responsive Web Design with Server Side Components (RESS). With very little effort you can accomplish this with Akamai’s Device Characteristics and setting cache key rules.

 

The shortcoming of using Device Characteristics for RESS is that you are ultimately creating ‘buckets’ of content - one for mobile, one for tablet, one for desktop. What if you wanted to make micro-decisions at a much more granular layer? There are many attributes available - but leveraging them will create more fragmentation in the cache and may not have the desired performance benefit.

 

Instead of making the decisions to include or exclude content at the server side, an alternative approach is to leverage ESI. This allows a single page to be sent and cached from the origin with many different permutations

 

ESI + Device Characteristcs

Edge Side Includes is a technology that has been around for many years and leveraged by many companies throughout the years. You can find documentation here and here.

 

One thing you won’t find, however is any mention of the EDC Variables. Interestingly, however, is that any variable created within the Akamai Property Manager configuration is also available to ESI as a variable. That is if you create the variable %(FOO) in the Akamai configuration (sometimes colloquially referred to as 'metadata')  you can reference this variable by name in ESI using the $(FOO) syntax. Variables are globally available within the ESI context.

 

With Akamai's Edge-Device-Characterization, Akamai will add a header called 'X-Akamai-Device-Characteristics' and populate it with one or more characteristics that are defined by the configuration. (See https://control.akamai.com/dl/EDC/DC-PM-QuickRef.pdf) For example, a sample header could be:

 

X-Akamai-Device-Characteristics:accept_third_party_cookie=true; ajax_preferred_geoloc_api=gears; ajax_support_javascript=true; brand_name=Google; cookie_support=true; device_id=samsung_nexus_s_ver1_subandroid33; device_os=Android; device_os_version=2.3; dual_orientation=true; flash_lite_version=3_1; full_flash_supprt=true; gif_animated=false; html_preferred_dtd=html4; is_tablet=false; is_wireless_device=true; jpg=true; marketing_name=Samsung Nexus S; max_image_height=400; max_image_width=320; mobile_browser=Android Webkit; mobile_browser_version=2.3; model_name=Nexus S; pdf_support=true; physical_screen_height=100; physical_screen_width=60; png=true; preferred_markup=html_web_4_0; resolution_height=800; resolution_width=480; viewport_initial_scale=1.0; viewport_width=device_width_token; xhtml_file_upload=supported; xhtml_preferred_charset=iso-8859-1; xhtml_support_level=4; xhtml_supports_iframe=full; xhtml_supports_table_for_layout=true; xhtml_table_support=true; xhtmlmp_preferred_mime_type=text/html

 

As you can see there are lots of different characteristics in the database. The most commonly used characteristics are documented here:

 

Under the covers, by default when you add each one of these facets to the X-Akamai-Device-Characteristics header, a new variable is automatically created to facilitate the population. For example,  for is_wireless facet there is a variable called 'EDC_F_IS_MOBILE'. The basic translation is to prepend with 'EDC_F_' and uppercase the field name.

 

 

If you are uncertain, use Property Manager’s ‘view XML’ feature and look for something like this:

<assign:extract-value>
<location>Device_Profile</location>
<location-id>is_tablet</location-id>
<variable-name>EDC_F_IS_TABLET</variable-name>
</assign:extract-value>

 

Example

This matches on the is_mobile and brand_name attribute and only emits the mobile.css and chrome.js only when those criteria are met. This allows you to have near infinite number of possibilities and allows you to tailor each output based on the situation.

<esi:choose>

    <esi:when test="$(EDC_F_IS_MOBILE) &amp; $(EDC_F_BRAND_NAME == 'Chrome')">

      <link href="mobile.css" type="text/css" />

      <script src="/utils/chrome.js" type="text/javascript"></script>

    </esi:when>

</esi:choose>

 

Beyond Device Characteristics

There are many other attributes you can leverage as well. Including Geo and Network. You could match on network type (eg: mobile network) or on Country code. The possibilities are endless!

 

PostScript Caveats

One caveat to point out, is that variables are not necessarily available across esi:includes. This depends on the processor chaining nature because the esi:include could be esi processed in a different thread prior to inclusion, or the inclusion can occur first and the output is esi processed. All this to say is that there are nuances when I refer to globally available variables that you need to think through

Outcomes