Wicked Fast Website: Website Creation Workshop

Fast websites make more money, get more traffic, rank higher in Google, and have stronger brand loyalty. Your server, your theme, the way you load files—they all have an impact on how fast (or slow) your WordPress site is.

This talk provides you with a blueprint for building insanely fast WordPress sites, and a framework for analyzing web performance and advocating it to clients and managers. It covers everything from browser quirks to file optimization to server settings. You’ll learn:

- Why web performance matters.
- The right way to measure web performance.
- Annoying browser quirks (and how to fix them).
- How to reduce page weight for faster load times.
- Server optimizations that boost web performance.

Learn everything you need to know about building wicked fast WordPress sites.

Transcript

1. View Slide

2. How to build WordPress sites 

   that load in under 1 second
   WICKED FAST WEBSITES
   $ @ChrisFerdinandi ! GoMakeThings.com
   

   View Slide

3. (even on cheap, shared hosting)
   

   View Slide

4. MILLIONS
   of dollars in lost revenue
   slow websites cost businesses
   

   View Slide

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

   View Slide

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

   View Slide

7. $254M
   in lost sales in a single quarter
   Source: Q3 2015 Sales Numbers
   

   View Slide

8. £8M
   increase in customer spend from 

   a 300ms reduction in latency
   Source: https://www.youtube.com/watch?v=ai-6qwT6ES8
   

   View Slide

9. 80%
   increase in traffic after 

   reducing load time by 80%
   Source: http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
   

   View Slide

10. 15.4%
    increase in downloads after
    reducing page load time by 2.2 seconds
    Source: https://blog.mozilla.org/metrics/2010/04/05/firefox-page-load-speed-%E2%80%93-part-ii/
    

    View Slide

11. BIGGER
    websites are getting
    

    View Slide

12. BIGGER
    websites are getting
    

    View Slide

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

    View Slide

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

    View Slide

15. 2.2mb
    average webpage size in 2016
    Source: http://httparchive.org/interesting.php
    

    View Slide

16. 2x
    every three years
    

    View Slide

17. Source: www.lukew.com
    

    View Slide

18. MOBILE IS THE WEB
    

    View Slide

19. View Slide

20. View Slide

21. View Slide

22. 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

23. Bandwidth is not
    evenly distributed
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. MILLIONS
    of people around the world
    slow websites are unusable for
    

    View Slide

28. 40%
    of visitors will leave your site
    if it takes more than 3 seconds to load
    Source: https://blog.kissmetrics.com/loading-time/
    

    View Slide

29. 53%
    of mobile visitors will leave your site
    if it takes more than 3 seconds to load
    Source: https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/
    

    View Slide

30. 74%
    of visitors will leave your site
    if it takes more than 5 seconds to load
    Source: http://bradfrost.com/blog/post/performance-as-design/
    

    View Slide

31. View Slide

32. THE PERFECT STORM
    Bigger sites
    Weaker devices
    Higher expectations
    

    View Slide

33. What can you do about it?
    

    View Slide

34. What can you do about it?
    (Little changes can make a big difference.)
    

    View Slide

35. View Slide

36. 1
    Measuring Web Performance
    

    View Slide

37. 1
    Measuring Web Performance
    2
    Annoying Browser Quirks
    

    View Slide

38. 1
    Measuring Web Performance
    2
    Annoying Browser Quirks
    3
    Reducing Page Weight
    

    View Slide

39. 1
    Measuring Web Performance
    2
    Annoying Browser Quirks
    3
    Reducing Page Weight
    4
    Server Optimizations
    

    View Slide

40. 1
    Measuring Web Performance
    2
    Annoying Browser Quirks
    3
    Reducing Page Weight
    4
    Server Optimizations
    5
    Q&A
    

    View Slide

41. SLIDES & DOWNLOADS
    https://gomakethings.com/talks
    

    View Slide

42. Who am I and 

    why should you care?
    0
    

    View Slide

43. $
    @ChrisFerdinandi
    

    View Slide

44. ! Go Make Things
    GoMakeThings.com
    

    View Slide

45. View Slide

46. https://gomakethings.com/wicked-fast-websites
    

    View Slide

47. Measuring Web Performance
    1
    

    View Slide

48. HOW FAST IS
    FAST ENOUGH?
    

    View Slide

49. 1 second
    Source: https://www.nngroup.com/articles/response-times-3-important-limits/
    

    View Slide

50. Total load time and page weight
    aren’t the right metrics
    

    View Slide

51. How do you
    measure performance?
    

    View Slide

52. TIME TO FIRST BYTE

    How quickly your server is
    sending data back to the browser
    

    View Slide

53. START RENDER

    How quickly the browser begins
    displaying content to your visitor
    

    View Slide

54. Perceived performance matters
    more than actual performance
    

    View Slide

55. http://www.webpagetest.org
    

    View Slide

56. TARGET PERFORMANCE

    Time to First Byte

    100ms - 300ms
    Start Render
    Cable: 1,000ms
    3g: 3,000ms
    EDGE: 5,000ms
    

    View Slide

57. https://developers.google.com/speed/pagespeed/insights/
    

    View Slide

58. https://developers.google.com/speed/pagespeed/insights/
    

    View Slide

59. https://whatdoesmysitecost.com
    

    View Slide

60. Annoying Browser Quirks
    2
    

    View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. FAST
    300kb
    SLOW
    100kb 100kb 100kb
    

    View Slide

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

    View Slide

68. Browsers only download
    2 files at a time
    

    View Slide

69. This is fixed in HTTP2
    (but browser and host support isn’t large enough yet)
    Source: https://www.youtube.com/watch?v=fJ0C4zN5uOQ
    

    View Slide

70. COMBINE FILES
    Concatenation
    

    View Slide

71. svg.js
    canvas.js
    

    View Slide

72. svg.js
    canvas.js
    detects.js
    

    View Slide

73. dropdowns.js
    fluidvids.js
    modals.js
    svg.js
    canvas.js
    detects.js
    

    View Slide

74. dropdowns.js
    fluidvids.js
    modals.js
    svg.js
    canvas.js
    detects.js
    main.js
    

    View Slide

75. View Slide

76. https://wordpress.org/plugins/minqueue/
    

    View Slide

77. https://wordpress.org/plugins/minqueue/
    

    View Slide

78. https://wordpress.org/plugins/minqueue/
    

    View Slide

79. JS BLOCKS RENDERING
    

    View Slide

80. Browsers only download
    2 files at a time
    (except JavaScript files,
    which block all other downloads)
    

    View Slide

81. FILE LOCATION MATTERS
    Detects in the header
    Everything else in the footer
    

    View Slide

82. SPECIFY A LOCATION
    

    View Slide

83. // Load theme scripts
    function load_theme_scripts() {
    // Feature detects
    wp_enqueue_script( 'theme-detects', get_template_directory_uri() .
    '/dist/js/detects.js', null, null, false );
    // Main scripts
    wp_enqueue_script( 'theme-scripts', get_template_directory_uri() .
    '/dist/js/main.js', null, null, true );
    }
    add_action('wp_enqueue_scripts', 'load_theme_scripts');
    

    View Slide

84. // Load theme scripts
    function load_theme_scripts() {
    // Feature detects
    wp_enqueue_script( 'theme-detects', get_template_directory_uri() .
    '/dist/js/detects.js', null, null, false );
    // Main scripts
    wp_enqueue_script( 'theme-scripts', get_template_directory_uri() .
    '/dist/js/main.js', null, null, true );
    }
    add_action('wp_enqueue_scripts', 'load_theme_scripts');
    

    View Slide

85. in_footer
    false = header
    true = footer
    

    View Slide

86. View Slide

87. https://github.com/cferdinandi/gmt-scripts-to-footer
    

    View Slide

88. Reducing Page Weight
    3
    

    View Slide

89. View Slide

90. These add a lot of weight
    

    View Slide

91. REMOVE WHITESPACE
    Minification
    

    View Slide

92. View Slide

93. 75%
    reduction in file weight
    

    View Slide

94. View Slide

95. https://wordpress.org/plugins/minqueue/
    

    View Slide

96. https://github.com/cferdinandi/gmt-html-minify/
    

    View Slide

97. 63.5%
    of an average webpage’s weight is images
    Source: http://httparchive.org/interesting.php#bytesperpage
    

    View Slide

98. CONFLICTING INTERESTS
    

    View Slide

99. High-Density Display
    CONFLICTING INTERESTS
    

    View Slide

100. High-Density Display
     Low-Bandwidth
     
     Computing
     CONFLICTING INTERESTS
     

     View Slide

101. How do you balance these
     competing interests?
     

     View Slide

102. PICK THE RIGHT FORMAT
     

     View Slide

103. PNGs
     Logos
     Clean, simple images
     JPGs
     Photos
     Noisy images
     

     View Slide

104. TEST & MEASURE
     

     View Slide

105. SMUSH YOUR IMAGES
     

     View Slide

106. SMUSHING
     Removing all of the metadata
     associated with an image.
     

     View Slide

107. View Slide

108. TOOLS & TECHNIQUES
     ImageOptim
     b64.io
     

     View Slide

109. View Slide

110. View Slide

111. DIFFERENT JPG FORMATS
     Baseline Progressive
     

     View Slide

112. DIFFERENT JPG FORMATS
     Baseline Progressive
     

     View Slide

113. Progressive JPGs feel faster
     (even if they take the same time to load)
     

     View Slide

114. Perceived performance matters
     more than actual performance
     

     View Slide

115. TOOLS & TECHNIQUES
     ImageOptim
     b64.io
     

     View Slide

116. COMPRESS YOUR JPGs
     

     View Slide

117. Uncompressed

     2.7mb
     Compressed
     766kb
     

     View Slide

118. 71.6%
     smaller than the original
     

     View Slide

119. 70
     High-quality JPG compression
     

     View Slide

120. 70
     High-quality JPG compression
     90
     WordPress default
     

     View Slide

121. 90
     WordPress default
     70
     High-quality JPG compression
     82
     WordPress 4.5
     

     View Slide

122. View Slide

123. https://github.com/cferdinandi/gmt-image-compress-and-sharpen
     

     View Slide

124. img {
     max-width: 100%;
     height: auto;
     }
     

     View Slide

125. View Slide

126. Different viewports.
     Different images.
     

     View Slide

127. Your options are…
     

     View Slide

128. SPEED vs. AESTHETICS
     

     View Slide

129. Today, you make decisions that
     should be made by the browser
     (and visitor).
     

     View Slide

130. and srcset
     

     View Slide

131. srcset="path/to/image-large.jpg 1024w,
     path/to/image-medium.jpg 640w,
     path/to/image-small.jpg 320w"
     sizes="(min-width: 40em) 33.3vw,
     100vw"
     >
     

     View Slide

132. srcset="path/to/image-large.jpg 1024w,
     path/to/image-medium.jpg 640w,
     path/to/image-small.jpg 320w"
     sizes="(min-width: 40em) 33.3vw,
     100vw"
     >
     

     View Slide

133. srcset="path/to/image-large.jpg 1024w,
     path/to/image-medium.jpg 640w,
     path/to/image-small.jpg 320w"
     sizes="(min-width: 40em) 33.3vw,
     100vw"
     >
     

     View Slide

134. srcset="path/to/image-large.jpg 1024w,
     path/to/image-medium.jpg 640w,
     path/to/image-small.jpg 320w"
     sizes="(min-width: 40em) 33.3vw,
     100vw"
     >
     

     View Slide

135. The markup kind of sucks
     

     View Slide

136. 
     

     View Slide

137. srcset="path/to/image-large.jpg 1024w,
     path/to/image-medium.jpg 640w,
     path/to/image-small.jpg 320w"
     sizes="(min-width: 40em) 33.3vw,
     100vw"
     >
     

     View Slide

138. The WordPress Way
     

     View Slide

139. WordPress does this automatically!
     (as of WordPress 4.4)
     

     View Slide

140. https://wordpress.org/plugins/ricg-responsive-images/
     

     View Slide

141. Server Optimizations
     4
     

     View Slide

142. GZIPPING

     Compressing website files on the server
     before sending them to the browser
     

     View Slide

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

     View Slide

144. GZIP YOUR SITE
     

     View Slide

145. http://gzipwtf.com
     

     View Slide

146. View Slide

147. View Slide

148. View Slide

149. View Slide

150. View Slide

151. View Slide

152. This is a slow process
     

     View Slide

153. You can tell WordPress to compile
     static HTML files ahead of time
     

     View Slide

154. USE A CACHING PLUGIN
     

     View Slide

155. OFTEN RECOMMENDED
     W3 Total Cache
     WP Super Cache
     

     View Slide

156. OFTEN RECOMMENDED
     W3 Total Cache
     WP Super Cache
     They’re a bit complicated to setup
     

     View Slide

157. https://cometcache.com/
     

     View Slide

158. The only option you need to configure
     https://cometcache.com/
     

     View Slide

159. Putting It All Together
     5
     

     View Slide

160. Annoying Browser Quirks
     • Combine files (concatenation)
     • Load JS in the footer
     • Remove whitespace (minification)
     Reduce Page Weight
     • Pick the right image format
     • Smush and compress images
     • Use responsive images
     DO ALL THE THINGS
     Server Optimizations
     • Enable gzip
     • Use a caching plugin
     

     View Slide

161. http://webpagetest.org
     

     View Slide

162. TARGET PERFORMANCE

     Time to First Byte

     100ms - 300ms
     Start Render
     Cable: 1,000ms
     3g: 3,000ms
     EDGE: 5,000ms
     

     View Slide

163. Perceived performance matters
     more than actual performance
     

     View Slide

164. ?
     

     View Slide

165. Thank You!
     

     View Slide

166. SLIDES & DOWNLOADS
     https://gomakethings.com/talks
     

     View Slide