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

Super Fast WordPress Themes: WordCamp Maine, 2015

Super Fast WordPress Themes: WordCamp Maine, 2015

Today’s web users have the need for speed. With internet and cellular connections getting faster and faster, users expect sites to feel snappy and not make them wait. We as developers must make sure we’re doing our very best to serve those pages quickly. This talk will focus on the things you should be doing, both on the front-end and back-end, when building WordPress themes.

73670d6ae48069abb9c0483d2436c34e?s=128

Trevan Hetzel

May 16, 2015
Tweet

Transcript

  1. Super fast WordPress themes

  2. Trevan Hetzel @trevanhetzel trevan.co

  3. Beautiful WordPress hosting built for designers

  4. A podcast dedicated to front-end development A podcast dedicated to

    front-end development word-break:
  5. Super fast WordPress themes

  6. None
  7. 300% decrease in load time

  8. Before After

  9. The most valuable metric

  10. Perceived performance

  11. Perceived performance

  12. Test yourself before you wreck yourself

  13. Tools

  14. Pagespeed Insights My go-to tool for examining how optimized your

    site is. Lets you know: • if images need optimized • if scripts and stylesheets are loaded properly • and much more
  15. Pagespeed Insights

  16. WebPageTest • My go-to tool for testing actual performance •

    Speed index is great for measuring perceived performance • Shoot for a low Speed Index (1000 is a good goal)
  17. WebPageTest

  18. Developer tools

  19. whatdoesmysitecost.com

  20. Let’s dive in

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

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

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

    cookies Dedicated host Minify HTML Transients Database queries
  24. Images CSS JavaScript

  25. Images

  26. Before loading

  27. None
  28. Sprite

  29. None
  30. Compress

  31. None
  32. OptiPNG PNGGauntlet

  33. None
  34. Loading

  35. Don’t make the browser resize images

  36. 1280x800 361x226

  37. 361x226 361x226

  38. What about retina & responsive design?

  39. <picture>

  40. <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>
  41. There’s a WP plugin for this!

  42. https://wordpress.org/plugins/ricg-responsive-images/

  43. JavaScript

  44. Before loading

  45. Is it necessary?

  46. Okay then, concatenate & minify

  47. Loading

  48. Defer loading of scripts

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

  50. defer and async

  51. https://github.com/filamentgroup/loadJS loadJS

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

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

  54. Before loading

  55. Follow some sort of standard

  56. OOCSS SMACCSS BEM

  57. Concatenate & minify

  58. None
  59. Loading

  60. Stylesheets go in the <head>

  61. But Google says…

  62. Google’s right. Inline critical CSS

  63. 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
  64. • critical by Addy Osmani • grunt-criticalcss by Filament Group

    Critical CSS tools
  65. https://github.com/filamentgroup/loadCSS loadCSS

  66. <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>
  67. HTTP/2

  68. Thanks! @trevanhetzel trevan.co