Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wicked Fast Website: Website Creation Workshop

Wicked Fast Website: Website Creation Workshop

Fast websites make more money, get more traffic, rank higher in Google, and have stronger brand loyalty. Your server, your theme, the way you load files—they all have an impact on how fast (or slow) your WordPress site is.

This talk provides you with a blueprint for building insanely fast WordPress sites, and a framework for analyzing web performance and advocating it to clients and managers. It covers everything from browser quirks to file optimization to server settings. You’ll learn:

- Why web performance matters.
- The right way to measure web performance.
- Annoying browser quirks (and how to fix them).
- How to reduce page weight for faster load times.
- Server optimizations that boost web performance.

Learn everything you need to know about building wicked fast WordPress sites.

Chris Ferdinandi

November 09, 2016
Tweet

More Decks by Chris Ferdinandi

Other Decks in Programming

Transcript

  1. How to build WordPress sites 
 that load in under

    1 second WICKED FAST WEBSITES $ @ChrisFerdinandi ! GoMakeThings.com
  2. 20% decrease in search traffic from just a 500ms delay

    Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
  3. 1% loss in sales from just a 100ms delay Source:

    www.slideshare.net/stubbornella/designing-fast-websites-presentation
  4. £8M increase in customer spend from 
 a 300ms reduction

    in latency Source: https://www.youtube.com/watch?v=ai-6qwT6ES8
  5. 80% increase in traffic after 
 reducing load time by

    80% Source: http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
  6. 15.4% increase in downloads after reducing page load time by

    2.2 seconds Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
  7. 31% AMERICANS WHO HAVE PRIMARILY ACCESSED THE WEB via a

    mobile device in 2012 Source: blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
  8. 40% of visitors will leave your site if it takes

    more than 3 seconds to load Source: https://blog.kissmetrics.com/loading-time/
  9. 53% of mobile visitors will leave your site if it

    takes more than 3 seconds to load Source: https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
  10. 74% of visitors will leave your site if it takes

    more than 5 seconds to load Source: http://bradfrost.com/blog/post/performance-as-design/
  11. 1 Measuring Web Performance 2 Annoying Browser Quirks 3 Reducing

    Page Weight 4 Server Optimizations 5 Q&A
  12. TARGET PERFORMANCE
 Time to First Byte
 100ms - 300ms Start

    Render Cable: 1,000ms 3g: 3,000ms EDGE: 5,000ms
  13. This is fixed in HTTP2 (but browser and host support

    isn’t large enough yet) Source: https://www.youtube.com/watch?v=fJ0C4zN5uOQ
  14. Browsers only download 2 files at a time (except JavaScript

    files, which block all other downloads)
  15. // Load theme scripts function load_theme_scripts() { // Feature detects

    wp_enqueue_script( 'theme-detects', get_template_directory_uri() . '/dist/js/detects.js', null, null, false ); // Main scripts wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/dist/js/main.js', null, null, true ); } add_action('wp_enqueue_scripts', 'load_theme_scripts');
  16. // Load theme scripts function load_theme_scripts() { // Feature detects

    wp_enqueue_script( 'theme-detects', get_template_directory_uri() . '/dist/js/detects.js', null, null, false ); // Main scripts wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . '/dist/js/main.js', null, null, true ); } add_action('wp_enqueue_scripts', 'load_theme_scripts');
  17. Annoying Browser Quirks • Combine files (concatenation) • Load JS

    in the footer • Remove whitespace (minification) Reduce Page Weight • Pick the right image format • Smush and compress images • Use responsive images DO ALL THE THINGS Server Optimizations • Enable gzip • Use a caching plugin
  18. TARGET PERFORMANCE
 Time to First Byte
 100ms - 300ms Start

    Render Cable: 1,000ms 3g: 3,000ms EDGE: 5,000ms
  19. ?