Pro Yearly is on sale from $80 to $50! »

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. Super fast WordPress themes

  2. Trevan Hetzel @trevanhetzel trevan.co

  3. Beautiful WordPress hosting built for designers

  4. Super fast WordPress themes

  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. None
  24. Don’t scale images in HTML

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

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

  27. <img src=“img-321x226.png” width=“321” height="226">

  28. What about retina & responsive design?

  29. <picture>

  30. <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>
  31. https://wordpress.org/plugins/ricg-responsive-images/

  32. Lazy load

  33. None
  34. • Reduce the amount of images used • Sprite •

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

  36. Is it necessary?

  37. Okay then, concatenate & minify

  38. Write performant code

  39. Defer loading of scripts

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

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

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

  43. Script loaders

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

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

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

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

    • Write performant JS • Defer loading Summary
  48. CSS

  49. Follow some sort of standard

  50. Concatenate & minify

  51. None
  52. Stylesheets go in the <head>

  53. But Google says…

  54. Google’s right. Inline critical CSS

  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
  56. <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>

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

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

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

  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>
  61. But, but, inline styles aren’t cacheable…

  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; ?>
  63. • Use a CSS methodology or standard • Concatenate •

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