Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
How to build WordPress sites
that load in under 1 second
WICKED FAST WEBSITES
$ @ChrisFerdinandi ! GoMakeThings.com
Slide 3
Slide 3 text
(even on cheap, shared hosting)
Slide 4
Slide 4 text
MILLIONS
of dollars in lost revenue
slow websites cost businesses
Slide 5
Slide 5 text
20%
decrease in search traffic from
just a 500ms delay
Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
Slide 6
Slide 6 text
1%
loss in sales from
just a 100ms delay
Source: www.slideshare.net/stubbornella/designing-fast-websites-presentation
Slide 7
Slide 7 text
$254M
in lost sales in a single quarter
Source: Q3 2015 Sales Numbers
Slide 8
Slide 8 text
£8M
increase in customer spend from
a 300ms reduction in latency
Source: https://www.youtube.com/watch?v=ai-6qwT6ES8
Slide 9
Slide 9 text
80%
increase in traffic after
reducing load time by 80%
Source: http://digiday.com/publishers/gq-com-cut-page-load-time-80-percent/
Slide 10
Slide 10 text
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/
Slide 11
Slide 11 text
BIGGER
websites are getting
Slide 12
Slide 12 text
BIGGER
websites are getting
Slide 13
Slide 13 text
600kb
average webpage size in 2010
Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
Slide 14
Slide 14 text
1.2mb
average webpage size in 2013
Source: www.webperformancetoday.com/2013/06/05/web-page-growth-2010-2013/
Slide 15
Slide 15 text
2.2mb
average webpage size in 2016
Source: http://httparchive.org/interesting.php
Slide 16
Slide 16 text
2x
every three years
Slide 17
Slide 17 text
Source: www.lukew.com
Slide 18
Slide 18 text
MOBILE IS THE WEB
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
Bandwidth is not
evenly distributed
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
MILLIONS
of people around the world
slow websites are unusable for
Slide 28
Slide 28 text
40%
of visitors will leave your site
if it takes more than 3 seconds to load
Source: https://blog.kissmetrics.com/loading-time/
Slide 29
Slide 29 text
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/
Slide 30
Slide 30 text
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/
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
THE PERFECT STORM
Bigger sites
Weaker devices
Higher expectations
Slide 33
Slide 33 text
What can you do about it?
Slide 34
Slide 34 text
What can you do about it?
(Little changes can make a big difference.)
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
1
Measuring Web Performance
Slide 37
Slide 37 text
1
Measuring Web Performance
2
Annoying Browser Quirks
Slide 38
Slide 38 text
1
Measuring Web Performance
2
Annoying Browser Quirks
3
Reducing Page Weight
Slide 39
Slide 39 text
1
Measuring Web Performance
2
Annoying Browser Quirks
3
Reducing Page Weight
4
Server Optimizations
Slide 40
Slide 40 text
1
Measuring Web Performance
2
Annoying Browser Quirks
3
Reducing Page Weight
4
Server Optimizations
5
Q&A
Slide 41
Slide 41 text
SLIDES & DOWNLOADS
https://gomakethings.com/talks
Slide 42
Slide 42 text
Who am I and
why should you care?
0
Slide 43
Slide 43 text
$
@ChrisFerdinandi
Slide 44
Slide 44 text
! Go Make Things
GoMakeThings.com
Slide 45
Slide 45 text
No content
Slide 46
Slide 46 text
https://gomakethings.com/wicked-fast-websites
Slide 47
Slide 47 text
Measuring Web Performance
1
Slide 48
Slide 48 text
HOW FAST IS
FAST ENOUGH?
Slide 49
Slide 49 text
1 second
Source: https://www.nngroup.com/articles/response-times-3-important-limits/
Slide 50
Slide 50 text
Total load time and page weight
aren’t the right metrics
Slide 51
Slide 51 text
How do you
measure performance?
Slide 52
Slide 52 text
TIME TO FIRST BYTE
How quickly your server is
sending data back to the browser
Slide 53
Slide 53 text
START RENDER
How quickly the browser begins
displaying content to your visitor
Slide 54
Slide 54 text
Perceived performance matters
more than actual performance
Slide 55
Slide 55 text
http://www.webpagetest.org
Slide 56
Slide 56 text
TARGET PERFORMANCE
Time to First Byte
100ms - 300ms
Start Render
Cable: 1,000ms
3g: 3,000ms
EDGE: 5,000ms
Slide 57
Slide 57 text
https://developers.google.com/speed/pagespeed/insights/
Slide 58
Slide 58 text
https://developers.google.com/speed/pagespeed/insights/
Slide 59
Slide 59 text
https://whatdoesmysitecost.com
Slide 60
Slide 60 text
Annoying Browser Quirks
2
Slide 61
Slide 61 text
No content
Slide 62
Slide 62 text
No content
Slide 63
Slide 63 text
No content
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
FAST
300kb
SLOW
100kb 100kb 100kb
Slide 67
Slide 67 text
DNS LOOKUPS
HTTP HEADERS
REDIRECTS
404s
Lots of places for things to go wrong
Slide 68
Slide 68 text
Browsers only download
2 files at a time
Slide 69
Slide 69 text
This is fixed in HTTP2
(but browser and host support isn’t large enough yet)
Source: https://www.youtube.com/watch?v=fJ0C4zN5uOQ
Slide 70
Slide 70 text
COMBINE FILES
Concatenation
Slide 71
Slide 71 text
svg.js
canvas.js
Slide 72
Slide 72 text
svg.js
canvas.js
detects.js
Slide 73
Slide 73 text
dropdowns.js
fluidvids.js
modals.js
svg.js
canvas.js
detects.js
Slide 74
Slide 74 text
dropdowns.js
fluidvids.js
modals.js
svg.js
canvas.js
detects.js
main.js
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
https://wordpress.org/plugins/minqueue/
Slide 77
Slide 77 text
https://wordpress.org/plugins/minqueue/
Slide 78
Slide 78 text
https://wordpress.org/plugins/minqueue/
Slide 79
Slide 79 text
JS BLOCKS RENDERING
Slide 80
Slide 80 text
Browsers only download
2 files at a time
(except JavaScript files,
which block all other downloads)
Slide 81
Slide 81 text
FILE LOCATION MATTERS
Detects in the header
Everything else in the footer
Slide 82
Slide 82 text
SPECIFY A LOCATION
Slide 83
Slide 83 text
// 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');
Slide 84
Slide 84 text
// 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');
Slide 85
Slide 85 text
in_footer
false = header
true = footer
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
https://github.com/cferdinandi/gmt-scripts-to-footer
Slide 88
Slide 88 text
Reducing Page Weight
3
Slide 89
Slide 89 text
No content
Slide 90
Slide 90 text
These add a lot of weight
Slide 91
Slide 91 text
REMOVE WHITESPACE
Minification
Slide 92
Slide 92 text
No content
Slide 93
Slide 93 text
75%
reduction in file weight
Slide 94
Slide 94 text
No content
Slide 95
Slide 95 text
https://wordpress.org/plugins/minqueue/
Slide 96
Slide 96 text
https://github.com/cferdinandi/gmt-html-minify/
Slide 97
Slide 97 text
63.5%
of an average webpage’s weight is images
Source: http://httparchive.org/interesting.php#bytesperpage
Slide 98
Slide 98 text
CONFLICTING INTERESTS
Slide 99
Slide 99 text
High-Density Display
CONFLICTING INTERESTS
Slide 100
Slide 100 text
High-Density Display
Low-Bandwidth
Computing
CONFLICTING INTERESTS
Slide 101
Slide 101 text
How do you balance these
competing interests?
Slide 102
Slide 102 text
PICK THE RIGHT FORMAT
Slide 103
Slide 103 text
PNGs
Logos
Clean, simple images
JPGs
Photos
Noisy images
Slide 104
Slide 104 text
TEST & MEASURE
Slide 105
Slide 105 text
SMUSH YOUR IMAGES
Slide 106
Slide 106 text
SMUSHING
Removing all of the metadata
associated with an image.
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
TOOLS & TECHNIQUES
ImageOptim
b64.io
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
No content
Slide 111
Slide 111 text
DIFFERENT JPG FORMATS
Baseline Progressive
Slide 112
Slide 112 text
DIFFERENT JPG FORMATS
Baseline Progressive
Slide 113
Slide 113 text
Progressive JPGs feel faster
(even if they take the same time to load)
Slide 114
Slide 114 text
Perceived performance matters
more than actual performance
Slide 115
Slide 115 text
TOOLS & TECHNIQUES
ImageOptim
b64.io
Slide 116
Slide 116 text
COMPRESS YOUR JPGs
Slide 117
Slide 117 text
Uncompressed
2.7mb
Compressed
766kb
Slide 118
Slide 118 text
71.6%
smaller than the original
Slide 119
Slide 119 text
70
High-quality JPG compression
Slide 120
Slide 120 text
70
High-quality JPG compression
90
WordPress default
Slide 121
Slide 121 text
90
WordPress default
70
High-quality JPG compression
82
WordPress 4.5
Slide 122
Slide 122 text
No content
Slide 123
Slide 123 text
https://github.com/cferdinandi/gmt-image-compress-and-sharpen
Slide 124
Slide 124 text
img {
max-width: 100%;
height: auto;
}
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
Different viewports.
Different images.
Slide 127
Slide 127 text
Your options are…
Slide 128
Slide 128 text
SPEED vs. AESTHETICS
Slide 129
Slide 129 text
Today, you make decisions that
should be made by the browser
(and visitor).
Slide 130
Slide 130 text
and srcset
Slide 131
Slide 131 text
Slide 132
Slide 132 text
Slide 133
Slide 133 text
Slide 134
Slide 134 text
Slide 135
Slide 135 text
The markup kind of sucks
Slide 136
Slide 136 text
Slide 137
Slide 137 text
Slide 138
Slide 138 text
The WordPress Way
Slide 139
Slide 139 text
WordPress does this automatically!
(as of WordPress 4.4)
Slide 140
Slide 140 text
https://wordpress.org/plugins/ricg-responsive-images/
Slide 141
Slide 141 text
Server Optimizations
4
Slide 142
Slide 142 text
GZIPPING
Compressing website files on the server
before sending them to the browser
Slide 143
Slide 143 text
70%
reduction in website size
Source: https://developer.yahoo.com/performance/rules.html
Slide 144
Slide 144 text
GZIP YOUR SITE
Slide 145
Slide 145 text
http://gzipwtf.com
Slide 146
Slide 146 text
No content
Slide 147
Slide 147 text
No content
Slide 148
Slide 148 text
No content
Slide 149
Slide 149 text
No content
Slide 150
Slide 150 text
No content
Slide 151
Slide 151 text
No content
Slide 152
Slide 152 text
This is a slow process
Slide 153
Slide 153 text
You can tell WordPress to compile
static HTML files ahead of time
Slide 154
Slide 154 text
USE A CACHING PLUGIN
Slide 155
Slide 155 text
OFTEN RECOMMENDED
W3 Total Cache
WP Super Cache
Slide 156
Slide 156 text
OFTEN RECOMMENDED
W3 Total Cache
WP Super Cache
They’re a bit complicated to setup
Slide 157
Slide 157 text
https://cometcache.com/
Slide 158
Slide 158 text
The only option you need to configure
https://cometcache.com/
Slide 159
Slide 159 text
Putting It All Together
5
Slide 160
Slide 160 text
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
Slide 161
Slide 161 text
http://webpagetest.org
Slide 162
Slide 162 text
TARGET PERFORMANCE
Time to First Byte
100ms - 300ms
Start Render
Cable: 1,000ms
3g: 3,000ms
EDGE: 5,000ms
Slide 163
Slide 163 text
Perceived performance matters
more than actual performance
Slide 164
Slide 164 text
?
Slide 165
Slide 165 text
Thank You!
Slide 166
Slide 166 text
SLIDES & DOWNLOADS
https://gomakethings.com/talks