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

1,187 views

Published on

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.

Published in: Internet
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,187
On SlideShare
0
From Embeds
0
Number of Embeds
86
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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

×