Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Wicked Fast Website: Website Creation Workshop

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.

Chris Ferdinandi

November 09, 2016
Tweet

More Decks by Chris Ferdinandi

Other Decks in Programming

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