Slide 1
Slide 1 text
DevDay, Berlin 2018
Building fast websites
against all odds
Photo by Emil Vilsek on Unsplash
Slide 2
Slide 2 text
Who am I?
Ryan Townsend
CTO, SHIFT – @ryantownsend
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Performance is pretty important…
‘Why Fast Matters’ by @csswizardry – https://bit.ly/2kiVDAz
Slide 5
Slide 5 text
Traffic x Conversion Rate x AOV
=
Slide 6
Slide 6 text
Performance = Traffic
Slide 7
Slide 7 text
“The result of rebuilding our pages for
performance led to [...] a 15 percent
increase in SEO traffic”
– Pinterest
Source – https://bit.ly/2ICPv4Z
Slide 8
Slide 8 text
“[…] starting in July 2018, page speed will
be a ranking factor for mobile searches.”
– Google
Source – https://bit.ly/2Dt5Plz
Slide 9
Slide 9 text
Performance = Conversion
Slide 10
Slide 10 text
“For every 100ms decrease in homepage load
speed, Mobify's customer base saw a 1.11% lift
in session based conversion, amounting to an
average annual revenue increase of $376,789”
– Mobify
Source – https://bit.ly/2s0FDHS
Slide 11
Slide 11 text
“Similarly, for every 100ms decrease in
checkout page load speed, Mobify's
customers saw a 1.55% lift in session based
conversion, amounting to an average
annual revenue increase of $526,147”
– Mobify
Source – https://bit.ly/2s0FDHS
Slide 12
Slide 12 text
Performance = AOV
Slide 13
Slide 13 text
+9.6% pages/session
Slide 14
Slide 14 text
+8.7% AOV
Slide 15
Slide 15 text
Performance x Performance x
Performance =
Slide 16
Slide 16 text
But it’s not that easy…
Slide 17
Slide 17 text
Selling performance
can be tricky
Slide 18
Slide 18 text
“Can you implement AMP?”
Slide 19
Slide 19 text
•Replica of your site
•Restricted HTML: limited AMP elements
•Restricted JS: no custom JS allowed
•Restricted CSS: inlined, 50kb max
•No repaint: fixed element sizing
•No desktop: mobile-only
•Shown within Google’s branding
•Stale-while-revalidate: minimum 15 seconds refresh
•Extra QA effort
Slide 20
Slide 20 text
It’s gonna get expensive
Slide 21
Slide 21 text
“But the carousel!”
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
“[…] we now feel ready to take the next step and
work to support more instant-loading content not
based on AMP technology in areas of Google Search
designed for this, like the Top Stories carousel”
– AMP Project @ Google
Source – https://bit.ly/2JakbtC
Slide 24
Slide 24 text
Why don’t we just build
fast sites in the first place?
Slide 25
Slide 25 text
Smithsonian Institution Neg. 83-14878.
“It's easier to ask forgiveness
than it is to get permission.”
– Grace Hopper
Slide 26
Slide 26 text
You don’t need permission
to build fast websites
Slide 27
Slide 27 text
The Slowest Site in the World
Slide 28
Slide 28 text
github.com/ryantownsend/slowest-site-in-the-world
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
https:/
/www.webpagetest.org/easy
Slide 31
Slide 31 text
Initial Results?
•Start render: 6.4s
•SpeedIndex: 12717
•Interactive: 4.4s
•Bandwidth: 2,594 KB
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
1. Connection
2.
3. CSS
4. Webfonts
5. JavaScript
6. Images
Slide 34
Slide 34 text
Connection
Slide 35
Slide 35 text
You can’t control your infrastructure without
permission, but you can check features are enabled:
•GZIP / Brotli
•OCSP for SSL
•HTTP/2
•Connection: keep-alive
Slide 36
Slide 36 text
Slide 37
Slide 37 text
Correct Order
1. character encoding / viewport
2.
3. Resource hints
4. Inline
5. External stylesheet
6. Inline <style>
7. External <script>
8. Anything else, e.g. other meta tags
Source – @csswizardry
Slide 38
Slide 38 text
Resource Hints
•DNS Prefetch
•Preconnect (CDN, 3rd parties)
•Prefetch
•Preload (CSS @imports, @font-face etc)
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
Progressive-enhancement, solid support
Slide 41
Slide 41 text
Progressive-enhancement, solid support
Slide 42
Slide 42 text
Results?
Slide 43
Slide 43 text
Start Render SpeedIndex Interactive Bandwidth
(-1.8s) (+184) (-0.1s) (no change)
Value: $6,782,202 / year
Value based on Mobify case study
Slide 44
Slide 44 text
CSS
Slide 45
Slide 45 text
Remove @import
Slide 46
Slide 46 text
Inline (Critical) CSS
Slide 47
Slide 47 text
Asynchronous below-the-fold CSS
Slide 48
Slide 48 text
Results?
Slide 49
Slide 49 text
Start Render SpeedIndex Interactive Bandwidth
(-0.1s) (-348) (-0.2s) (no change)
Value: $376,789 / year
Value based on Mobify case study
(ideal conditions)
Slide 50
Slide 50 text
Start Render SpeedIndex Interactive Bandwidth
(-90.1s) (-∞) (-0.2s) (no change)
Value: $339,486,889 / year
Value based on Mobify case study
(Google Fonts offline)
Slide 51
Slide 51 text
Start Render SpeedIndex Interactive Bandwidth
(-90.1s) (-∞) (-0.2s) (no change)
Value: $38,754 / hour
Value based on Mobify case study
(Google Fonts offline)
Slide 52
Slide 52 text
Webfonts
Slide 53
Slide 53 text
Self-host
Slide 54
Slide 54 text
font-display: swap / optional
Slide 55
Slide 55 text
Progressive-enhancement, average support
Slide 56
Slide 56 text
WOFF2
Slide 57
Slide 57 text
Solid support, WOFF1 for IE9-IE11
Slide 58
Slide 58 text
unicode-range
(bundling for web fonts)
Slide 59
Slide 59 text
/* latin */
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat Regular'), local(‘Montserrat-Regular'),
url(/fonts/montserrat.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
font-display: swap;
}
Slide 60
Slide 60 text
Results?
Slide 61
Slide 61 text
Start Render SpeedIndex Interactive Bandwidth
(-1.8s) (-258) (-0.1s) (no change)
Value: $6,782,202 / year
Value based on Mobify case study
Slide 62
Slide 62 text
JavaScript
Slide 63
Slide 63 text
Sync vs Async vs Defer
still valuable!
to be avoided!
Slide 64
Slide 64 text
Don’t let third parties control
your performance or uptime
Slide 65
Slide 65 text
https://cdnjs.cloudflare.com/ajax/
libs/jquery/3.3.1/jquery.min.js
(to be avoided!)
Slide 66
Slide 66 text
Source – https://bit.ly/2ij5XIt
Slide 67
Slide 67 text
Bundling & Tree-shaking
Slide 68
Slide 68 text
Results?
Slide 69
Slide 69 text
Start Render SpeedIndex Interactive Bandwidth
(-0.1s) (-691) (-2.2s) (-5KB)
Value: $376,789 / year
Value based on Mobify case study
Slide 70
Slide 70 text
Images
Slide 71
Slide 71 text
Foreground vs Background
Slide 72
Slide 72 text
background-image: url(image.jpg)
vs
Slide 73
Slide 73 text
Hero loaded after lower-priority product images
Slide 74
Slide 74 text
Corrected by using a foreground ![]()
Slide 75
Slide 75 text
Lazy-load Beneath the Fold
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Source – medium.com
Low-Quality Image Preview (LQIP)
Slide 79
Slide 79 text
Source – medium.com
Low-Quality Image Preview (LQIP)
Slide 80
Slide 80 text
Serve Appropriate Sizes
Slide 81
Slide 81 text
Latest version of all the major browsers
Slide 82
Slide 82 text
Serve Appropriate Formats
Slide 83
Slide 83 text
Blink-based browsers only
Slide 84
Slide 84 text
Safari only
Slide 85
Slide 85 text
IE/Edge only
Slide 86
Slide 86 text
our different formats
our different sizes
fallback to JPEG with an old-school Slide 87
Slide 87 text
Results?
Slide 88
Slide 88 text
Start Render SpeedIndex Interactive Bandwidth
(-1.7s) (-6948) (-0.1s) (-2,224KB)
Value: $6,405,413 / year
Value based on Mobify case study
Slide 89
Slide 89 text
https://images.guide/
Slide 90
Slide 90 text
Show me the money…
Slide 91
Slide 91 text
Start Render SpeedIndex Interactive Bandwidth
(-3.8s) (-8486) (-2.1s) (-2,229KB)
Value: $14,317,982 / year
Value based on Mobify case study
Slide 92
Slide 92 text
Original Optimised
https://bit.ly/2IViWzf
Slide 93
Slide 93 text
What about Dev Day 2018?
Slide 94
Slide 94 text
Start Render SpeedIndex Interactive Bandwidth
(-1.7s) (-2335) (-5.2s) (-3,105KB)
Value: $6,405,413 / year
Value based on Mobify case study
Slide 95
Slide 95 text
323,000 tickets
Slide 96
Slide 96 text
https://bit.ly/2L6LW3T
Slide 97
Slide 97 text
Low-hanging fruit can have
immense impact on performance
Slide 98
Slide 98 text
Bonus Point!
Slide 99
Slide 99 text
Service Workers
Slide 100
Slide 100 text
Latest version of all the major browsers
Slide 101
Slide 101 text
•Progressive enhancement
•Network control
•Offline support
•Progressive Web Apps (PWAs)
•stale-while-revalidate / stale-while-error
•Protect against 3rd party slow-downs
Slide 102
Slide 102 text
function timeout(delay){
return new Promise(function(resolve, reject) {
setTimeout(function(){
resolve(new Response('', {
status: 408,
statusText: 'Request timed out.'
}));
}, delay);
});
}
self.addEventListener('fetch', function(event {
event.respondWith(Promise.race([
fetch(event.request),
timeout(2000)
]));
});
attempt the request
force a 2-second timeout
Slide 103
Slide 103 text
Thank you!
Ryan Townsend
CTO, SHIFT – @ryantownsend