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.

Df5f3b6aeb1caacc0acabf2cb45264da?s=128

Chris Ferdinandi

November 09, 2016
Tweet

Transcript

  1. None
  2. How to build WordPress sites 
 that load in under

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

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

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

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

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

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

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

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

  12. BIGGER websites are getting

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

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

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

  16. 2x every three years

  17. Source: www.lukew.com

  18. MOBILE IS THE WEB

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

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

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

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

  33. What can you do about it?

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

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

  37. 1 Measuring Web Performance 2 Annoying Browser Quirks

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

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

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

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

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

  43. $ @ChrisFerdinandi

  44. ! Go Make Things GoMakeThings.com

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

  47. Measuring Web Performance 1

  48. HOW FAST IS FAST ENOUGH?

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

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

  51. How do you measure performance?

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

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

    your visitor
  54. Perceived performance matters more than actual performance

  55. http://www.webpagetest.org

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

    Render Cable: 1,000ms 3g: 3,000ms EDGE: 5,000ms
  57. https://developers.google.com/speed/pagespeed/insights/

  58. https://developers.google.com/speed/pagespeed/insights/

  59. https://whatdoesmysitecost.com

  60. Annoying Browser Quirks 2

  61. None
  62. None
  63. None
  64. None
  65. None
  66. FAST 300kb SLOW 100kb 100kb 100kb

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

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

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

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

  71. svg.js canvas.js

  72. svg.js canvas.js detects.js

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

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

  75. None
  76. https://wordpress.org/plugins/minqueue/

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

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

  79. JS BLOCKS RENDERING

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

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

    the footer
  82. SPECIFY A LOCATION

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

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

  88. Reducing Page Weight 3

  89. None
  90. These add a lot of weight

  91. REMOVE WHITESPACE Minification

  92. None
  93. 75% reduction in file weight

  94. None
  95. https://wordpress.org/plugins/minqueue/

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

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

  98. CONFLICTING INTERESTS

  99. High-Density Display CONFLICTING INTERESTS

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

  101. How do you balance these competing interests?

  102. PICK THE RIGHT FORMAT

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

  104. TEST & MEASURE

  105. SMUSH YOUR IMAGES

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

  107. None
  108. TOOLS & TECHNIQUES ImageOptim b64.io

  109. None
  110. None
  111. DIFFERENT JPG FORMATS Baseline Progressive

  112. DIFFERENT JPG FORMATS Baseline Progressive

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

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

  115. TOOLS & TECHNIQUES ImageOptim b64.io

  116. COMPRESS YOUR JPGs

  117. Uncompressed
 2.7mb Compressed 766kb

  118. 71.6% smaller than the original

  119. 70 High-quality JPG compression

  120. 70 High-quality JPG compression 90 WordPress default

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

  122. None
  123. https://github.com/cferdinandi/gmt-image-compress-and-sharpen

  124. img { max-width: 100%; height: auto; }

  125. None
  126. Different viewports. Different images.

  127. Your options are…

  128. SPEED vs. AESTHETICS

  129. Today, you make decisions that should be made by the

    browser (and visitor).
  130. <picture> and srcset

  131. <img src="path/to/image-small.jpg" srcset="path/to/image-large.jpg 1024w, path/to/image-medium.jpg 640w, path/to/image-small.jpg 320w" sizes="(min-width: 40em)

    33.3vw, 100vw" >
  132. <img src="path/to/image-small.jpg" srcset="path/to/image-large.jpg 1024w, path/to/image-medium.jpg 640w, path/to/image-small.jpg 320w" sizes="(min-width: 40em)

    33.3vw, 100vw" >
  133. <img src="path/to/image-small.jpg" srcset="path/to/image-large.jpg 1024w, path/to/image-medium.jpg 640w, path/to/image-small.jpg 320w" sizes="(min-width: 40em)

    33.3vw, 100vw" >
  134. <img src="path/to/image-small.jpg" srcset="path/to/image-large.jpg 1024w, path/to/image-medium.jpg 640w, path/to/image-small.jpg 320w" sizes="(min-width: 40em)

    33.3vw, 100vw" >
  135. The markup kind of sucks

  136. <img src="path/to/image-small.jpg">

  137. <img src="path/to/image-small.jpg" srcset="path/to/image-large.jpg 1024w, path/to/image-medium.jpg 640w, path/to/image-small.jpg 320w" sizes="(min-width: 40em)

    33.3vw, 100vw" >
  138. The WordPress Way

  139. WordPress does this automatically! (as of WordPress 4.4)

  140. https://wordpress.org/plugins/ricg-responsive-images/

  141. Server Optimizations 4

  142. GZIPPING
 Compressing website files on the server before sending them

    to the browser
  143. 70% reduction in website size Source: https://developer.yahoo.com/performance/rules.html

  144. GZIP YOUR SITE

  145. http://gzipwtf.com

  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) 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
  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