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.

Transcript

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
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
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/
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.)
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
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
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
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
87. https://github.com/cferdinandi/gmt-scripts-to-footer
88. Reducing Page Weight 3
90. These add a lot of weight
91. REMOVE WHITESPACE Minification
93. 75% reduction in file weight
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.
108. TOOLS & TECHNIQUES ImageOptim b64.io
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
123. https://github.com/cferdinandi/gmt-image-compress-and-sharpen
124. img { max-width: 100%; height: auto; }
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
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