Super Fast WordPress Themes: WordCamp Omaha, 2015

Super Fast WordPress Themes: WordCamp Omaha, 2015

73670d6ae48069abb9c0483d2436c34e?s=128

Trevan Hetzel

October 10, 2015
Tweet

Transcript

  1. 5.

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

    front-end. Start there.” - Steve Souders
  2. 6.

    Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce

    cookies Dedicated host Minify HTML Database queries
  3. 7.

    Caching headers Server-side caching CDN Images CSS JavaScript GZIP Reduce

    cookies Dedicated host Minify HTML Transients Database queries
  4. 10.
  5. 12.
  6. 13.
  7. 14.
  8. 16.
  9. 18.
  10. 19.
  11. 20.
  12. 21.
  13. 23.
  14. 29.
  15. 32.
  16. 33.
  17. 34.

    • Reduce the amount of images used • Sprite •

    Compress • Don’t scale in HTML • Lazy load Summary
  18. 44.

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

    = document.getElementsByTagName('script')[0]; script.parentNode.insertBefore(resource, script); </script>
  19. 46.

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

    ){ ... } // load a file with loadJS loadJS( "path/to/script.js" ); </script> ... </head>
  20. 47.

    • Don’t overuse libraries & frameworks • Concatenate • Minify

    • Write performant JS • Defer loading Summary
  21. 48.

    CSS

  22. 51.
  23. 55.

    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
  24. 57.

    How to find critical CSS • critical by Addy Osmani

    • grunt-criticalcss by Filament Group
  25. 60.

    <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>
  26. 62.

    <?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; ?>
  27. 63.

    • Use a CSS methodology or standard • Concatenate •

    Minify • Inline critical CSS • Load full stylesheet asynchronously Summary