Super Fast WordPress Themes: WordCamp Minneapolis, 2015

Super Fast WordPress Themes: WordCamp Minneapolis, 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

April 26, 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. getflywheel.com 75% increase in speed

  7. Before After

  8. None
  9. Because SEO. 
 Because ACCESSIBILITY.
 
 


  10. whatdoesmysitecost.com

  11. Because SEO. 
 Because ACCESSIBILITY. 
 Because MONEY.
 


  12. Because SEO. 
 Because ACCESSIBILITY.
 Because MONEY.
 Because SPEEEEED.

  13. The most valuable metric

  14. Perceived performance Performance should be thought of in terms of

    both quantitative measured time AND how a page is perceived.
  15. Fill your testing tool belt

  16. Tools

  17. 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
  18. 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)
  19. WebPageTest

  20. Developer tools

  21. Let’s dive in

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

    the front-end. Start there.” - Steve Souders
  23. Images

  24. Use sprites • Minimizes requests

  25. Compress • Photoshop is not good enough • TinyPNG, OptiPNG,

    ImageOptim, jpegtran • Use a WP plugin if needed
  26. Resize • Don’t make the browser resize images • Only

    load the size necessary for the current viewport • The new picture element and its attributes are great for this
  27. Picturefill • A polyfill from Scott Jehl & the RICG

    for <picture> • Picturefill
  28. RICG Responsive Images WP Plugin • Yay, there’s a plugin

    for this! • https://wordpress.org/plugins/ricg-responsive- images/
  29. JavaScript

  30. Determine necessities • Be leery of plugins • jQuery is

    not always necessary
  31. Concatenate & Minify • Serve as few JavaScript files as

    possible, by concatenating • Use Uglify to minify • Task runners work like magic for these tasks
  32. Load smart • Scripts go before closing <body> tag

  33. Load smart <head> </head> <body> <!— sweet markup —> <script

    src=“app.js”></script> </body>
  34. Load smart • Scripts go before closing <body> tag •

    Defer loading of JS where possible • loadJS • Use defer and async attributes
  35. Load smart • Concatenate • Minify • Load smart

  36. CSS

  37. Concatenate & Minify • Serve as few CSS files as

    possible, by concatenating • Using Sass is beneficial • Compression (removing whitespace) • Task runners work like magic for these tasks
  38. Compress

  39. Load smart • The foolproof way is to serve stylesheets

    in the head • However, this blocks the loading of other resources • Enter “critical CSS”
  40. • 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 (loadCSS is perfect for this) • critical by Addy Osmani • grunt-criticalcss by Filament Group Critical CSS
  41. Caching headers

  42. Caching headers

  43. Caching headers • Expires and max-age • Instructs the browser

    to load already downloaded assets • Tell the browser when to stop caching • Far Future Expiry Header WP plugin
  44. CDN

  45. CDN • Delivers content to the user from the closest

    and fastest server available • Your assets are hosted on a network of servers throughout the world
  46. The other 20%

  47. Time To First Byte

  48. “The duration from the user making an HTTP request to

    the first byte of the page being received by the browser”
  49. Host Managed WP hosts provide: • Security • Nginx •

    Robust caching • And much more
  50. Caching • Different from the browser cache • Stores your

    posts and pages as static files
  51. GZIP • A file format used for compression

  52. Theme logic • Write performant PHP • Reduce calls to

    the database • Use transients
  53. Plugins • Plugins can dramatically slow down your TTFB •

    Be cautious • Quantity is not bad, but poor quality is • Watch for database queries and complex operations • Watch for assets loaded by plugins • P3 Profiler
  54. Thanks! @trevanhetzel trevan.co