Best viewed with - Velocity Amsterdam 2015

@onishiweb Best viewed with… Adam Onishi Velocity Conf Amsterdam -
October 2015

@onishiweb A long time ago…

@onishiweb @onishiweb

@onishiweb

@onishiweb “Browser wars!”

@onishiweb – a website in 2015 “Oops. Your browser is
no longer supported”

@onishiweb Chrome Firefox IE Safari Opera UC Browser Safari (iOS)
Opera Mini Android Browser Amazon Silk YaBrowser Maxthon Iron Nokia Browser Sea Monkey Avant Camino Epiphany OmniWeb Konqueror Galeon Swiftfox Edge

@onishiweb Chrome (v46) • Cache.addAll() • HTTP Client hints •
CSS.escape() Edge • img srcset • CSS Regions • Arrow functions Firefox (v41) • Font Loading API • Cache API • Cut/Copy web API Safari (v9) • Backdrop ﬁlters • CSS scroll snapping • Content blocking

@onishiweb

@onishiweb A moratorium http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html

@onishiweb Developer-ﬁrst development

@onishiweb Cake or Death?

@onishiweb Progressive enhancement

@onishiweb “Vague, but exciting”

@onishiweb The Web JS CSS HTML Internet

@onishiweb Chrome Firefox IE Safari Opera UC Browser Safari (iOS)
Opera Mini Android Browser Amazon Silk YaBrowser Maxthon Iron Nokia Browser Sea Monkey Avant Camino Epiphany OmniWeb Konqueror Galeon Swiftfox Edge

@onishiweb – Paul Robert Lloyd “By making fewer assumptions about
context and interface, focusing more on users’ tasks and goals, we can create more adaptable products.” http://alistapart.com/article/thinking-responsively-a-framework-for-future-learning

@onishiweb Photo from EdgeConf 2015 @onishiweb

@onishiweb

@onishiweb Control

@onishiweb Defensive design

@onishiweb What we do know

@onishiweb Baseline

@onishiweb Performance

@onishiweb Performance Perceived

@onishiweb

@onishiweb Progressively enhanced performance

@onishiweb https://github.com/onishiweb/progressive-performance

@onishiweb Render blocking assets

@onishiweb CSS, Fonts, and JavaScript

@onishiweb Browser rendering

@onishiweb Stuﬀ Request Render DNS Lookup Initial connection SSL Negotiation
Time to ﬁrst byte (TTFB) Content download

@onishiweb Stuff Request Render Stuff Stuff Stuff Stuff Stuff Stuff

@onishiweb CSS

@onishiweb CSS is still an enhancement

@onishiweb CSS as an enhancement

@onishiweb Critical Path CSS

@onishiweb Tooling

@onishiweb “Set it. Forget it.” – Tim Kadlec https://speakerdeck.com/tkadlec/reaching-everyone-fast-at-from-the-front-2015?slide=75

@onishiweb https://github.com/addyosmani/critical

@onishiweb https://github.com/pocketjoso/penthouse

@onishiweb gulp.task('critical', function () { penthouse({ url : 'http://localhost:4444/index.html', css
: 'public/styles.css', width : 720, // viewport width height : 500 // viewport height }, function(err, criticalCss) { if (err) { // handle error } fs.writeFileSync('public/critical.css', criticalCss); }); });

@onishiweb loadCSS https://github.com/filamentgroup/loadCSS/

@onishiweb <script> function loadCSS(e,t,n) { ... } loadCSS('/css/main.min.css'); </script>

@onishiweb rel="preload" https://github.com/filamentgroup/loadCSS/issues/59

@onishiweb <link rel="preload" href="/css/main.min.css" id="asyncCSS" onload="this.rel='stylesheet'"> <script> function loadCSS(e,t,n) {
... } function preloadSupported() { ... } if( ! preloadSupported() ){ loadCSS( asyncCSS.href ); } </script>

@onishiweb Cache locally

@onishiweb Progressively enhancing CSS delivery

@onishiweb Fonts

@onishiweb We ❤ web fonts

@onishiweb

@onishiweb 3s 3s 3s ∞ -

@onishiweb Asynchronous font loading

@onishiweb Font loading API

@onishiweb FOUT FOIT

@onishiweb Flash Of Unstyled Text Flash Of Invisible Text

@onishiweb FOUT vs FOIT

@onishiweb Control over fonts

@onishiweb var newFont = new FontFace("open_sansbold", "url(/fonts/ opensans-bold-webfont.woff)", {}); newFont.load().then(function
(loadedFace) { document.fonts.add(loadedFace); document.body.style.fontFamily = "open_sansbold, serif"; });

@onishiweb document.fonts.ready.then(function() { var content = document.getElementById("content"); content.style.visibility = "visible";
});

@onishiweb CSS Font Rendering https://tabatkins.github.io/specs/css-font-display/

@onishiweb @font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.woff'); font-display: swap;
}

@onishiweb font-display: auto | block | swap | fallback |
optional;

@onishiweb Font loading API http://caniuse.com/#feat=font-loading 41 43 31 ❌

@onishiweb Font display ❌ ❌ ❌ ❌

@onishiweb Progressively enhancing font loading

@onishiweb JavaScript

@onishiweb – Peter Herlihy, GDS Team “1.1% of people aren’t
getting JavaScript enhancements (1 in 93).”

@onishiweb http://kryogenix.org/code/browser/everyonehasjs.html

@onishiweb

@onishiweb – Jeremy Keith “Brilliant easter egg in the newly-
redesigned nasa.gov — if JavaScript fails, you are immersed in the experience of deep space”

@onishiweb Frameworks

@onishiweb – Jake Archibald “Nothing should have a JavaScript dependant
first render, it only punishes the user.”

@onishiweb Is there a better way?

@onishiweb Universal JavaScript

@onishiweb Server Side rendering with Node.js

@onishiweb React

@onishiweb React.renderToString();

@onishiweb app.get('/', function(req, res){ // React.renderToString takes your component //
and generates the markup ReactApp = React.createFactory( require('../components/ index.js') ); reactHtml = React.renderToString( ReactApp({}) ); // Output html rendered by react res.render('index.ejs', { reactOutput: reactHtml }); });

@onishiweb Client side too

@onishiweb GoCardless

@onishiweb – Jack Franklin, GoCardless “If you visit it in
a ‘good’ browser with JS on, you get an incredibly snappy React app, if not, you hit the server on every click.”

@onishiweb Progressively enhancing JavaScript frameworks

@onishiweb Control

@onishiweb Render blocking assets

@onishiweb Stuff Request Render Stuff Stuff Stuff Stuff Stuff Stuff

@onishiweb Stuﬀ Request Render

@onishiweb The Network

@onishiweb The Web JS CSS HTML Internet

@onishiweb Stuﬀ Request Render Network

@onishiweb Assumption

@onishiweb Mobile connectivity

@onishiweb Cake or Death?

@onishiweb Enter ServiceWorker

@onishiweb – Nicolas Bevacqua “…everything seems to point at ServiceWorker
being the most significant addition to the web platform since the introduction of AJAX – over 10 years ago” https://ponyfoo.com/articles/serviceworker-revolution

@onishiweb Web vs Native!

@onishiweb The web is going oﬄine!

@onishiweb Browser cache

@onishiweb Cache content Register SW Stuﬀ Request Render

@onishiweb Cache Stuﬀ Request Render SW

@onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //
Registration was successful console.log('SW registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('SW registration failed: ', err); }); }

@onishiweb self.addEventListener('install', function(event) { // Perform install steps event.waitUntil( caches.open('content-cache-v1')
.then(function(cache) { return cache.addAll([ '/index.html', '/css/main.min.css', '/main.js' ]); }) ) });

@onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { console.log('Return from
cache now', event.request); // Cache hit - return response if (response) { return response; } return fetch(event.request); } ) ); });

@onishiweb

@onishiweb Cache, falling back to network

@onishiweb Stale content

@onishiweb Cache Network Stuﬀ Request Render SW Send notiﬁcation Webpage
@onishiweb

@onishiweb Cache then network https://ponyfoo.com/articles/progressive-networking-serviceworker

@onishiweb Twitter screenshot

@onishiweb https://jakearchibald.com/2014/offline-cookbook/

@onishiweb Diving in head ﬁrst…

@onishiweb Development ﬂow https://www.chromium.org/blink/serviceworker/getting-started#TOC-Development-flow

@onishiweb https://code.google.com/p/chromium/issues/detail?id=500428#c10

@onishiweb chrome://inspect/#service-workers

@onishiweb New Service Worker inspector - Jake’s Tweet @onishiweb https://twitter.com/jaffathecake/status/656034298148048896

@onishiweb HTTPS only

@onishiweb – MDN “Having modified network requests wide open to
man in the middle attacks would be really bad.”

@onishiweb How much can I cache?

@onishiweb Browser support…

@onishiweb ServiceWorker https://jakearchibald.github.io/isserviceworkerready/ 44 40 24 ❌ ❌

@onishiweb Fetch https://jakearchibald.github.io/isserviceworkerready/ 39 40 27 ❌ ❌

@onishiweb Cache API https://jakearchibald.github.io/isserviceworkerready/ 41 46 33 ❌ ❌

@onishiweb https://jakearchibald.github.io/isserviceworkerready/

@onishiweb Progressively enhancing the network

@onishiweb Return of the “browser wars”

@onishiweb Not really

@onishiweb Stop assuming

@onishiweb – Bruce Lawson “It never pays to make too
many assumptions about your users.”

@onishiweb Be defensive

@onishiweb Improve performance

@onishiweb Critical Path CSS

@onishiweb Critical Path CSS Font Loading API

@onishiweb Critical Path CSS Font Loading API Universal JavaScript

@onishiweb Critical Path CSS Font Loading API Universal JavaScript ServiceWorker

@onishiweb – Tim Kadlec “Growing divide between what the web
is capable of & its power (universal access) makes progressive enhancement more important than ever—not less”

@onishiweb Thanks Adam Onishi Velocity Conf Amsterdam - October 2015

@onishiweb Questions?

Best viewed with - Velocity Amsterdam 2015

Best viewed with - Velocity Amsterdam 2015

More Decks by Adam Onishi

Other Decks in Technology

Featured

Transcript