Modern progressive web applications are complex pieces of software running in the browser. Fastly offers unparalleled control over the way the bytes fly from your servers to the user, enabling many of the features of advanced progressive web apps to truly shine. This talk will show how these latest web technologies can best take advantage of smarts in the network to deliver your web app at top speed.

1. Andrew Betts
Principal developer advocate | Fastly
The power of the
network

2. • Developer relations at
Fastly
• W3C Technical
Architecture Group
• Previously Financial Times,
Nikkei
Who is this guy?

3. webpagetest.org
Loading resources is
complicated
Better browser support
gives developers more
control, better tools (like
webpagetest) offer
better monitoring.

5. HTTP Archive, April 2017

6. http://www.pcworld.com/article/3060622

7. >
2.39MB3.45MB

8. https://whatdoesmysitecost.com/ (tested MSNBC.com, 3.35MB in June 2017)
2.2% of daily income
to load one webpage

9. Proliferation of third
party tools on the page
Ghostery regularly finds
more than 50 third party
scripts included on a
single web page.

10. Connections can be
expensive

11. TCP + TLS handshake (3-4 round-trips)
“High performance browser networking”, Ilya Grigorik (O’Reilly 2013)

12. Denver
(DEN)
Stockholm
(BMA)
7,800km
Theoretical best RTT: 90ms
Practical RTT: 146ms

13. HTTP/1.0
dogs.html dogs.html
GET
dogs.html
dog1.gif dog1.gif
GET
dog1.gif
dog2.gifdog2.gif
GET
dog2.gif
dog1.gif
Session 1
Session 2
Session 3

14. HTTP/1.1
dogs.html dogs.html
GET
dogs.html
dog1.gif dog1.gif
GET
dog1.gif
dog2.gifdog2.gif
GET
dog2.gif
dog1.gif
Session 1

15. HTTP/2
dogs.html dogs.html
GET
dogs.html
dog1.gif dog1.gif
dog2.gifdog2.gif
dog1.gif

17. • You can’t make light go faster
– TLS+TCP setup requires 3-4 round trips
– Get closer to the users
• You can’t optimise across multiple origins
– Even as HTTP improves, you will still need separate connections to
each origin
– Use a smaller number of origins
• Requests are getting cheaper
– Don’t worry so much about number of requests
Bottom line

18. Dynamic site acceleration
Denver user
Edge
(Denver)
Server
(Stockholm)
Higher probability of existing connection

19. Dynamic site acceleration (shielded)
Denver user
Edge 1
(Denver)
Edge 2
(Europe)
Always on, optimised, low latency connection
Server
(Stockholm)

20. Caching modern,
progressive web apps

22. pwa.fastlydemo.net
An offline-capable news
reading progressive web
app with cache insights
ServiceWorker
required for stats

23. pwa.fastlydemo.net

24. Multiple caches
Browser HTTP
cache
Fastly Origin server

25. • Never changes?
Cache-control: max-age=31536000, immutable
• Unique response?
Cache-control: private, no-store
• Changes when stuff happens?
Cache-Control: max-age=0, s-maxage=31536000
Good cache headers
Avoid revalidations
on refresh

26. Purging when things happen
User
Event:
Comment posted
Edge Server
Uncached, fetch
from origin
Hit! return “304 Not
Modified” from Edge
cache
After purge,
uncached again
PURGE
MISS...

27. Cache miss after purging

28. Serve stale (while revalidate)
Users
Soft purge
Edge Server
400req/s for the
home page
One request goes to
origin. The rest are
held at the edge.
Future requests served
from fresh cache
After expiry, requests
still get fast cached
response
Asynchronous fetch
to refresh the cache
Cache repopulated
Does not wait for
origin response!

29. Purging when things happen
Did not wait for
origin response!

30. Serve stale (on error from origin)
Users
Purge
Edge Server
Requests flooding in
Just one request
goes to origin,
populates cache at
the edge
Request after expiry
causes fetch to origin
Origin server is
offline, refuses
connection
stale-while-reval expires
SERVER DOWN!
Server super-stale
object from cache
Fall back to stale
content

32. Origin down, still working...

33. Cutting-edge web
networking with
Streams

34. Before: Edge side includes
<esi:include src="http://example.com/1.html"
alt="http://bak.example.com/2.html" onerror="continue"/>
index.html
my-news.html
Cache-control: max-age=86400
Cache-control: private
Origin
server
Edge cache / CDN
Browser

35. Now: Serviceworker & streams
/frags/header
/home.frag Server
/frags/footer
/
https://developers.google.com/web/updates/2016/06/sw-readablestreams
Browser
Cache/purge all these
individually!

36. No header
template!
Header + footer
In SW cache

37. Purge all the way to
the browser with
silent push
COMING
SOON

38. Multiple caches
Browser HTTP
cache
Fastly Origin server

39. Multiple caches (more honest edition)
Browser tab Image
cache
Fastly Origin serverPreload
cache
Service
worker
HTTP
cache
HTTP/2
push cache
https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/
Heuristically
managed
JavaScript API!

41. “This site has been updated
in the background”

43. Purging when things happen (+ silent push)
User
Event:
Comment posted
Fastly Server
Uncached, fetch
from origin
PURGE
SILENT WEB PUSH

44. Set headers for your
whole site at once
with Origin policy
COMING
SOON

45. Origin policy - for shared metadata
Content-Security-Policy:
HTTP-Strict-Transport-Security:
X-Frame-Options:
Referrer-Policy:
Cache-Control:
X-XSS-Protection:
...
Content-Security-Policy:
HTTP-Strict-Transport-Security:
X-Frame-Options:
Referrer-Policy:
Cache-Control:
X-XSS-Protection:
...
Content-Security-Policy:
HTTP-Strict-Transport-Security:
X-Frame-Options:
Referrer-Policy:
Cache-Control:
X-XSS-Protection:
...
/home /about /shop
/.well-known/origin-policy
https://wicg.github.io/origin-policy/

46. Assert behaviours for
peak performance
with Feature policy
COMING
SOON

47. Does your page
really need the
Vibration API?
They say I have to
have a GIF

48. Feature-Policy: {
"geolocation": [
"self",
"https://example.com"
],
“vibrate”: []
}
Feature policy HTTP header
This page is not allowed
to use vibration!

49. • More objects, smaller objects,
fewer origins
• Less bundling
• Smarter caching
• Serve stale (while-revalidating,
and if-error)
In summary...
• More purging
• More varying
• ServiceWorker and Silent push
• Origin policy and feature policy

50. Thanks for listening
I am Get the slides:
Andrew Betts
@triblondon
abetts@fastly.com
fastly.us/altitude-potn

52. One object, many
variations with the
Vary header

53. Accept-Language around the world
Washington DC Frankfurt Tokyo
1 en-us en-US,en;q=0.8 ja-jp
2 en-US,en;q=0.8 it-IT,it;q=0.8,en-US;q=0.6,en;q=0.4 ja-JP,en-US;q=0.8
3 en-US en-us ja-JP
4 en-US,en;q=0.5 it-it ja-JP,ja;q=0.8,en-US;q=0.6,en;q=0.4
5 en tr-tr ja,en-US;q=0.8,en;q=0.6
6 pt-BR,pt;q=0.8,en-US;q=0.6,en;q=0.4 ru ja
7 en_US tr-TR,tr;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4
8 es-ES,es;q=0.8 pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4 ko-KR
9 en,* ru-RU,ru;q=0.8,en-US;q=0.6,en;q=0.4 en-us
10 en-US;q=1 de-de ko-KR,en-US;q=0.8
+ over 5000 total variations

54. Normalise for vary (5000 -> 6)
Washington DC Frankfurt Tokyo
1 en (84%) en (60%) jp (74%)
2 es (7%) es (18%) en (23%)
3 pt (6%) de (12%) es (3%)
4 jp (2%) fr (7%)
5 fr (1%) pt (2%)
6 jp (1%)
https://docs.fastly.com/guides/vcl/accept-language%20header-vcl-features
accept.language_lookup("en:de:fr:pt:es:jp", "en", req.http.Accept-Language);