Front-end Performance: NebraskaJS, 2015

Front-end Performance: NebraskaJS, 2015

73670d6ae48069abb9c0483d2436c34e?s=128

Trevan Hetzel

June 02, 2015
Tweet

Transcript

  1. Front-end performance or, how to make websites load super fast

  2. Trevan Hetzel @trevanhetzel trevan.co

  3. Beautiful WordPress hosting built for designers

  4. Front-end performance or, how to make websites load super fast

  5. “80-90% of the end-user response time is spent on the

    front-end. Start there.” - Steve Souders
  6. Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce

    cookies Dedicated host Minify HTML Database queries
  7. Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce

    cookies Dedicated host Minify HTML Transients Database queries
  8. Perceived performance The most valuable metric

  9. How fast a user thinks your site loads

  10. None
  11. Test yourself before you wreck yourself

  12. None
  13. Images

  14. None
  15. No really, use CSS or icon fonts

  16. Sprite

  17. 5kb 4kb 4kb 3kb 6kb 5kb 5kb 3kb 6kb ✗

  18. 14kb ✓

  19. None
  20. Compress

  21. None
  22. OptiPNG PNGGauntlet

  23. Don’t scale images in HTML

  24. <img srcset=“img-1280x800.png” width=“321” height="226">

  25. <img srcset=“img-1280x800.png” width=“321” height="226">

  26. <img srcset=“img-321x226.png” width=“321” height="226">

  27. What about retina & responsive design?

  28. <picture>

  29. <picture> <source srcset=“examples/images/extralarge.jpg" media="(min-width: 1000px)"> <source srcset="examples/images/large.jpg" media="(min-width: 800px)"> <img

    srcset=“examples/images/medium.jpg" alt="Description"> </picture>
  30. Lazy load

  31. None
  32. • Reduce the amount of images used • Sprite •

    Compress • Don’t scale in HTML • Lazy load Summary
  33. JavaScript

  34. Is it necessary?

  35. Okay then, concatenate & minify

  36. Write performant code

  37. Defer loading of scripts

  38. <head> </head> <body> <!— sweet markup —> <script src=“app.js”></script> </body>

  39. <head> <script defer src=“app1.js”></script> </head> <body> </body>

  40. <head> <script async src=“app.js”></script> </head> <body> </body>

  41. Script loaders

  42. <script> var resource = document.createElement('script'); resource.src = "app.js"; var script

    = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(resource, script); </script>
  43. https://github.com/filamentgroup/loadJS loadJS

  44. <head> ... <script> // include loadJS here... function loadJS( src

    ){ ... } // load a file with loadJS loadJS( "path/to/script.js" ); </script> ... </head>
  45. • Don’t overuse libraries & frameworks • Concatenate • Minify

    • Write performant JS • Defer loading Summary
  46. CSS

  47. Follow some sort of standard

  48. Concatenate & minify

  49. None
  50. Stylesheets go in the <head>

  51. But Google says…

  52. Google’s right. Inline critical CSS

  53. Critical CSS Styles that are needed for the first, above-the-fold

    view are inlined in the <head> The full stylesheet is then loading asynchronously, not blocking the rest of the page
  54. <head> <style>*{box-sizing:border-box}html{padding: 1em;background-color:#f4d93a}body{font- family:’Helvetica Neue',sans-serif; padding:0;margin:0;font-size:100%;line-height: 140%; ... </style> </head>

  55. How to find critical CSS • critical by Addy Osmani

    • grunt-criticalcss by Filament Group
  56. What about the full stylesheet?

  57. https://github.com/filamentgroup/loadCSS loadCSS

  58. <head> ... <script> // include loadCSS here... function loadCSS( href,

    before, media ){ ... } // load a file loadCSS( "path/to/mystylesheet.css" ); </script> <noscript> <link href=“path/to/mystylesheet.css” rel=“stylesheet"> </noscript> ... </head>
  59. But, but, inline styles aren’t cacheable…

  60. <?php if(isset($_COOKIE['critical_css'])): ?> <link href=“path/to/style.css" rel="stylesheet"> <?php elseif: ?> <style><!--

    Critical styles go here --></style> <script> // include loadCSS here... function loadCSS( href, before, media ){ ... } // load a file loadCSS( "path/to/mystylesheet.css" ); </script> <noscript> <link href=“path/to/style.css” rel=“stylesheet”> </noscript> // Set cookie here <?php endif; ?>
  61. • Use a CSS methodology or standard • Concatenate •

    Minify • Inline critical CSS • Load full stylesheet asynchronously Summary
  62. Thanks! @trevanhetzel trevan.co