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.
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
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
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