Wicked Fast WordPress

How can you build a WordPress site that loads in less than a second, and why does it matter?

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.

View the talk on YouTube: http://www.youtube.com/watch?v=cHZ1kCYGR6E
Read the tutorial: http://gomakethings.com/high-performance-websites/

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. 20% decrease in search traffic from just a 500ms delay Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
3. 1% loss in sales from just a 100ms delay Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
4. $6.1M based on 2012 sales
5. 600kb average webpage size in 2010 Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
6. 1.2mb average webpage size in 2013 Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
7. 2x in just three years Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
8. COMPUTERS GET FASTER EVERY YEAR. Everybody
9. Source: www.lukew.com
10. MOBILE IS THE WEB $!
11. Source: www.google.com/think/research-studies/creating-moments-that-matter.html 77% of mobile searches happen at work or at home ^! =!
12. Source: www.flickr.com/photos/cseeman/4020336221/
13. 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
14. 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
15. 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/
16. 4G LTE IS AS FAST AS BROADBAND WIFI. Everybody
18. Source: www.flickr.com/photos/elviskennedy/8131276426/
19. Source: www.flickr.com/photos/jonathankosread/8026724727/
20. Source: www.flickr.com/photos/ericparker/2102020762/
24. WHAT CAN YOU DO ABOUT IT?
25. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
27. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
28. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
29. )! HTML ORDER MATTERS
30. CSS AT THE TOP to avoid repaints JS AT THE BOTTOM* to maximize downloads * Exception: Modernizr (and similar scripts)
31. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
32. # FAST 300kb @ SLOW 100kb 100kb 100kb
33. DNS LOOKUPS HTTP HEADERS REDIRECTS 404s Lots of places for things to go wrong ~!
34. COMBINE LIKE FILES -! (concatenation)
35. @ SLOW dropdowns.js fitvids.js modals.js # FAST scripts.js
36. 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
37. # 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
38. file weight
39. REMOVE WHITESPACE s! (minification)
41. ~40% reduction in file size
46. STYLE.CSS (human-readable) STYLE.MIN.CSS (minified)
47. REPLACE THIS <link rel="stylesheet” href="<?php bloginfo('stylesheet_url'); ?>"> WITH THIS <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/style.min.css">
50. SCRIPTS.JS (human-readable) SCRIPTS.MIN.JS (minified)
51. GOOGLE-HOSTED JQUERY //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js 93kb
52. GOOGLE-HOSTED JQUERY W/ FALLBACK https://gist.github.com/wpsmith/4083811
54. MINIFY YOUR HTML https://gist.github.com/cferdinandi/6009555
57. USE IMAGES WISELY r!
58. 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
59. <span class="icon-twitter"></span> @font-face { … } .icon-twitter:before { font-family: icon-font; content: "\e001"; color: #0088cc; font-size: 4em; } 5!
60. Source: icomoon.io
61. Source: icomoon.io
62. HOW TO USE ICON FONTS http://gomakethings.com/icon-fonts/
63. SMARTER IMAGE FORMATS PNGs Logos Clean, simple images JPGs Photos Noisy images
64. COMPRESS JPGs 676kb 92kb
65. 87% reduction in file size
66. 70 High-quality JPG compression 90 WordPress default
67. add_filter('jpeg_quality', function($arg){return 70;}); Source: www.wpbeginner.com/wp-tutorials/how-to-increase-or-decrease-wordpress-jpeg-image-compression/ produces fuzzy images
68. COMPRESS & SHARPEN IMAGES https://gist.github.com/cferdinandi/6009875
69. Source: imageoptim.com/ SMUSH IMAGES
70. Source: wordpress.org/plugins/wp-smushit/ SMUSH.IT PLUGIN
71. 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!
72. # FAST 300kb @ SLOW 100kb 100kb 100kb
73. IMAGE SPRITE GENERATOR http://spritegen.website-performance.org/
74. USE ADAPTIVE IMAGES q!
75. http://adaptive-images.com
76. COMPRESS YOUR SITE a! (gzipping)
77. ~70% reduction in website size Source: developer.yahoo.com/performance/rules.html
78. APACHE .HTACCESS FILE https://github.com/cferdinandi/htaccess
79. # 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
80. SET EXPIRE HEADERS c!
81. # 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"
82. APACHE .HTACCESS FILE https://github.com/cferdinandi/htaccess
83. STYLE.MIN.07232013.JS
84. ! & + & + & = ) ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
86. 74% of my users just left
87. PRE-BUILD YOUR SITE t!
88. ! & + & + & = ) ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2 at a time) CSS stops rendering JS stops downloads
89. PRE-BUILT Much Faster!
90. Source: wordpress.org/plugins/quick-cache/
91. WEBSITE SPEED TEST http://tools.pingdom.com/fpt/
92. 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
93. GoMakeThings.com @ChrisFerdinandi hello@gomakethings.com i! CHRIS FERDINANDI Kraken