Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
DELIVERING
RESPONSIBLY
SCOTT JEHL
Responding
https://www.flickr.com/photos/adactio/6153522068/
Basic Enhanced
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/interest...
Lightening our load
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)">
<...
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 facto...
Prioritizing for progressive rendering
The Critical Path
Heading Heading
<link rel="stylesheet" href="a.css">
<link rel="stylesheet" href="fonts.css">
<script src="a.js"></script>
<script src="b....
Detours on the path to a usable render
HTML CSS
JS
CSS
JS
Blank page
}
Stay on that
critical path!
http://webpagetest.org
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.g...
“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 { c...
https://github.com/filamentgroup/grunt-criticalcss
criticalcss: {
home: {
options: {
outputfile : 'css/critical/critical-home.css',
filename : 'all.css',
url : 'http://fgweb...
Inlining your “critical” code
Load the rest in a non-blocking manner
First the CSS
<style>
body {
font-family: sans-serif;
}
div.foo {
…
</style>
Inlining critical CSS
...
</head>
<head>
...
<style>
<% include “path/to/critical/template.css” %>
</style>
Inlining critical CSS
...
</head>
<head>
...
<link rel=”preload” href=“all.css”>
Fetching the full CSS
<link rel=”preload” href=“all.css”
onload=“this.rel=‘stylesheet’”>
Applying the full CSS
Next, inline the critical JavaScript
If you have any...
<style>
<% include "critical.css" %>
</style>
<script>
<% include "initial.js" %>
</script>
Critical JS, inlined
...
</hea...
Which JavaScript is “critical?”
• Ideally, none!
• functions for loading additional assets
• Feature tests? Important poly...
function loadCSS( href ){
var ss = window.document.createElement( "link" );
var ref = window.document.getElementsByTagName...
function preloadSupport(){
var link = document.createElement('link');
link.rel = 'PRELOAD';
return link.rel == 'preload';
...
<link rel=”preload” href=“all.css” id=“allCSS”
onload=“this.rel=‘stylesheet’”>
<script>
function loadCSS(){ … }
function p...
function loadJS( src ){
var js = document.createElement( "script" ),
ref = document.getElementsByTagName( "script" )[ 0 ];...
<script src=”enhancements.js” async defer></script>
Or, async/defer is a good option…
!
if( document.querySelector && document.addEventListener ){
loadJS( "enhancements.js" );
}
…but dynamic loaders let you c...
<style>/* Critical styles go here */ </style>
<link rel=”preload” href=“all.css” as=“stylesheet” id=“allCSS”
onload=“this....
Avoiding the FOIT.
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.documentElemen...
Progressive font rendering
Standard
Optimized
Coming soon: CSS-based font-rendering!
@font-face {
font-family: foo;
...
}
body > h1 {
font-family: foo;
font-rendering: ...
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 ...
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....
Looking Ahead
“if you have ever inlined a resource
(CSS, JS, or an image), you've been
"simulating" server push
Ilya Grigorik
https://ww...
HTTP/2 means no more:
• Inlining CSS, JS, or images
• Concatenating CSS & JavaScript files
• 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
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
Scott Jehl - Delivering Responsibly - beyond tellerrand Düsseldorf 2015
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
Content amid Chaos - beyond tellerrand Dusseldorf 2015
Next
Upcoming SlideShare
Content amid Chaos - beyond tellerrand Dusseldorf 2015
Next
Download to read offline and view in fullscreen.

Share

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

Download to read offline

Building responsively allows us to create flexible user interfaces that support the widest possible audience with a single front-end codebase. But in embracing the ever-increasing contexts in which our sites are used, performance and accessibility must remain our highest priorities; we must continually question each code addition, and improve our delivery and application techniques to ensure they’re best serving users’ needs.

This talk will explore the challenges of creating fast and broadly-accessible websites and offer approaches that dramatically improve performance, usability, access, and sustainability.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. DELIVERING RESPONSIBLY SCOTT JEHL
  2. 2. Responding
  3. 3. https://www.flickr.com/photos/adactio/6153522068/
  4. 4. Basic Enhanced
  5. 5. Foremost: We Must Deliver. Speed broadens access.
  6. 6. Performance Priorities Speed broadens access.
  7. 7. Not just a matter of empathy. Access is our job.
  8. 8. More people access Facebook over 2G than 4G. https://twitter.com/BenedictEvans/status/513017790920290304 Benedict Evans
  9. 9. https://www.flickr.com/photos/lacantine/6234723672/
  10. 10. https://fbnewsroomus.files.wordpress.com/2015/02/state-of-connectivity1.pdf
  11. 11. 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
  12. 12. Lightening our load
  13. 13. Optimizing everything that you can. Easy, classic performance optimizations: Optimize, Minify, Gzip
  14. 14. Don’t just optimize images; Make them responsive!
  15. 15. <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/
  16. 16. Reduce Framework Bloat Reduce dependencies, make custom library builds, and UnCSS what you can.
  17. 17. Optimizing Assets: A Lesser Concern?
  18. 18. “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/
  19. 19. Prioritizing for progressive rendering
  20. 20. The Critical Path Heading Heading
  21. 21. <link rel="stylesheet" href="a.css"> <link rel="stylesheet" href="fonts.css"> <script src="a.js"></script> <script src="b.js"></script> Detours on the path to a usable render ... </head> <head> ...
  22. 22. Detours on the path to a usable render HTML CSS JS CSS JS Blank page }
  23. 23. Stay on that critical path!
  24. 24. http://webpagetest.org
  25. 25. Sub-1 Second Render: Cram your initial view into the first 14kb of your HTML
  26. 26. “ Identify and “inline” the CSS necessary for rendering the above-the-fold content PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
  27. 27. “The fold” varies across devices...
  28. 28. http://paul.kinlan.me/detecting-critical-above-the-fold-css/
  29. 29. 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
  30. 30. https://github.com/filamentgroup/grunt-criticalcss
  31. 31. 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
  32. 32. Inlining your “critical” code Load the rest in a non-blocking manner
  33. 33. First the CSS
  34. 34. <style> body { font-family: sans-serif; } div.foo { … </style> Inlining critical CSS ... </head> <head> ...
  35. 35. <style> <% include “path/to/critical/template.css” %> </style> Inlining critical CSS ... </head> <head> ...
  36. 36. <link rel=”preload” href=“all.css”> Fetching the full CSS
  37. 37. <link rel=”preload” href=“all.css” onload=“this.rel=‘stylesheet’”> Applying the full CSS
  38. 38. Next, inline the critical JavaScript If you have any...
  39. 39. <style> <% include "critical.css" %> </style> <script> <% include "initial.js" %> </script> Critical JS, inlined ... </head> <head> ...
  40. 40. Which JavaScript is “critical?” • Ideally, none! • functions for loading additional assets • Feature tests? Important polyfills? • Conditional logic for loading files
  41. 41. 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
  42. 42. function preloadSupport(){ var link = document.createElement('link'); link.rel = 'PRELOAD'; return link.rel == 'preload'; } Detecting rel=preload support
  43. 43. <link rel=”preload” href=“all.css” id=“allCSS” onload=“this.rel=‘stylesheet’”> <script> function loadCSS(){ … } function preloadSupport(){ … } if( !preloadSupport() ){ loadCSS( document.getElementById( "allCSS" ).href ); } </script> <noscript><link href=“all.css” rel=“stylesheet”></noscript> Polyfilling rel=preload with loadCSS
  44. 44. 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
  45. 45. <script src=”enhancements.js” async defer></script> Or, async/defer is a good option…
  46. 46. ! if( document.querySelector && document.addEventListener ){ loadJS( "enhancements.js" ); } …but dynamic loaders let you cut the mustard ... </script> </head> <head> <script> ...
  47. 47. <style>/* Critical styles go here */ </style> <link rel=”preload” href=“all.css” as=“stylesheet” id=“allCSS” onload=“this.rel=‘stylesheet’”> <script> /* some functions go here… */ if( !preloadSupport() ){ loadCSS( document.getElementById( "allCSS" ).href ); } if( browserCutsTheMustard ){ loadJS( "enhancements.js" ); } </script> <noscript><link href=“all.css” rel=“stylesheet”></noscript>
  48. 48. Avoiding the FOIT.
  49. 49. http://www.filamentgroup.com/lab/font-events.html
  50. 50. Enabling fonts once loaded h2 { font-family: sans-serif; } .fonts-loaded h2 { font-family: “Source Sans Pro", sans-serif; }
  51. 51. Enabling fonts once loaded new w.FontFaceObserver( "Source Sans Pro” ) .check() .then( function(){ document.documentElement.className += " fonts-loaded"; });
  52. 52. Progressive font rendering Standard Optimized
  53. 53. Coming soon: CSS-based font-rendering! @font-face { font-family: foo; ... } body > h1 { font-family: foo; font-rendering: swap 3s; }
  54. 54. Perceived Performance Case Study
  55. 55. 3G/Chrome First Usable Render: ~12.5 secs
  56. 56. 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 first)
  57. 57. 3G/Chrome First Usable Render: 3.9 secs
  58. 58. Wired.com rendering: before & after 3.9 secs 12.5 secs
  59. 59. 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
  60. 60. Looking Ahead
  61. 61. “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/
  62. 62. HTTP/2 means no more: • Inlining CSS, JS, or images • Concatenating CSS & JavaScript files • Domain Sharding • Image sprites
  63. 63. This won’t happen overnight.
  64. 64. Delivering responsibly is our job.
  65. 65. Thanks! @scottjehl, http://filamentgroup.com
  • spike3004

    Oct. 15, 2015
  • LaurenTate2

    Oct. 15, 2015

Building responsively allows us to create flexible user interfaces that support the widest possible audience with a single front-end codebase. But in embracing the ever-increasing contexts in which our sites are used, performance and accessibility must remain our highest priorities; we must continually question each code addition, and improve our delivery and application techniques to ensure they’re best serving users’ needs. This talk will explore the challenges of creating fast and broadly-accessible websites and offer approaches that dramatically improve performance, usability, access, and sustainability.

Views

Total views

1,938

On Slideshare

0

From embeds

0

Number of embeds

95

Actions

Downloads

10

Shares

0

Comments

0

Likes

2

×