Edge 2016 pages that pop through layered cache techniques

Pages That Pop, Through Layered Cache Techniques

© AKAMAI - EDGE 2016

Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.

Speed Matters

Akamai 101: CachingAkamai 201: Fast Purge, AJAX Fill-In, ESI, URL SpaceAkamai 301: Vary/Key, Edge-Control, PUSH, WebSockets


Caching Fundamentals

Edge closest to end-user

Edge closest to origin

Akamai Intelligent Platform


Organizing Content for Cacheability

● Personalization● Freshness


Organizing Content for Cacheability

● Personalization● Freshness


Freshness -- Frequency of Change

Zero -- Long TTL

Random, Not Urgent -- Medium TTL

Frequent -- Short TTL or no-store

Periodic -- Countdown TTL

Random, Urgent -- Same as Frequent, or Long TTL + Fast Purge NEW!

Bursty -- Same as Frequent, or Long TTL + Fast PurgeNEW!


How to Think About Fast Purge

Hold-til-Told


Personalization Separation


Base Page

AJAX Fill-In

CSS

Image

JavaScript

HTML Elements

JSON / XML

Image


AJAX Fill-In: Low Origin Traffic

AJAX RequestBase HTML,

Cached Objects


ESI (Base Page)

Dynamic Page Assembly (Edge Server Includes)

CSS

Image

JavaScript

HTML Elements

ESI Directives


Dynamic Page Assembly: Low Origin Traffic

Base ESI, Cached Objects

Snippet Request


Contents of AJAX Responses

JSON / XML

JSON / XML

JSON / XML

JSON / XML

JSON / XML

JSON / XML ● Per Page○ Flurry for small answers

vs.○ Consolidated answer

● Consider A/B Testing


Contents of AJAX Responses

JSON / XML

JSON / XML

JSON / XML

JSON / XML

JSON / XML

JSON / XML ● Per API Call○ Filter on server (less bytes)

vs.○ Filter on client (more bytes)

● Consider A/B Testing


Activate EdgeStart on TTL-Polluted Pages

Base Page

CSS

Image

JavaScript

HTML ElementsSend "first stuff"while fetching

dynamic remainder


Prefetch: Head Start on Traffic

Get Dynamic HTML, Send Start

Request full HTML


Prefetch & H2 Push for Cacheable Assets

Base Page

CSS

Image

JavaScript

HTML Elements

Have the Edge get objects early.With H2, push objects before

requested.


Prefetch: Head Start on Traffic

Get HTMLHTML, Then Objects


Pushed assets sit in client cacheH2 PUSH: Head Start on Traffic

Get HTML,Push More


H2 PUSH

● Part of the HTTP/2 protocol.● Obviously a successful push yields instant load!● Best times for PUSH:

○ If a dynamic base page is requested, while origin is being asked for it.○ After a page & objects are loaded, before the next click.


Client Cache

Corporate Proxy

Transparent Proxy

Caching Venues

Origin

CDN (Multiple)

APP

DATA

MEMCACHE

HTTP CACHE

CDN

High Control High Control

Standards


Using Edge-Control Header

// set CDN cache to 60 days, no other cache

res.writeHead(200, {'Content-Type': mimeType,

'Content-Length': contents.length,

'Cache-Control': 'private, no-store, no-cache, max-age=0',

'Edge-Control': 'max-age=60d',

});

// set CDN cache to 60 days, proxies to not cache, client to cache for an hour



'Cache-Control': 'private',

'Edge-Control': '!no-store, max-age=60d, downstream-ttl=1h',

});

// set CDN cache to 60 days, proxies to caches to 30 secs, client caches to 1 hour



'Cache-Control': 's-maxage=30, max-age=1h',

'Edge-Control': 'max-age=60d',

});


// will be cached by Akamai:

Vary: Accept-Encoding

// will not be cached by Akamai:

Vary: Accept-Encoding,Referer

Vary: User-Agent

Vary: Cookie

// occasionally appropriate to work around, e.g.:

X-Vary: Cookie

// ...apply metadata to use the cookie value

// in the cache key and move X-Vary to Vary

Vary: Cookie

// language is a common case:

Vary: Accept-Encoding,Accept-Language

// ...but consider creating language folders

Vary Header

● Vary is a necessary evil.● From origin to Akamai, Vary can pollute a

page as uncacheable (other than Accept-Encoding).

● Important for SEO to emit from Edge.● Sometimes work around this in metadata.● Consider a URL space redesign.


// cache on cookies with names '_sess' and 'ID'

Vary: Cookie

Key: Cookie;param=_sess;param=ID

// vary on galaxy note 7

Vary: User-Agent

Key: User-Agent;substr=SM-N930F

...tell the user to turn off their phone!...

// interpret Foo as a numeric and put into buckets:

Key: Foo;partition=20:30:40

Foo: 11 → < 20

Foo: 18 → 0-20

Foo: 20 → 20-30

Foo: 25 → 20-30

Foo: 30 → 30-40

Foo: 80 → >= 40

Future: Key Header

● Key is the new Vary.● Spec by Mark Nottingham of Akamai.● Subexpressions to cover more realistic

use-cases with broader buckets.


Content Negotiation Tips

● When your CDN can translate inline some negotiable aspect, it's not an issue.○ e.g. Akamai can apply/remove gzip at the Edge.○ Brotli is too new for this treatment at the moment.

● Setup cache keys to accommodate, or separate URL space.○ e.g. human languages and newer encodings.○ Flatten the URL space to 1:1 between a URL and a stream of bytes.


Base Page

WebSockets: Live Updates

CSS

Image

JavaScript

HTML Elements

WebSocket Frame

WebSocket Frame

WebSocket Frame


WebSocketRouting

WebSocket to Origin

WebSockets: Live Updates


Thank You!


Appendix Follows

● Helpful links:○ Akamai Ion○ Akamai Developer Site○ Akamai HTTP/2 Site○ Akamai Community: Top 5 Caching Best Practices○ ESI Developer's Guide○ Key Header specification

https://www.akamai.com/us/en/solutions/products/web-performance/web-performance-optimization.jsp

https://www.akamai.com/us/en/solutions/products/web-performance/web-performance-optimization.jsp

https://developer.akamai.com/

https://developer.akamai.com/

https://http2.akamai.com/

https://http2.akamai.com/

https://community.akamai.com/docs/DOC-2110

https://community.akamai.com/docs/DOC-2110

https://www.akamai.com/us/en/multimedia/documents/technical-publication/akamai-esi-developers-guide-technical-publication.pdf

https://www.akamai.com/us/en/multimedia/documents/technical-publication/akamai-esi-developers-guide-technical-publication.pdf

https://greenbytes.de/tech/webdav/draft-ietf-httpbis-key-latest.html

https://greenbytes.de/tech/webdav/draft-ietf-httpbis-key-latest.html


Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection.

Consumers Expect Pages That Pop

49%Expect <2 second page load times

30%Expect <1 second page load times

18%Expect instant

page load times!

Source: Akamai


Public vs Personalized

PERSONALIZEDPUBLIC


FAST PURGE IS LIVE IN LIMITED AVAILABILITY!

● ~5-second invalidate and delete of individually specified urls via API and UI

● Over 100X throughput compared with our legacy purge capabilities

● Already enabled on all customer accounts

● Coming in Q1, 2017:○ Fast Purge by cpcode○ Fast Purge by content tag

Cache your semi-dynamic content, and respond near instantly as soon as it changes with Fast Purge.

https://community.akamai.com/community/web-performance/blog/2016/08/29/the-fast-purge-user-interface-is-now-in-limited-availability-on-luna

https://community.akamai.com/community/web-performance/blog/2016/08/29/the-fast-purge-user-interface-is-now-in-limited-availability-on-luna

https://developer.akamai.com/api/purge/ccu/overview.html


Fast Purge Allows Full Offload When Quiet

Quiet Time!

Theoretical Load


URL Space Organization

● /img/hero-12345.jpg● /css/styles-main.css

○ Easily cached● /blah/(index.*)

○ If possible, have index.html be cached: use AJAX fill-in or ESI.● /api/blah*

○ If possible, test separation of API response data on cacheability grounds rather than letting one piece of the response pollute the entire response to no-store.

● /files/by/group*○ Organize files into groups such that clients are likely to grab bundles matching

exactly what they need.


EdgeStart Waterfall


Future: Brotli Compression

● Brotli is a new compression algorithm developed by Jyrki Alakuijala and Zoltán Szabadka of Google.

● Brotli has levels of compression: 6 and 11 are of particular note.

● Until the CDN can translate gzip/brotli live then consider the hit to cacheability along with the file size.

● Brotli 11 assets will probably always be pre-generated and stored.

// new encoding

Accept-Encoding: gzip,br

Encoding: br

Technology

Edge 2016 pages that pop through layered cache techniques