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.

Df5f3b6aeb1caacc0acabf2cb45264da?s=128

Chris Ferdinandi

September 28, 2016
Tweet

Transcript

  1. How to build WordPress sites 
 that load in under

    1 second WICKED FAST WEBSITES $ @ChrisFerdinandi ! GoMakeThings.com
  2. (even on cheap, shared hosting)

  3. MILLIONS of dollars in lost revenue slow websites cost businesses

  4. 20% decrease in search traffic from just a 500ms delay

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

    www.slideshare.net/stubbornella/designing-fast-websites-presentation
  6. $254M in lost sales in a single quarter Source: Q3

    2015 Sales Numbers
  7. £8M increase in customer spend from 
 a 300ms reduction

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

    80% Source: http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
  9. 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/
  10. BIGGER websites are getting

  11. BIGGER websites are getting

  12. 600kb average webpage size in 2010 Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/

  13. 1.2mb average webpage size in 2013 Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/

  14. 2.2mb average webpage size in 2016 Source: http://httparchive.org/interesting.php

  15. 2x every three years

  16. Source: www.lukew.com

  17. MOBILE IS THE WEB

  18. None
  19. None
  20. None
  21. 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
  22. Bandwidth is not evenly distributed

  23. None
  24. None
  25. None
  26. MILLIONS of people around the world slow websites are unusable

    for
  27. 40% of visitors will leave your site if it takes

    more than 3 seconds to load Source: https://blog.kissmetrics.com/loading-time/
  28. 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/
  29. 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/
  30. None
  31. THE PERFECT STORM Bigger sites Weaker devices Higher expectations

  32. What can you do about it?

  33. What can you do about it? (Little changes can make

    a big difference.)
  34. None
  35. 1 Measuring Web Performance

  36. 1 Measuring Web Performance 2 Annoying Browser Quirks

  37. 1 Measuring Web Performance 2 Annoying Browser Quirks 3 Reducing

    Page Weight
  38. 1 Measuring Web Performance 2 Annoying Browser Quirks 3 Reducing

    Page Weight 4 Server Optimizations
  39. 1 Measuring Web Performance 2 Annoying Browser Quirks 3 Reducing

    Page Weight 4 Server Optimizations 5 Q&A
  40. SLIDES & DOWNLOADS https://gomakethings.com/talks

  41. Who am I and 
 why should you care? 0

  42. $ @ChrisFerdinandi

  43. ! Go Make Things GoMakeThings.com

  44. None
  45. https://gomakethings.com/wicked-fast-websites

  46. Measuring Web Performance 1

  47. HOW FAST IS FAST ENOUGH?

  48. 1 second Source: https://www.nngroup.com/articles/response-times-3-important-limits/

  49. Total load time and page weight aren’t the right metrics

  50. How do you measure performance?

  51. TIME TO FIRST BYTE
 How quickly your server is sending

    data back to the browser
  52. START RENDER
 How quickly the browser begins displaying content to

    your visitor
  53. Perceived performance matters more than actual performance

  54. http://www.webpagetest.org

  55. TARGET PERFORMANCE
 Time to First Byte
 100ms - 300ms Start

    Render Cable: 1,000ms 3g: 3,000ms EDGE: 5,000ms
  56. Annoying Browser Quirks 2

  57. None
  58. None
  59. None
  60. None
  61. None
  62. FAST 300kb SLOW 100kb 100kb 100kb

  63. DNS LOOKUPS HTTP HEADERS REDIRECTS 404s Lots of places for

    things to go wrong
  64. Browsers only download 2 files at a time

  65. This is fixed in HTTP2 (but browser and host support

    isn’t large enough yet) Source: https://www.youtube.com/watch?v=fJ0C4zN5uOQ
  66. COMBINE FILES Concatenation

  67. svg.js canvas.js

  68. svg.js canvas.js detects.js

  69. dropdowns.js fluidvids.js modals.js svg.js canvas.js detects.js

  70. dropdowns.js fluidvids.js modals.js svg.js canvas.js detects.js main.js

  71. <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">
  72. 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">
  73. <link rel="stylesheet" href="style.css"> .base-styles { … } @media (min-width: 20em)

    { … } @media (min-width: 40em) { … } @media (min-width: 60em) { … }
  74. Don’t use @import.

  75. TOOLS & TECHNIQUES GUIs
 CodeKit Prepos Command Line Gulp Grunt

    Plugins MinQueue Manually
  76. None
  77. https://wordpress.org/plugins/minqueue/

  78. https://wordpress.org/plugins/minqueue/

  79. https://wordpress.org/plugins/minqueue/

  80. JS BLOCKS RENDERING

  81. Browsers only download 2 files at a time (except JavaScript

    files, which block all other downloads)
  82. FILE LOCATION MATTERS Detects in the header Everything else in

    the footer
  83. SPECIFY A LOCATION

  84. // 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');
  85. // 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');
  86. in_footer false = header true = footer

  87. None
  88. https://github.com/cferdinandi/gmt-scripts-to-footer

  89. Tapping is really slow.

  90. “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
  91. None
  92. None
  93. This is why web apps feel so much slower than

    native apps
  94. None
  95. None
  96. SET A VIEWPORT WIDTH

  97. <meta name="viewport" content="width=device-width">

  98. /** * Remove the tap delay in webkit and IE

    */ a, button, input, select, textarea, label, summary { touch-action: manipulation; }
  99. Reducing Page Weight 3

  100. None
  101. These add a lot of weight

  102. REMOVE WHITESPACE Minification

  103. None
  104. 75% reduction in file weight

  105. It’s completely unreadable

  106. main.css main.js

  107. main.css main.min.css main.js main.min.js

  108. main.css main.min.css main.js main.min.js

  109. main.css main.min.css main.js main.min.js

  110. // 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');
  111. // 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');
  112. // 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');
  113. TOOLS & TECHNIQUES GUIs
 CodeKit Prepos Google Pagespeed Insights Command

    Line Gulp Grunt Plugins MinQueue
  114. None
  115. https://wordpress.org/plugins/minqueue/

  116. https://github.com/cferdinandi/gmt-html-minify/

  117. 63.5% of an average webpage’s weight is images Source: http://httparchive.org/interesting.php#bytesperpage

  118. CONFLICTING INTERESTS

  119. High-Density Display CONFLICTING INTERESTS

  120. High-Density Display Low-Bandwidth Computing CONFLICTING INTERESTS

  121. How do you balance these competing interests?

  122. PICK THE RIGHT FORMAT

  123. PNGs Logos Clean, simple images JPGs Photos Noisy images

  124. TEST & MEASURE

  125. SMUSH YOUR IMAGES

  126. SMUSHING Removing all of the metadata associated with an image.

  127. None
  128. TOOLS & TECHNIQUES ImageOptim b64.io

  129. None
  130. None
  131. DIFFERENT JPG FORMATS Baseline Progressive

  132. DIFFERENT JPG FORMATS Baseline Progressive

  133. Progressive JPGs feel faster (even if they take the same

    time to load)
  134. Perceived performance matters more than actual performance

  135. 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/
  136. TOOLS & TECHNIQUES ImageOptim b64.io

  137. COMPRESS YOUR JPGs

  138. Uncompressed
 2.7mb Compressed 766kb

  139. 71.6% smaller than the original

  140. 70 High-quality JPG compression

  141. 70 High-quality JPG compression 90 WordPress default

  142. 90 WordPress default 70 High-quality JPG compression 82 WordPress 4.5

  143. None
  144. https://github.com/cferdinandi/gmt-image-compress-and-sharpen

  145. Server Optimizations 4

  146. None
  147. None
  148. None
  149. None
  150. None
  151. None
  152. This is a slow process

  153. You can tell WordPress to compile static HTML files ahead

    of time
  154. USE A CACHING PLUGIN

  155. OFTEN RECOMMENDED W3 Total Cache WP Super Cache

  156. OFTEN RECOMMENDED W3 Total Cache WP Super Cache They’re a

    bit complicated to setup
  157. https://cometcache.com/

  158. The only option you need to configure https://cometcache.com/

  159. Putting It All Together 5

  160. 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
  161. http://webpagetest.org

  162. TARGET PERFORMANCE
 Time to First Byte
 100ms - 300ms Start

    Render Cable: 1,000ms 3g: 3,000ms EDGE: 5,000ms
  163. Perceived performance matters more than actual performance

  164. ?

  165. Thank You!

  166. SLIDES & DOWNLOADS https://gomakethings.com/talks