Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015

DELIVERING
RESPONSIBLY
SCOTT JEHL

https://www.flickr.com/photos/adactio/6153522068/

Foremost:
We Must Deliver.
Speed broadens access.

Performance Priorities
Speed broadens access.

Not just a matter of empathy.
Access is our job.

More people access Facebook
over 2G than 4G.
https://twitter.com/BenedictEvans/status/513017790920290304
Benedict Evans

https://www.flickr.com/photos/lacantine/6234723672/

https://fbnewsroomus.files.wordpress.com/2015/02/state-of-connectivity1.pdf

Average webpage: 2 Megabytes!
5%
61kb
152kb
61kb
318kb
1,297kb
IMG JS CSS OTHER HTML FONTS
http://httparchive.org/interesting.php?a=All&l=Apr%2015%202015

Optimizing everything that you can.
Easy, classic performance optimizations:
Optimize, Minify, Gzip

Don’t just optimize images;
Make them responsive!

<img src="small.jpg" srcset="large.png 2x" alt="…">
!
!
<picture>
<source srcset="large.png" media="(min-width: 800px)">
<source srcset="medium.jpg" media="(min-width: 400px)">
<img src="small.jpg" alt="…">
</picture>
Srcset & Picture
http://scottjehl.github.io/picturefill/

Reduce Framework Bloat
Reduce dependencies, make custom library builds, and UnCSS what you can.

Optimizing Assets:
A Lesser Concern?

“when it comes to your web browsing experience,
it turns out that latency, not bandwidth, is
likely the constraining factor today.
Ilya Grigorik
https://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/

Prioritizing for progressive rendering

The Critical Path
Heading Heading

Detours on the path to a usable render
HTML CSS
JS
CSS
JS
Blank page
}

Sub-1 Second Render:
Cram your initial view into the first 14kb of your HTML

“
Identify and “inline” the CSS necessary for
rendering the above-the-fold content
PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

“The fold”
varies across devices...

http://paul.kinlan.me/detecting-critical-above-the-fold-css/

Original CSS
h1 { font-size: 1.2em; col… }
h2 { margin: 0; }
ol { color: red; }
li { color: blue; backgrou… }
li:hover { color: purple; … }
li:first-child { color: gr… }
li:last-child { color: pin… }
.footer { border-top: 1px … }
.copyright { font-size: 1.… }
h1 { font-size: 1.2em; col… }
h2 { margin: 0; }
ol { color: red; }
li { color: blue; backgrou… }
li:first-child { color: gr… }
Critical CSS

https://github.com/filamentgroup/grunt-criticalcss

criticalcss: {
home: {
options: {
outputfile : 'css/critical/critical-home.css',
filename : 'all.css',
url : 'http://fgwebsite.local'
}
},
services: {
options: {
outputfile : 'css/critical/critical-services.css',
filename : 'all.css',
url : 'http://fgwebsite.local/services/'
}
Critical CSS Configuration

Inlining your “critical” code
Load the rest in a non-blocking manner

Next, inline the critical JavaScript
If you have any...

Which JavaScript is “critical?”
• Ideally, none!
• functions for loading additional assets
• Feature tests? Important polyﬁlls?
• Conditional logic for loading ﬁles

function loadCSS( href ){
var ss = window.document.createElement( "link" );
var ref = window.document.getElementsByTagName( "script" )[ 0 ];
ss.rel = "stylesheet";
ss.href = href;
ss.media = "only x";
ref.parentNode.insertBefore( ss, ref );
setTimeout( function(){
ss.media = "all";
} );
}
loadCSS( “/path/to/all.css” );
!
An async CSS loader for non-critical CSS

function preloadSupport(){
var link = document.createElement('link');
link.rel = 'PRELOAD';
return link.rel == 'preload';
}
Detecting rel=preload support

function loadJS( src ){
var js = document.createElement( "script" ),
ref = document.getElementsByTagName( "script" )[ 0 ];
js.src = src;
js.async = true;
ref.parentNode.insertBefore( js, ref );
}
// load a script!
loadJS( “/path/to/enhancements.js” );
A simple async. script file loader

!
if( document.querySelector && document.addEventListener ){
loadJS( "enhancements.js" );
}
…but dynamic loaders let you cut the mustard
...
</script>
</head>
<head>
<script>
...

http://www.filamentgroup.com/lab/font-events.html

Enabling fonts once loaded
h2 {
font-family: sans-serif;
}
.fonts-loaded h2 {
font-family: “Source Sans Pro", sans-serif;
}

Enabling fonts once loaded
new w.FontFaceObserver( "Source Sans Pro” )
.check()
.then( function(){
document.documentElement.className += " fonts-loaded";
});

Progressive font rendering
Standard
Optimized

Coming soon: CSS-based font-rendering!
@font-face {
font-family: foo;
...
}
body > h1 {
font-family: foo;
font-rendering: swap 3s;
}

Perceived Performance
Case Study

3G/Chrome First Usable Render: ~12.5 secs

Optimizations Made:
• Extract and Inline “Critical” CSS
• Load full CSS asynchronously
• Load scripts asynchronously (ads too!)
• Load fonts asynchronously
• Style fallback fonts to match custom font sizes
• Use font loading APIs to swap-in custom fonts once
loaded (allow fallback text to show ﬁrst)

3G/Chrome First Usable Render: 3.9 secs

Wired.com rendering: before & after
3.9 secs 12.5 secs

weight does not need to increase wait
How we load stuff matters more than how much stuff we load
http://www.filamentgroup.com/lab/weight-wait.html

“if you have ever inlined a resource
(CSS, JS, or an image), you've been
"simulating" server push
Ilya Grigorik
https://www.igvita.com/2013/06/12/innovating-with-http-2.0-server-push/

HTTP/2 means no more:
• Inlining CSS, JS, or images
• Concatenating CSS & JavaScript ﬁles
• Domain Sharding
• Image sprites

This won’t happen
overnight.

Delivering responsibly
is our job.

Thanks!
@scottjehl, http://filamentgroup.com

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015

Ähnlich wie Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015 (20)

Mehr von beyond tellerrand

Mehr von beyond tellerrand (6)

Kürzlich hochgeladen

Kürzlich hochgeladen (17)

Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015