Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end Performance: NebraskaJS, 2015

Front-end Performance: NebraskaJS, 2015

Trevan Hetzel

June 02, 2015
Tweet

More Decks by Trevan Hetzel

Other Decks in Technology

Transcript

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

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

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

    cookies Dedicated host Minify HTML Transients Database queries
  4. • Reduce the amount of images used • Sprite •

    Compress • Don’t scale in HTML • Lazy load Summary
  5. <script> var resource = document.createElement('script'); resource.src = "app.js"; var script

    = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(resource, script); </script>
  6. <head> ... <script> // include loadJS here... function loadJS( src

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

    • Write performant JS • Defer loading Summary
  8. CSS

  9. 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
  10. How to find critical CSS • critical by Addy Osmani

    • grunt-criticalcss by Filament Group
  11. <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>
  12. <?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; ?>
  13. • Use a CSS methodology or standard • Concatenate •

    Minify • Inline critical CSS • Load full stylesheet asynchronously Summary