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.

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
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
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/
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.)
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
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
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
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
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
93. This is why web apps feel so much slower than native apps
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
101. These add a lot of weight
102. REMOVE WHITESPACE Minification
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
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.
128. TOOLS & TECHNIQUES ImageOptim b64.io
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
144. https://github.com/cferdinandi/gmt-image-compress-and-sharpen
145. Server Optimizations 4
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