Wicked Fast WordPress

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/

Df5f3b6aeb1caacc0acabf2cb45264da?s=128

Chris Ferdinandi

July 23, 2013
Tweet

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

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

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

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

  21. None
  22. None
  23. None
  24. WHAT CAN YOU DO ABOUT IT?

  25. ) READS HTML * RENDERS CONTENT + DOWNLOADS FILES (2

    at a time) CSS stops rendering JS stops downloads
  26. None
  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)

  40. None
  41. ~40% reduction in file size

  42. None
  43. None
  44. None
  45. None
  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">
  48. None
  49. None
  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

  53. None
  54. MINIFY YOUR HTML https://gist.github.com/cferdinandi/6009555

  55. None
  56. None
  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
  85. None
  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