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

1. DELIVERING RESPONSIBLY SCOTT JEHL

2. Responding

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

4. Basic Enhanced

5. Foremost: We Must Deliver. Speed broadens access.

6. Performance Priorities Speed broadens access.

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

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

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

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

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. Lightening our load

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

14. Don’t just optimize images; Make them responsive!

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. Reduce Framework Bloat Reduce dependencies, make custom library builds, and UnCSS what you can.

17. Optimizing Assets: A Lesser Concern?

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. Prioritizing for progressive rendering

20. The Critical Path Heading Heading

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. Detours on the path to a usable render HTML CSS JS CSS JS Blank page }

23. Stay on that critical path!

24. http://webpagetest.org

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

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

27. “The fold” varies across devices...

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

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. https://github.com/filamentgroup/grunt-criticalcss

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. Inlining your “critical” code Load the rest in a non-blocking manner

33. First the CSS

34. <style> body { font-family: sans-serif; } div.foo { … </style> Inlining critical CSS ... </head> <head> ...

35. <style> <% include “path/to/critical/template.css” %> </style> Inlining critical CSS ... </head> <head> ...

36. <link rel=”preload” href=“all.css”> Fetching the full CSS

37. <link rel=”preload” href=“all.css” onload=“this.rel=‘stylesheet’”> Applying the full CSS

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

39. <style> <% include "critical.css" %> </style> <script> <% include "initial.js" %> </script> Critical JS, inlined ... </head> <head> ...

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

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. function preloadSupport(){ var link = document.createElement('link'); link.rel = 'PRELOAD'; return link.rel == 'preload'; } Detecting rel=preload support

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. 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. <script src=”enhancements.js” async defer></script> Or, async/defer is a good option…

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

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. Avoiding the FOIT.

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

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

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

52. Progressive font rendering Standard Optimized

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

54. Perceived Performance Case Study

55. 3G/Chrome First Usable Render: ~12.5 secs

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 ﬁrst)

57. 3G/Chrome First Usable Render: 3.9 secs

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

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. Looking Ahead

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. HTTP/2 means no more: • Inlining CSS, JS, or images • Concatenating CSS & JavaScript ﬁles • Domain Sharding • Image sprites

63. This won’t happen overnight.

64. Delivering responsibly is our job.

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