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

Wicked Fast Websites: WordCamp RI 2016

Wicked Fast Websites: WordCamp RI 2016

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

September 28, 2016
Tweet

More Decks by Chris Ferdinandi

Other Decks in Technology

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. <link rel="stylesheet" href="style.css"> <link rel="stylesheet" media="(min-width: 20em)" href="phone.css"> <link rel="stylesheet"

    media="(min-width: 40em)" href="tablet.css"> <link rel="stylesheet" media="(min-width: 60em)" href="desk.css">
  15. Browsers download all files regardless of screen size <link rel="stylesheet"

    href="style.css"> <link rel="stylesheet" media="(min-width: 20em)" href="phone.css"> <link rel="stylesheet" media="(min-width: 40em)" href="tablet.css"> <link rel="stylesheet" media="(min-width: 60em)" href="desk.css">
  16. <link rel="stylesheet" href="style.css"> .base-styles { … } @media (min-width: 20em)

    { … } @media (min-width: 40em) { … } @media (min-width: 60em) { … }
  17. Browsers only download 2 files at a time (except JavaScript

    files, which block all other downloads)
  18. // 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');
  19. // 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');
  20. “Mobile browsers will wait approximately 300ms from the time that

    you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.” –Google
  21. /** * Remove the tap delay in webkit and IE

    */ a, button, input, select, textarea, label, summary { touch-action: manipulation; }
  22. // Load theme files function load_theme_files() { // 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_files');
  23. // Load theme files function load_theme_files() { // 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_files');
  24. // Load theme files function load_theme_files() { // Feature detects

    wp_enqueue_script( 'theme-detects', get_template_directory_uri() . ‘/dist/js/detects.min.js', null, null, false ); // Main scripts wp_enqueue_script( 'theme-scripts', get_template_directory_uri() . ‘/dist/js/main.min.js', null, null, true ); } add_action('wp_enqueue_scripts', 'load_theme_files');
  25. BROWSER FOREGROUND BACKGROUND Chrome Firefox IE 8 IE 9 Safari

    Opera BROWSER “SUPPORT” Source: http://calendar.perfplanet.com/2012/progressive-jpegs-a-new-best-practice/
  26. Annoying Browser Quirks • Combine files (concatenation) • Load JS

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

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