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
   

   View Slide

2. WHY DOES SPEED MATTER?
   

   View Slide

3. 20%
   decrease in search traffic from
   just a 500ms delay
   Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
   

   View Slide

4. 1%
   loss in sales from
   just a 100ms delay
   Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
   

   View Slide

5. $6.1M
   based on 2012 sales
   

   View Slide

6. 600kb
   average webpage size in 2010
   Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
   

   View Slide

7. 1.2mb
   average webpage size in 2013
   Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
   

   View Slide

8. 2x
   in just three years
   Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
   

   View Slide

9. COMPUTERS GET
   FASTER EVERY YEAR.
   Everybody
   

   View Slide

10. Source: www.lukew.com
    

    View Slide

11. MOBILE IS THE WEB
    $!
    

    View Slide

12. Source: www.google.com/think/research-studies/creating-moments-that-matter.html
    77%
    of mobile searches
    happen at work or at home
    ^!
    =!
    

    View Slide

13. Source: www.flickr.com/photos/cseeman/4020336221/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

17. 4G LTE IS AS FAST AS
    BROADBAND WIFI.
    Everybody
    

    View Slide

18. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. 45%
    traffic from mobile devices
    Source: Google Analytics
    

    View Slide

27. 0
    5,000
    10,000
    15,000
    20,000
    25,000
    May 2011 May 2012 January 2013 August 2013
    ~9% ~23%
    ~36% ~45%
    

    View Slide

28. ~70% 1
    

    View Slide

29. View Slide

30. THE PERFECT STORM
    Bigger sites
    Weaker devices
    Higher expectations
    

    View Slide

31. WHAT CAN
    YOU
    DO ABOUT IT?
    

    View Slide

32. ) READS HTML
    * RENDERS CONTENT
    + DOWNLOADS FILES (2 at a time)
    CSS stops rendering JS stops downloads
    

    View Slide

33. View Slide

34. ) READS HTML
    * RENDERS CONTENT
    + DOWNLOADS FILES (2 at a time)
    CSS stops rendering JS stops downloads
    

    View Slide

35. ) READS HTML
    * RENDERS CONTENT
    + DOWNLOADS FILES (2 at a time)
    CSS stops rendering JS stops downloads
    

    View Slide

36. )!
    HTML ORDER MATTERS
    

    View Slide

37. CSS AT THE TOP
    to avoid repaints
    JS AT THE BOTTOM*
    to maximize downloads
    * Exception: Modernizr (and similar scripts)
    

    View Slide

38. WP_ENQUEUE_STYLE
    in the header by default
    

    View Slide

39. WP_ENQUEUE_SCRIPT
    also in the header by default
    wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
    true
    

    View Slide

40. ) READS HTML
    * RENDERS CONTENT
    + DOWNLOADS FILES (2 at a time)
    CSS stops rendering JS stops downloads
    

    View Slide

41. +
    

    View Slide

42. # FAST
    300kb
    @ SLOW
    100kb 100kb 100kb
    

    View Slide

43. DNS LOOKUPS
    HTTP HEADERS
    REDIRECTS
    404s
    Lots of places for things to go wrong
    ~!
    

    View Slide

44. COMBINE LIKE FILES
    -!
    (concatenation)
    

    View Slide

45. @ SLOW
    dropdowns.js
    fitvids.js
    modals.js
    # FAST
    scripts.js
    

    View Slide

46. Browsers download all files regardless of screen size
    @ SLOW
    
    
    
    header.php
    

    View Slide

47. # FAST
    
    .base-styles { … }
    @media (min-width: 20em) { … }
    @media (min-width: 40em) { … }
    @media (min-width: 60em) { … }
    header.php
    style.css
    

    View Slide

48. file weight
    

    View Slide

49. REMOVE WHITESPACE
    s!
    (minification)
    

    View Slide

50. View Slide

51. ~40%
    reduction in file size
    

    View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. STYLE.CSS
    (human-readable)
    STYLE.MIN.CSS
    (minified)
    

    View Slide

57. REPLACE THIS
    get_bloginfo('stylesheet_url');
    WITH THIS
    get_bloginfo('stylesheet_directory') . '/style.min.css';
    

    View Slide

58. View Slide

59. View Slide

60. SCRIPTS.JS
    (human-readable)
    SCRIPTS.MIN.JS
    (minified)
    

    View Slide

61. PLUGINS MAKE THIS HARD.
    They also make it easy.
    

    View Slide

62. MINQUEUE
    http://wordpress.org/plugins/minqueue/
    

    View Slide

63. ~65%
    smaller
    GOOGLE-HOSTED JQUERY
    //ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    

    View Slide

64. View Slide

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

    View Slide

66. View Slide

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

    View Slide

68. View Slide

69. View Slide

70. USE IMAGES WISELY
    r!
    

    View Slide

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
    

    View Slide

72. 
    @font-face { … }
    .icon-twitter:before {
    font-family: icon-font;
    content: "\e001";
    color: #0088cc;
    font-size: 4em;
    }
    5!
    

    View Slide

73. Source: icomoon.io
    

    View Slide

74. Source: icomoon.io
    

    View Slide

75. HOW TO USE ICON FONTS
    http://gomakethings.com/icon-fonts/
    

    View Slide

76. IMAGE SPRITES
    
    (background-image instead of @font-face)
    5! 0! 2!
    3! 4! 1!
    5! 0! 2!
    3! 4! 1!
    

    View Slide

77. # FAST
    300kb
    @ SLOW
    100kb 100kb 100kb
    

    View Slide

78. IMAGE SPRITE GENERATOR
    http://spritegen.website-performance.org/
    

    View Slide

79. SMARTER IMAGE FORMATS
    PNGs
    Logos
    Clean, simple images
    JPGs
    Photos
    Noisy images
    

    View Slide

80. DIFFERENT JPG FORMATS
    Baseline Progressive
    

    View Slide

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/
    

    View Slide

82. COMPRESS JPGs
    676kb 92kb
    

    View Slide

83. 87%
    reduction in file size
    

    View Slide

84. 70
    High-quality JPG compression
    90
    WordPress default
    

    View Slide

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
    

    View Slide

86. View Slide

87. COMPRESS & SHARPEN IMAGES
    https://github.com/cferdinandi/image-compress-and-sharpen
    

    View Slide

88. REGENERATE THUMBNAILS
    http://wordpress.org/plugins/regenerate-thumbnails/
    

    View Slide

89. Source: imageoptim.com/
    SMUSH IMAGES
    

    View Slide

90. USE ADAPTIVE IMAGES
    q!
    

    View Slide

91. http://adaptive-images.com
    

    View Slide

92. http://jetpack.me/support/photon/
    

    View Slide

93. COMPRESS YOUR SITE
    a!
    (gzipping)
    

    View Slide

94. ~70%
    reduction in website size
    Source: developer.yahoo.com/performance/rules.html
    

    View Slide

95. APACHE .HTACCESS FILE
    https://github.com/cferdinandi/htaccess
    

    View Slide

96. # BEGIN WordPress
    
    RewriteEngine On
    RewriteBase /your-site/
    RewriteRule ^index\.php$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /your-site/index.php [L]
    
    # END WordPress
    

    View Slide

97. GZIPWTF
    http://gzipwtf.com/
    

    View Slide

98. SET EXPIRE HEADERS
    c!
    

    View Slide

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"
    

    View Slide

100. APACHE .HTACCESS FILE
     https://github.com/cferdinandi/htaccess
     

     View Slide

101. STYLE.MIN.10262013.CSS
     

     View Slide

102. MINQUEUE
     does this automatically
     

     View Slide

103. ! & + & + & = )
     ) READS HTML
     * RENDERS CONTENT
     + DOWNLOADS FILES (2 at a time)
     CSS stops rendering JS stops downloads
     

     View Slide

104. PRE-BUILD YOUR SITE
     t!
     

     View Slide

105. ! & + & + & = )
     ) READS HTML
     * RENDERS CONTENT
     + DOWNLOADS FILES (2 at a time)
     CSS stops rendering JS stops downloads
     

     View Slide

106. Source: wordpress.org/plugins/quick-cache/
     

     View Slide

107. COMMENT GARBAGE COLLECTOR
     http://wordpress.org/plugins/quick-cache-comment-garbagecollector/
     

     View Slide

108. WEBSITE SPEED TEST
     http://tools.pingdom.com/fpt/
     

     View Slide

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
     

     View Slide

110. GoMakeThings.com
     @ChrisFerdinandi
     hello@gomakethings.com
     i!
     CHRIS FERDINANDI
     Kraken
     

     View Slide