Alex Russell Software Engineer, Google at Fastly Altitude 2016 New browser technologies are arriving that are poised to change user and developer expectations of what’s possible on the web; particularly on slow mobile devices with flaky connections. This talk discusses how these new technologies – Service Workers, Progressive Web Apps, HTTP/2, Push, Notifications, and Web Components are being combined, e.g. in the new PRPL pattern, to transform user experiences while improving business results.

1. Service Workers, PWAs, PRPL,
and What's Next for Mobile
+Alex Russell
@slightlylate

2. Chrome is
Performance
Obsessed

3. Current Perf Projects:
120

4. Recent & Ongoing Perf Highlights
Service Workers
Save-Data Header
HTTP/2
QUIC
Streams
Intersection Observer API
V8: Ignition (Interpreter)
V8: Promises Perf Work
V8: Orinoco (GC)
Cache API: compile cache
Web Assembly
GPU Rasterization
“Slimming Paint”
Blink Task Scheduler
requestIdleCallback
<link rel=‘preload’>
CSS font-display Rule
Performance Observer API
Passive Event Listeners
CSS Containment
VP9
Client Hints
HTML Imports
Tab Discarding
Shadow DOM
“PlzNavigate”
Many, Many DevTools
Features
Pre-paint Tuning
Memory Coordinator
Offscreen Canvas & Worker
GL
Partial Raster
Foreign Fetch
GPU Scheduler
Throttle Offscreen Content

5. Recent & Ongoing Perf Highlights
Service Workers
Save-Data Header
HTTP/2
QUIC
Streams
Intersection Observer API
V8: Ignition (Interpreter)
V8: Promises Perf Work
V8: Orinoco (GC)
Cache API: compile cache
Web Assembly
GPU Rasterization
“Slimming Paint”
Blink Task Scheduler
requestIdleCallback
<link rel=‘preload’>
CSS font-display Rule
Performance Observer API
Passive Event Listeners
CSS Containment
VP9
Client Hints
HTML Imports
Tab Discarding
Shadow DOM
“PlzNavigate”
Many, Many DevTools
Features
Pre-paint Tuning
Memory Coordinator
Offscreen Canvas & Worker
GL
Partial Raster
Foreign Fetch
GPU Scheduler
Throttle Offscreen Content

6. Faster is better.
Source: SOASTA, 2015
2.4 2.7 3.0 3.3 3.6 3.9 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9
180,000
140,000
100,000
60,000
0
20,000
58
45
32
19
0
6
Sessions
Load time (in seconds)
Bouncerate(%)
Sessions Bounce rate
13%
bounce
rate
20%
bounce
rate
58%
bounce
rate

7. flickr.com/photos/monado/4405843023

9. Service workers enable reliable performance
Web server
Service worker
Client side proxy written
in JavaScript
Cache

10. example.com
GET
/app.html
HTTP/1.1
HOST
example.com
...
HTTP/1.1
200
OK
Date:
Thu,
19
Feb
2015
05:21:56
GMT
...

11. example.com
//
sw.js
onfetch
=
function(e)
{
if(e.request.url
==
"app.html")
{
e.respondWith(
caches.match(e.request)
);
}
if(e.request.url
==
"content.json")
{
//
go
to
the
network
for
updates,
//
meanwhile,
use
cached
content
fetch(...).then(function(r)
{
r.asJSON().then(function(json)
{
e.client.postMessage(json);
});
});
}
};
GET
/app.html
HTTP/1.1
HOST
example.com
GET
/content.json
HTTP/1.1
HOST
example.com
...
GET
/content.json
HTTP/1.1
HOST
example.com
...
HTTP/1.1
200
OK
Date:
Thu,
19
Feb
2015...
...

13. Progressive Web Apps

14. Capability
Web

15. Capability
Reach
App
Web
*
Web

16. Capability
Reach
App
WebWeb
PWA

24. Web App Manifests
<link rel="manifest" href="/path/to/manifest.json">

25. www.washingtonpost.com/pwa/manifest.json
{
"lang": "en",
"short_name": "Wash Post",
"name": "The Washington Post",
"icons": [
{ "src": "img/launcher-icon-2x.png", "sizes": "96x96", "type": "image/png" },
{ "src": "img/launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" },
{ "src": "img/launcher-icon-4x.png", "sizes": "192x192", "type": "image/png" }
],
"start_url": "/pwa/?utm_source=homescreen",
"display": "standalone",
"orientation": "portrait",
"background_color": "black"
}

26. github.com/GoogleChrome/lighthouse

27. The RAIL Performance Model
Respond, Animate, Idle, Load

28. "Respond: 100ms
"Animate: 8ms
"Idle work: 50ms chunks
"Load: 1000ms to
interactive

29. Source: Paul Lewis

30. Source: Paul Lewis

31. Source: Paul Lewis

32. Mobile's Harder Than It Looks

33. DOMContentLoaded at 700ms!
Total JS Time < 600ms
onload at 1500ms Smooth animations
Interactive at ~4s

34. All the jank, all the time
DOMContentLoaded at 2500ms
Script locks UI thread for 2 seconds
onload at 5.7s
Interactive at ~7s
Total JS Time: ~4 seconds

35. Instant first paint w/ Server Render!
Fully loaded & interactive at 500ms!
Total JS Time: ~1 second

36. First paint is fast
UI thread is locked for 10 seconds
Server-rendered spinner feels stuck
Interactive at ~12 seconds

38. Interactive at 400ms...yawn?
Total JS is 200ms...so?

39. Everything that paints is interactive
Additional work is chunked to stay responsive
First paint acknowledges user earlyInteractive at 1.75 seconds
1.3s of JS, but broken up

40. #usetheplatform

41. How we got to 12s of JS…

42. App bundling
App
Bundle
https://shop/list/ladies_outerwear
Shop - List
Ladies Outerwear Server

43. Per-route bundling
https://shop/list/ladies_outerwear
Shop - List
Ladies Outerwear Server
list
button
tabs
Optimal /list
bundle

44. https://shop/cart
Shop - Cart
Per-route bundling
Server
list
button
icon-button
Shopping Cart
Optimal /cart
bundle

45. Per-route bundling
list
button
icon-button
Optimal /cart
bundle
list
button
tabs
Optimal /list
bundle
Duplicated
modules

46. HTTP/2 to the rescue

47. Browser Server
All subresources can
be fetched in parallel
RESPONSE
GET: index.html
GET: subresources
RESPONSE
HTTP/2

48. RESPONSE
GET: index.html
Browser Server
GET: subresources
RESPONSE
Transitive dependencies
discovered & requested
RESPONSE
GET: subresources
HTTP/2

49. GET: index.html
Browser Server
RESPONSE
Transitive dependencies
preemptively pushed
HTTP/2 + Server Push

50. Response Headers:
content-encoding:
content-length:
content-type:
link:
…
gzip
385
text/html
</shop-app.html>;rel=preload;as=document,
</iron-pages.html>;rel=preload;as=document,
</list-view.html>;rel=preload;as=document,
</detail-view.html>;rel=preload;as=document,
</cart-view.html>;rel=preload;as=document,
</polymer.html>;rel=preload;as=document
method:
path:
scheme:
accept:
…
GET
/index.html
https
text/html
…
HTTP Request Headers
HTTP Response Headers

51. <link rel=“import” href=“polymer.html”>
<link rel=“import” href=“iron-pages.html”>
<link rel=“import” href=“list-view.html”>
<link rel=“import” href=“detail-view.html”>
<link rel=“import” href=“cart-view.html”>
<link rel=“import” href=“shop-app.html”>
index.html
<!doctype html>
<html>
<head>
<link rel=“import” href=“shop-app.html”>
</head>
<body>
<shop-app></shop-app>
</body>
</html>
my-app.html
<link rel=“import” href=“iron-pages.html”>
<link rel=“import” href=“list-view.html”>
<link rel=“import” href=“detail-view.html”>
<link rel=“import” href=“cart-view.html”>
<template>
<iron-pages>
<list-view></list-view>
<detail-view></detail-view>
<cart-view></cart-view>
</iron-pages>
</template>
iron-pages.html
<link rel=“import” href=“polymer.html”>
<template>
list-view.html
<link rel=“import” href=“polymer.html”>
<template>
detail-view.html
<link rel=“import” href=“polymer.html”>
<template>
cart-view.html
<link rel=“import” href=“polymer.html”>
<template>
<header>
<h1>[[category.title]]</h1>
<span>[[_getPluralizedQuantity(category.
</header>
<div class="grid">
<template is="dom-repeat" items="[[_ge
<a href$="[[_getItemHref(item)]]">
<list-item item=“[[item]]"></list-list-item>
</a>
</template>

52. <link rel=“import” href=“iron-pages.html”>
<link rel=“import” href=“list-view.html”>
<link rel=“import” href=“detail-view.html”>
<link rel=“import” href=“cart-view.html”>
<link rel=“import” href=“shop-app.html”>
<link rel=“import” href=“polymer.html”>
Response Headers:
link: </shop-app.html>;rel=preload;as=document,
</iron-pages.html>;rel=preload;as=document,
</list-view.html>;rel=preload;as=document,
</detail-view.html>;rel=preload;as=document,
</cart-view.html>;rel=preload;as=document,
</polymer.html>;rel=preload;as=document

53. tabs
button
list
…
Cold cache:
Only load code
critical for /list route
icon-buttonicon
header
drawer
1. Push components for initial route
https://shop/list

54. 2. Render initial route asap
https://shop/list

55. 3. Pre-cache remaining components
…
…
Code for secondary
routes pre-cached
lazily
https://shop/list

56. 4. Lazy load & create secondary route
https://shop/cart

57. Push
Render
Pre-cache
Lazy-load
resources for initial route
the initial route asap
code for remaining routes
& create next routes on-demand
The PRPL Pattern

58. Polymer App Toolbox

59. Service Worker Foreign Fetch

60. cdn.thirdpary.com
GET
/app.js
HTTP/1.1
HOST
cdn.thirdparty.com
GET
/app.js
HTTP/1.1
HOST
cdn.thirdparty.com
...
HTTP/1.1
200
OK
Date:
Thu,
19
Feb
2015...
...
???

61. cdn.thirdpary.com
GET
/app.js
HTTP/1.1
HOST
cdn.thirdparty.com
GET
/app.js
HTTP/1.1
HOST
cdn.thirdparty.com
...
HTTP/1.1
200
OK
Date:
Thu,
19
Feb
2015...
...
???
!!!

62. Resources
Lighthouse
github.com/GoogleChrome/lighthouse
Offline Web Applications Udacity Course
udacity.com/course/offline-web-applications--ud899
Polymer App Toolbox
polymer-project.org/1.0/toolbox/
youtube.com/ChromeDevelopers
The Washington Post PWA
wapo.com/pwa
“Shop” PRPL PWA
shop.polymer-project.org
Other Great PWA Experiences
pwa.rocks
Progressive Web App Codelabs
developer.google.com/web/progressive-web-apps