© 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
© AKAMAI - EDGE 2016
Caching Fundamentals
Edge closest to end-user
Edge closest to origin
Akamai Intelligent Platform
© AKAMAI - EDGE 2016
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!
© AKAMAI - EDGE 2016
ESI (Base Page)
Dynamic Page Assembly (Edge Server Includes)
CSS
Image
JavaScript
HTML Elements
ESI Directives
© AKAMAI - EDGE 2016
Dynamic Page Assembly: Low Origin Traffic
Base ESI, Cached Objects
Snippet Request
© AKAMAI - EDGE 2016
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
© AKAMAI - EDGE 2016
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
© AKAMAI - EDGE 2016
Activate EdgeStart on TTL-Polluted Pages
Base Page
CSS
Image
JavaScript
HTML ElementsSend "first stuff"while fetching
dynamic remainder
© AKAMAI - EDGE 2016
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.
© AKAMAI - EDGE 2016
Pushed assets sit in client cacheH2 PUSH: Head Start on Traffic
Get HTML,Push More
© AKAMAI - EDGE 2016
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.
© AKAMAI - EDGE 2016
Client Cache
Corporate Proxy
Transparent Proxy
Caching Venues
Origin
CDN (Multiple)
APP
DATA
MEMCACHE
HTTP CACHE
CDN
High Control High Control
Standards
© AKAMAI - EDGE 2016
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
res.writeHead(200, {'Content-Type': mimeType,
'Content-Length': contents.length,
'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
res.writeHead(200, {'Content-Type': mimeType,
'Content-Length': contents.length,
'Cache-Control': 's-maxage=30, max-age=1h',
'Edge-Control': 'max-age=60d',
});
© AKAMAI - EDGE 2016
// 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.
© AKAMAI - EDGE 2016
// 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.
© AKAMAI - EDGE 2016
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.
© AKAMAI - EDGE 2016
Base Page
WebSockets: Live Updates
CSS
Image
JavaScript
HTML Elements
WebSocket Frame
WebSocket Frame
WebSocket Frame
© AKAMAI - EDGE 2016
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
© AKAMAI - EDGE 2016
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
© AKAMAI - EDGE 2016
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.
© AKAMAI - EDGE 2016
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.
© AKAMAI - EDGE 2016
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