Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Best viewed with... SOTB5
Search
Adam Onishi
September 12, 2015
Technology
1
180
Best viewed with... SOTB5
My updated Best viewed with talk from State of the Browser 5
Adam Onishi
September 12, 2015
Tweet
Share
More Decks by Adam Onishi
See All by Adam Onishi
Help! My client is a WebPerf meetup!
onishiweb
2
230
Help! My client is a WebPerf meetup!
onishiweb
0
330
Design Systems and Web Components
onishiweb
1
290
Planes, Trains, and CSS Components London CSS
onishiweb
1
150
Planes, Trains, and CSS Components
onishiweb
6
470
Best viewed with - Velocity Amsterdam 2015
onishiweb
3
3.1k
Trophy Winning Teams - Web Dev Conf 2015
onishiweb
0
230
Trophy Winning Teams - Drupal Con 2015
onishiweb
0
68
Best viewed with... Theme Conf 2015
onishiweb
1
140
Other Decks in Technology
See All in Technology
ABEMAの本番環境負荷試験への挑戦
mk2taiga
3
130
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
13
6k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
170
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
20k
[ JAWS-UG千葉支部 x 彩の国埼玉支部 ]ムダ遣い卒業!FinOpsで始めるAWSコスト最適化の第一歩
sh_fk2
2
110
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
140
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
170
インフラ寄りSREの生存戦略
sansantech
PRO
5
1.6k
Operating Operator
shhnjk
1
600
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
0
130
LLM時代の検索
shibuiwilliam
2
370
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GraphQLとの向き合い方2022年版
quramy
49
14k
Balancing Empowerment & Direction
lara
1
430
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
We Have a Design System, Now What?
morganepeng
53
7.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
4 Signs Your Business is Dying
shpigford
184
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
@onishiweb Best viewed with… Adam Onishi State of the Browser
- September 2015
@onishiweb A long time ago…
@onishiweb @onishiweb
@onishiweb
@onishiweb “Browser wars!”
@onishiweb @onishiweb
@onishiweb – a website in 2015 “For best results view
this page in Chrome.”
@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 (v44) - Cache.add() - Request.context() - Notification.data Edge
- img srcset - CSS Regions - Arrow functions Firefox (v40) - Improved Dev tools - IndexedDB transactions - Fetch API (v39) Safari (v9) - Backdrop filters - CSS scroll snapping - Content blocking
@onishiweb
@onishiweb A moratorium http://www.quirksmode.org/blog/archives/2015/07/stop_pushing_th.html
@onishiweb Developer-first development
@onishiweb Cake or Death?
@onishiweb Progressive enhancement
@onishiweb “Vague, but exciting”
@onishiweb Photo by Simon Collison - https://flic.kr/p/pbRdFm @onishiweb
@onishiweb Photo by Pedro Ribeiro Simões - https://flic.kr/p/bvCA8 @onishiweb
@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 @onishiweb
@onishiweb Control
@onishiweb Defensive design
@onishiweb What we do know
@onishiweb Baseline
@onishiweb Performance
@onishiweb Perceived Performance
@onishiweb
@onishiweb
@onishiweb Progressively enhanced performance
@onishiweb Render blocking assets
@onishiweb CSS, JS, & Fonts
@onishiweb CSS
@onishiweb CSS is still an enhancement
@onishiweb CSS as an enhancement
@onishiweb Critical Path CSS
@onishiweb Tooling
@onishiweb https://github.com/addyosmani/critical
@onishiweb https://github.com/pocketjoso/penthouse
@onishiweb loadCSS https://github.com/filamentgroup/loadCSS/
@onishiweb Progressively enhancing CSS delivery
@onishiweb Fonts
@onishiweb We ❤ web fonts
@onishiweb
@onishiweb
@onishiweb 3s 3s 3s ∞ -
@onishiweb Asynchronous font loading
@onishiweb Font loading API
@onishiweb var f = new FontFace("open_sansbold", "url(/fonts/ opensans-bold-webfont.woff)", {}); f.load().then(function
(loadedFace) { document.fonts.add(loadedFace); document.body.style.fontFamily = "open_sansbold, serif"; });
@onishiweb var f = new FontFace("open_sansbold", "url(/fonts/ opensans-bold-webfont.woff)", {}); f.load().then(function
(loadedFace) { document.body.className += ' fonts—loaded'; }); /* CSS */ p { visibility: hidden; } .fonts-loaded p { visibility: visible; }
@onishiweb Progressively enhancing font loading
@onishiweb Font loading API http://caniuse.com/#feat=font-loading 41 43 31 ❌ ❌
@onishiweb CSS Font Rendering http://tabatkins.github.io/specs/css-font-rendering/
@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 The Network
@onishiweb Assumption
@onishiweb @onishiweb Photo by Paul Robertson - https://flic.kr/p/9qSizG
@onishiweb Mobile connectivity
@onishiweb Cake or Death?
@onishiweb Enter Service Worker
@onishiweb Web vs Native!
@onishiweb The web is going offline!
@onishiweb Browser cache
@onishiweb @onishiweb
@onishiweb Register service worker Cache content Response Request Render Usable
website
@onishiweb Cache Request Render Usable website Service worker Network
@onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //
Registration was successful console.log('ServiceWorker registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }
@onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //
Registration was successful console.log('ServiceWorker registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('ServiceWorker registration failed: ', err); }); }
@onishiweb if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/worker.js') .then(function(registration) { //
Registration was successful console.log('ServiceWorker registered: ', registration.scope); }) .catch(function(err) { // registration failed :( console.log('ServiceWorker 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('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('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) { // Cache
hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
@onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache
hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
@onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache
hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
@onishiweb self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) .then(function(response) { // Cache
hit - return response if (response) { return response; } return fetch(event.request); } ) ); });
@onishiweb
@onishiweb https://jakearchibald.com/2014/offline-cookbook/
@onishiweb Tricky bits
@onishiweb Development flow https://www.chromium.org/blink/serviceworker/getting-started#TOC- Development-flow
@onishiweb chrome://inspect/#service-workers @onishiweb
@onishiweb chrome://serviceworker-internals/ @onishiweb
@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 Progressively enhancing the network
@onishiweb Browser support…
@onishiweb https://jakearchibald.github.io/isserviceworkerready/
@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 New shiny!
@onishiweb @onishiweb Thanks