Slide 1
Slide 1 text
More Than You Ever Wanted
to Know About Resource Hints
Harry Roberts • @csswizardry
Slide 2
Slide 2 text
Hi, I’m Harry
Consultant Performance Engineer
Leeds, UK
csswizardry.com
@csswizardry
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
i
Pro-Tip / Short Summary
Slide 6
Slide 6 text
!
Caveat / Warning / Bug
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
Resource Hints
Slide 9
Slide 9 text
“
“These primitives enable the developer […] to
assist the user agent in the decision process of
which origins it should connect to, and which
resources it should fetch and preprocess to
improve page performance.”
Slide 10
Slide 10 text
i
Single lines of HTML
that can dramatically
speed up your site
Slide 11
Slide 11 text
...
...
Slide 12
Slide 12 text
csswz.it/rh
Slide 13
Slide 13 text
Overview
1.dns-prefetch
2.preconnect
3.prefetch
4.preload
5.subresource
6.prerender
Slide 14
Slide 14 text
dns-prefetch
Slide 15
Slide 15 text
csswz.it/dns-prefetch
Slide 16
Slide 16 text
i
Resolve the IP address
for a given domain
ahead of time
Slide 17
Slide 17 text
i
When you know the
domain but not the URL
Slide 18
Slide 18 text
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
154
157
Slide 21
Slide 21 text
5g8a9luSZVI
Slide 22
Slide 22 text
DNS Lookup
Slide 23
Slide 23 text
216.58.198.110
Slide 24
Slide 24 text
“
“[…] common names […] can answer in closer to
80–120ms. […] an uncommon name […] can
average closer to 200–300ms.”
— csswz.it/2GuZo21
Slide 25
Slide 25 text
“
“More interestingly, for any of these queries
that access the internet, dropped packets, and
overworked (under provisioned) name resolvers,
regularly increases the total resolution time to
between 1 and 10 seconds.”
— csswz.it/2GuZo21
Slide 26
Slide 26 text
@andydavies
Slide 27
Slide 27 text
!
dns-prefetch is
implemented as
prefetch in IE9…
Slide 28
Slide 28 text
preconnect
Slide 29
Slide 29 text
csswz.it/preconnect
Slide 30
Slide 30 text
i
Resolve the IP address
and open a TCP/TLS
connection for a given
domain ahead of time
Slide 31
Slide 31 text
i
When you know the
domain but not the URL
Slide 32
Slide 32 text
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
5g8a9luSZVI
Slide 35
Slide 35 text
TCP Handshake TLS Negotiation
Slide 36
Slide 36 text
hpbn.co
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
preconnect with
dns-prefetch fallback
Slide 40
Slide 40 text
Slide 41
Slide 41 text
!
Breaks in Safari
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
@andydavies
Slide 44
Slide 44 text
Slide 45
Slide 45 text
!
Be judicious with
preconnect
Slide 46
Slide 46 text
Be Judicious
Only warm up frequent, significant, and likely origins
Don’t warm up fourth, fifth, sixth party origins
Opening many connections can have a CPU and battery cost
Chrome can only conduct six simultaneous DNS resolutions
Slide 47
Slide 47 text
!
Firefucked
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
prefetch
Slide 50
Slide 50 text
csswz.it/prefetch
Slide 51
Slide 51 text
i
A file needed for
subsequent navigation
Slide 52
Slide 52 text
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
No content
Slide 56
Slide 56 text
Slide 57
Slide 57 text
i
Download the file and
drop it into HTTP cache
for later usage
Slide 58
Slide 58 text
“
“The user agent SHOULD NOT apply
preprocessing on the response and MUST
NOT automatically execute or apply it against
the current page context.”
Slide 59
Slide 59 text
Downloaded by this…
… executed by this.
Slide 60
Slide 60 text
Caching
prefetch will not execute or otherwise process the resource
It will drop it into HTTP cache as per its caching headers
Except…
Slide 61
Slide 61 text
“
“…those with the no-store Cache-
Control header. A resource will
be revalidated before use if there is
a Vary response header, no-cache Cache-
Control header, or if the resource is more than
five minutes old.”
— csswz.it/nostate-prefetch
Slide 62
Slide 62 text
i
Fetched with lowest
possible priority
Slide 63
Slide 63 text
i
In-flight prefetches
persist across
navigations
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
!
…prefetch acts like
dns-prefetch in IE9
Slide 67
Slide 67 text
Slide 68
Slide 68 text
preload
Slide 69
Slide 69 text
csswz.it/preload
Slide 70
Slide 70 text
i
A mandatory fetch for
a file needed for the
current navigation
Slide 71
Slide 71 text
i
A way to surface late-
discovered resources
Slide 72
Slide 72 text
Slide 73
Slide 73 text
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
Late-discovered
resource?
Slide 76
Slide 76 text
HTML
CSS
Font
}
1000ms
Slide 77
Slide 77 text
HTML
CSS
Background
}
1250ms
Slide 78
Slide 78 text
HTML
CSS
Font
JS
VDOM
}
1350ms
Slide 79
Slide 79 text
preload helps the
browser find them sooner
Slide 80
Slide 80 text
Slide 81
Slide 81 text
HTML
CSS
Font
JS
VDOM
}
750ms
Slide 82
Slide 82 text
The as Attribute
Slide 83
Slide 83 text
Slide 84
Slide 84 text
"audio"
"document"
"embed"
"fetch"
"font"
as="image"
"object"
"script"
"style"
"track"
"video"
"worker"
Slide 85
Slide 85 text
“
“The attribute is necessary to guarantee correct
prioritization, request matching, application of
the correct CSP3 policy, and setting of the
appropriate Accept request header.”
Slide 86
Slide 86 text
No content
Slide 87
Slide 87 text
!
Don’t try to be sneaky
Slide 88
Slide 88 text
Slide 89
Slide 89 text
Slide 90
Slide 90 text
No content
Slide 91
Slide 91 text
i
Priority Hints will help
Slide 92
Slide 92 text
Slide 93
Slide 93 text
The type Attribute
Slide 94
Slide 94 text
Slide 95
Slide 95 text
The crossorigin Attribute
Slide 96
Slide 96 text
“
“Preload links for CORS enabled resources, such
as fonts or images with a crossorigin attribute,
must also include a crossorigin attribute, in
order for the resource to be properly used.”
Slide 97
Slide 97 text
i
Keep an eye on Console
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
!
Beware Google Chrome
Slide 100
Slide 100 text
Chrome Issues
Chrome over-prioritises preload
Dispatches preloads before other critical resources
Often returns less-critical resources sooner
Slide 101
Slide 101 text
@andydavies
Slide 102
Slide 102 text
@andydavies
Slide 103
Slide 103 text
0.4s slower to
start render
@andydavies
Slide 104
Slide 104 text
subresource
Slide 105
Slide 105 text
i
Precursor to preload…
Slide 106
Slide 106 text
!
…but completely
deprecated.
Slide 107
Slide 107 text
Slide 108
Slide 108 text
SUBRESOURCE
Slide 109
Slide 109 text
“
“…not useful, proprietary, and buggy.”
— Yoav Weiss, csswz.it/2VOEyQc
Slide 110
Slide 110 text
prerender
Slide 111
Slide 111 text
csswz.it/prerender
Slide 112
Slide 112 text
i
Download and build
entire webpages in the
background…
Slide 113
Slide 113 text
i
…kinda…
Slide 114
Slide 114 text
i
…it’s complicated.
Slide 115
Slide 115 text
No content
Slide 116
Slide 116 text
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
No content
Slide 119
Slide 119 text
PRERENDER
Slide 120
Slide 120 text
Problematic Prerender
Huge memory footprint with rendering whole new pages
Bandwidth usage spikes for site and user
Register multiple analytics hits, ad impressions
How do we handle timers, HTTP auth, interstitials, autoplay media?
How do we handle animations? Do we expect the carousel to start
running? Or do we write more code to wait for page visibility?
What if we get MitM and are made to prerender a malicious page?
How would the user know? They wouldn’t!
Slide 121
Slide 121 text
Prerender is dead,
long live prerender!
Slide 122
Slide 122 text
Prerender is dead,
long live prerender!
NoState Prefetch
Slide 123
Slide 123 text
i
prerender is the API;
NoState Prefetch is the
mechanism
Slide 124
Slide 124 text
!
prerender will not
render anything
Slide 125
Slide 125 text
!
prerender will not
render anything
!
Slide 126
Slide 126 text
NoState Prefetch
Slide 127
Slide 127 text
i
A recursive prefetch
Slide 128
Slide 128 text
A B
B1
B2
B3
B4
B5
Slide 129
Slide 129 text
Prerender
Prerender
Slide 130
Slide 130 text
i
Fetched with lowest
possible priority
Slide 131
Slide 131 text
No content
Slide 132
Slide 132 text
Tips, Tricks, and Gotchas
Slide 133
Slide 133 text
i
Deploy as HTTP
Headers
Slide 134
Slide 134 text
No content
Slide 135
Slide 135 text
@andydavies
Slide 136
Slide 136 text
!
Edge only supports
HTTP header for
preconnect
Slide 137
Slide 137 text
!
Edge doesn’t support
HTTP header for
preload
Slide 138
Slide 138 text
i
Generate Dynamically
Slide 139
Slide 139 text
instant.page
Slide 140
Slide 140 text
No content
Slide 141
Slide 141 text
!
Have an escape hatch
Slide 142
Slide 142 text
if ($omgWeAreBeingDDoSed == false) {
}
Slide 143
Slide 143 text
!
You Need a Scheme
Slide 144
Slide 144 text
==
Slide 145
Slide 145 text
Slide 146
Slide 146 text
All Together!
Slide 147
Slide 147 text
Implementing Resource Hints
1.Identify a key page
2.Audit important assets and origins
3.Assess likely user flows
4.Design bespoke Resource Hint strategies
Slide 148
Slide 148 text
Web font
Likely next navigation
Critical third party
Slide 149
Slide 149 text
Web font Likely next navigation
Critical third party
JS image gallery
Slide 150
Slide 150 text
Resource Hint Strategy
1.HTTP header preconnect to cloudinary
2.Regular preconnect for other third parties
3.preload to discover web font sooner
4.prefetch for gallery.js
5.prerender or prefetch for likely next navigation
Slide 151
Slide 151 text
// HTTP response header
link: ; rel=preconnect
Slide 152
Slide 152 text
Slide 153
Slide 153 text
Slide 154
Slide 154 text
Slide 155
Slide 155 text
Slide 156
Slide 156 text
Slide 157
Slide 157 text
Slide 158
Slide 158 text
Thank You!
@csswizardry
[email protected]
speakerdeck.com/csswizardry
harry.is/for-hire