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.
Internet
Jun. 08, 2015
1,938 views

Share

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

Download to read offline

Internet
Jun. 08, 2015
1,938 views

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.

Recommended

Related Books

Free with a 30 day trial from Scribd

See all
In the Plex: How Google Thinks, Works, and Shapes Our Lives Steven Levy
(4.5/5)
Free
Hamlet's BlackBerry: A Practical Philosophy for Building a Good Life in the Digital Age William Powers
(4/5)
Free
Tubes: A Journey to the Center of the Internet Andrew Blum
(4/5)
Free
Emergence: The Connected Lives of Ants, Brains, Cities, and Software Steven Johnson
(4.5/5)
Free
The Impulse Economy: Understanding Mobile Shoppers and What Makes Them Buy Gary Schwartz
(4.5/5)
Free
An Army of Davids: How Markets and Technology Empower Ordinary People to Beat Big Media, Big Government, and Other Goliaths Glenn Reynolds
(4/5)
Free
World Wide Mind: The Coming Integration of Humanity, Machines, and the Internet Michael Chorost
(4/5)
Free
Blog Schmog: The Truth About What Blogs Can (and Can't) Do for Your Business Robert W. Bly
(4/5)
Free
The End of Business As Usual: Rewire the Way You Work to Succeed in the Consumer Revolution Brian Solis
(5/5)
Free
Talking Back to Facebook: The Common Sense Guide to Raising Kids in the Digital Age James P. Steyer
(4.5/5)
Free
The Thank You Economy Gary Vaynerchuk
(4/5)
Free
Socialnomics: How Social Media Transforms the Way We Live and Do Business Erik Qualman
(3/5)
Free
Public Parts: How Sharing in the Digital Age Improves the Way We Work and Live Jeff Jarvis
(3.5/5)
Free
The Nature of the Future: Dispatches from the Socialstructed World Marina Gorbis
(4/5)
Free
The Hacker Crackdown: Law and Disorder on the Electronic Frontier Bruce Sterling
(4/5)
Free
The Internet Trap: How the Digital Economy Builds Monopolies and Undermines Democracy Matthew Hindman
(0/5)
Free

Related Audiobooks

Free with a 30 day trial from Scribd

See all
Exploding Data: Reclaiming Our Cyber Security in the Digital Age Michael Chertoff
(4/5)
Free
Internet Riches: The Simple Money-Making Secrets of Online Millionaires Scott Fox
(4/5)
Free
Hacker, Hoaxer, Whistleblower, Spy: The Many Faces of Anonymous Gabriella Coleman
(4/5)
Free
Cyberwar: How Russian Hackers and Trolls Helped Elect a President—What We Don't, Can't, and Do Know Kathleen Hall Jamieson
(3/5)
Free
The Secret Life: Three True Stories of the Digital Age Andrew O'Hagan
(4/5)
Free
Blockchain Revolution: How the Technology Behind Bitcoin Is Changing Money, Business, and the World Don Tapscott
(4/5)
Free
Stop Checking Your Likes: Shake Off the Need for Approval and Live an Incredible Life Susie Moore
(4/5)
Free
So You Want to Start a Podcast: Finding Your Voice, Telling Your Story, and Building a Community that Will Listen Kristen Meinzer
(4.5/5)
Free
Ten Arguments for Deleting Your Social Media Accounts Right Now Jaron Lanier
(4.5/5)
Free
Instagram for Business for Dummies: 2nd Edition Jenn Herman
(0/5)
Free
Who Owns the Future? Jaron Lanier
(4/5)
Free
Kill All Normies: Online Culture Wars From 4Chan And Tumblr To Trump And The Alt-Right Angela Nagle
(4/5)
Free
The Art of Social Media: Power Tips for Power Users Guy Kawasaki
(4/5)
Free
The Dark Net: Inside the Digital Underworld Jamie Bartlett
(3.5/5)
Free
This Machine Kills Secrets: How Wikileakers, Cypherpunks, and Hacktivists Aim to Free the World's Information Andy Greenberg
(4/5)
Free
The Joy of Search: A Google Insider's Guide to Going Beyond the Basics Daniel M. Russell
(4.5/5)
Free

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

×