Wicked Fast WordPress - WordCamp Boston 2013

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/

Df5f3b6aeb1caacc0acabf2cb45264da?s=128

Chris Ferdinandi

October 26, 2013
Tweet

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

  18. None
  19. Source: www.flickr.com/photos/elviskennedy/8131276426/

  20. Source: www.flickr.com/photos/jonathankosread/8026724727/

  21. Source: www.flickr.com/photos/ericparker/2102020762/

  22. None
  23. None
  24. None
  25. None
  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

  29. None
  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
  33. None
  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)

  50. None
  51. ~40% reduction in file size

  52. None
  53. None
  54. None
  55. None
  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';

  58. None
  59. None
  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

  64. None
  65. GOOGLE-HOSTED JQUERY http://cferdinandi.github.io/google-hosted-jquery/

  66. None
  67. MINIFY YOUR HTML http://cferdinandi.github.io/html-minify/

  68. None
  69. None
  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

  86. None
  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