Instant Loading with the App Shell Model, Totally Tooling Tips (S3, E2)

Channel:
Chrome for Developers
Subscribers:
791,000
Published on ● Video Link: https://www.youtube.com/watch?v=QhUzmR8eZAo


Duration: 4:25
170,804 views
336

In this episode, Matt and Addy talk about instant loading web apps with an Application Shell architecture. The Application Shell architecture encourages caching your application shell (the User Interface) so it works offline and populate its content using JavaScript. On repeat visits, this allows you to get meaningful pixels on the screen really fast without the network, even if your content eventually comes from there. This comes with significant performance gains.

First Meaningful Paint: https://goo.gl/fQUVBK

Application Shell Architecture: https://goo.gl/EhHZz5

Getting Started Guide: https://goo.gl/Xa3dhz

Watch more episodes of Totally Tooling Tips here: https://goo.gl/IoXka7

Subscribe to the Chrome Developers channel at http://goo.gl/LLLNvf



Other Videos By Chrome for Developers


2016-05-19Accessibility is My Favorite Part of the Platform - Google I/O 2016
2016-05-18Great libraries and tools for great Progressive Web Apps - Google I/O 2016
2016-05-18Mythbusting HTTPS: Squashing security’s urban legends - Google I/O 2016
2016-05-18Building the Google I/O Web App: Launching a Progressive Web App on Google.com - Google I/O 2016
2016-05-18Web Performance Tooling - Google I/O 2016
2016-05-18High performance web user interfaces - Google I/O 2016
2016-05-16HTTP203 Recap
2016-05-12Side Navigation Bar: TL;DW - Supercharged
2016-05-11Push Notifications: Totally Tooling Tips (S3, E3)
2016-05-05Easy Easing - Supercharged
2016-05-04Instant Loading with the App Shell Model, Totally Tooling Tips (S3, E2)
2016-04-28Side Navigation Bar: Live Code Session - Supercharged
2016-04-27Offline Support, Totally Tooling Tips (S3, Ep1)
2016-04-26Swipeable Cards: TL;DW - Supercharged
2016-04-25Season 3 Trailer, Totally Tooling Tips
2016-04-20Routing with carbon-route -- Polycasts #46
2016-04-19Chrome 50: Payload in Push, Preload Assets & Canvas supports toBlob()
2016-04-14Swipeable Cards: Live Code Session - Supercharged
2016-04-13Web Page Test, Totally Tooling Tips (S3 Mini Tip #3)
2016-04-07Polygit. The Polymer CDN! -- Polycasts #45
2016-03-30Service Worker Toolbox, Totally Tooling Tips (S3 Mini Tip #2)


Tags:
Chrome
Developers
Google
Web
totally tooling tips
progressive web apps
PWA
application shell
Offline support
Webapp
Javascript
CSS
Product: Web
Fullname: Other
Location: LON
Team: DPE
Type: Screencast
GDS: Full Production
critical path css
app shell
totaly tooling tips
instant loading with the app shell