TDC2017 | Florianopolis - Trilha DevOps How we figured out we had a SRE team ...
Your SlideShare is downloading.
×
![function loadJS( src ){
var js = document.createElement( "script" ),
ref = document.getElementsByTagName( "script" )[ 0 ];...](https://image.slidesharecdn.com/scott-jehl-btconf-deliveringresponsibly-150608080913-lva1-app6892/75/scott-jehl-delivering-responsibly-beyond-tellerrand-dsseldorf-2015-44-2048.jpg?cb=1669264805)
Check these out next
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 polyfills? • Conditional logic for loading files
- 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 first)
- 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 files • Domain Sharding • Image sprites
- 63. This won’t happen overnight.
- 64. Delivering responsibly is our job.
- 65. Thanks! @scottjehl, http://filamentgroup.com
