Wicked Fast WordPress - WordCamp Boston 2013

Slides from my talk at WordCamp Boston 2013.

At Google, a 500 millisecond delay (just 0.5 seconds) resulted in a 20% decrease in search traffic. 74% of mobile web users will leave a site if it takes longer than 5 seconds to load. Meanwhile, web-enabled devices and user bandwidth are getting more varied and less predictable. This talk explores tips, tricks and techniques you can use to build wicked fast WordPress sites.

Want to see this talk in person? Get in touch: http://gomakethings.com/speaking/

Transcript

1. i! GoMakeThings.com 5 @ChrisFerdinandi #! WICKED FAST WORDPRESS
2. WHY DOES SPEED MATTER?
3. 20% decrease in search traffic from just a 500ms delay Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
4. 1% loss in sales from just a 100ms delay Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
5. $6.1M based on 2012 sales
6. 600kb average webpage size in 2010 Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
7. 1.2mb average webpage size in 2013 Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
8. 2x in just three years Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
9. COMPUTERS GET FASTER EVERY YEAR. Everybody
10. Source: www.lukew.com
11. MOBILE IS THE WEB $!
12. Source: www.google.com/think/research-studies/creating-moments-that-matter.html 77% of mobile searches happen at work or at home ^! =!
13. Source: www.flickr.com/photos/cseeman/4020336221/
14. 55% AMERICANS WHO HAVE ACCESSED THE WEB via a mobile device in 2012 Source: blogs.hbr.org/cs/2013/05/the_rise_of_the_mobile-only_us.html
15. 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
16. 74% of mobile users will leave your site if it takes more than 5 seconds to load Source: bradfrostweb.com/blog/post/performance-as-design/
17. 4G LTE IS AS FAST AS BROADBAND WIFI. Everybody
19. Source: www.flickr.com/photos/elviskennedy/8131276426/
20. Source: www.flickr.com/photos/jonathankosread/8026724727/
21. Source: www.flickr.com/photos/ericparker/2102020762/
26. 45% traffic from mobile devices Source: Google Analytics
27. 0 5,000 10,000 15,000 20,000 25,000 May 2011 May 2012 January 2013 August 2013 ~9% ~23% ~36% ~45%
28. ~70% 1
30. THE PERFECT STORM Bigger sites Weaker devices Higher expectations
31. WHAT CAN YOU DO ABOUT IT?
32. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
34. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
35. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
36. )! HTML ORDER MATTERS
37. CSS AT THE TOP to avoid repaints JS AT THE BOTTOM* to maximize downloads * Exception: Modernizr (and similar scripts)
38. WP_ENQUEUE_STYLE in the header by default
39. WP_ENQUEUE_SCRIPT also in the header by default wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); true
40. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
41. +
42. # FAST 300kb @ SLOW 100kb 100kb 100kb
43. DNS LOOKUPS HTTP HEADERS REDIRECTS 404s Lots of places for things to go wrong ~!
44. COMBINE LIKE FILES -! (concatenation)
45. @ SLOW dropdowns.js fitvids.js modals.js # FAST scripts.js
46. Browsers download all files regardless of screen size @ SLOW <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"> header.php
47. # FAST <link rel="stylesheet" href="style.css"> .base-styles { … } @media (min-width: 20em) { … } @media (min-width: 40em) { … } @media (min-width: 60em) { … } header.php style.css
48. file weight
49. REMOVE WHITESPACE s! (minification)
51. ~40% reduction in file size
56. STYLE.CSS (human-readable) STYLE.MIN.CSS (minified)
57. REPLACE THIS get_bloginfo('stylesheet_url'); WITH THIS get_bloginfo('stylesheet_directory') . '/style.min.css';
60. SCRIPTS.JS (human-readable) SCRIPTS.MIN.JS (minified)
61. PLUGINS MAKE THIS HARD. They also make it easy.
62. MINQUEUE http://wordpress.org/plugins/minqueue/
63. ~65% smaller GOOGLE-HOSTED JQUERY //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
65. GOOGLE-HOSTED JQUERY http://cferdinandi.github.io/google-hosted-jquery/
67. MINIFY YOUR HTML http://cferdinandi.github.io/html-minify/
70. USE IMAGES WISELY r!
71. ICON FONTS Lightweight A single file Styleable with CSS Scalable Compatible back to IE 5 Considerations 1 color per icon* Windows Phone 7 support sucks
72. <span class="icon-twitter"></span> @font-face { … } .icon-twitter:before { font-family: icon-font; content: "\e001"; color: #0088cc; font-size: 4em; } 5!
73. Source: icomoon.io
74. Source: icomoon.io
75. HOW TO USE ICON FONTS http://gomakethings.com/icon-fonts/
76. IMAGE SPRITES <span class="icon-twitter"></span> (background-image instead of @font-face) 5! 0! 2! 3! 4! 1! 5! 0! 2! 3! 4! 1!
77. # FAST 300kb @ SLOW 100kb 100kb 100kb
78. IMAGE SPRITE GENERATOR http://spritegen.website-performance.org/
79. SMARTER IMAGE FORMATS PNGs Logos Clean, simple images JPGs Photos Noisy images
80. DIFFERENT JPG FORMATS Baseline Progressive
81. 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/
82. COMPRESS JPGs 676kb 92kb
83. 87% reduction in file size
84. 70 High-quality JPG compression 90 WordPress default
85. add_filter('jpeg_quality', function($arg){return 70;}); Source: www.wpbeginner.com/wp-tutorials/how-to-increase-or-decrease-wordpress-jpeg-image-compression/ not progressive and sometimes fuzzy
87. COMPRESS & SHARPEN IMAGES https://github.com/cferdinandi/image-compress-and-sharpen
88. REGENERATE THUMBNAILS http://wordpress.org/plugins/regenerate-thumbnails/
89. Source: imageoptim.com/ SMUSH IMAGES
90. USE ADAPTIVE IMAGES q!
91. http://adaptive-images.com
92. http://jetpack.me/support/photon/
93. COMPRESS YOUR SITE a! (gzipping)
94. ~70% reduction in website size Source: developer.yahoo.com/performance/rules.html
95. APACHE .HTACCESS FILE https://github.com/cferdinandi/htaccess
96. # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase /your-site/ RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /your-site/index.php [L] </IfModule> # END WordPress
97. GZIPWTF http://gzipwtf.com/
98. SET EXPIRE HEADERS c!
99. # Your document html ExpiresByType text/html "access plus 0 seconds" # Media: images, video, audio ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month"
100. APACHE .HTACCESS FILE https://github.com/cferdinandi/htaccess
101. STYLE.MIN.10262013.CSS
102. MINQUEUE does this automatically
103. ! & + & + & = ) ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
104. PRE-BUILD YOUR SITE t!
105. ! & + & + & = ) ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
106. Source: wordpress.org/plugins/quick-cache/
107. COMMENT GARBAGE COLLECTOR http://wordpress.org/plugins/quick-cache-comment-garbagecollector/
108. WEBSITE SPEED TEST http://tools.pingdom.com/fpt/
109. 1.  HTML order matters 2.  Combine like files 3.  Remove whitespace 4.  Use icon fonts (or sprites) 5.  Pick the right image format 6.  Compress & smush images 7.  Use adaptive images 8.  Compress your site 9.  Set Expires headers 10.  Prebuild your site #! WICKED FAST WORDPRESS
110. GoMakeThings.com @ChrisFerdinandi hello@gomakethings.com i! CHRIS FERDINANDI Kraken