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. 6.
  2. 13.
  3. 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
  4. 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)
  5. 21.

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

    the front-end. Start there.” - Steve Souders
  6. 22.

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

    cookies Dedicated host Minify HTML Transients Database queries
  7. 23.

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

    cookies Dedicated host Minify HTML Transients Database queries
  8. 25.
  9. 27.
  10. 28.
  11. 29.
  12. 30.
  13. 31.
  14. 33.
  15. 34.
  16. 39.
  17. 47.
  18. 52.

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

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

    CSS

  20. 58.
  21. 59.
  22. 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
  23. 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>
  24. 67.