More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS Wizardry)

More Than You Ever Wanted
to Know About Resource Hints
Harry Roberts • @csswizardry

Hi, I’m Harry
Consultant Performance Engineer
Leeds, UK
csswizardry.com
@csswizardry

“
“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.”

i
Single lines of HTML
that can dramatically
speed up your site

Overview
1.dns-prefetch
2.preconnect
3.prefetch
4.preload
5.subresource
6.prerender

i
Resolve the IP address
for a given domain
ahead of time

iWhen you know the
domain but not the URL

154 <iframe
155 src="https://www.youtube.com/embed/5g8a9luSZVI"
156 width="560" height="315">
157 </iframe>

“
“[…] common names […] can answer in closer to
80–120ms. […] an uncommon name […] can
average closer to 200–300ms.”
— csswz.it/2GuZo21

“
“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

!
dns-prefetch is
implemented as
prefetch in IE9…

i
Resolve the IP address
and open a TCP/TLS
connection for a given
domain ahead of time

preconnect with 
dns-prefetch fallback

Be Judicious
Only warm up frequent, signiﬁcant, and likely origins
Don’t warm up fourth, ﬁfth, sixth party origins
Opening many connections can have a CPU and battery cost
Chrome can only conduct six simultaneous DNS resolutions

iA file needed for
subsequent navigation

i
Download the file and
drop it into HTTP cache
for later usage

“
“The user agent SHOULD NOT apply
preprocessing on the response and MUST
NOT automatically execute or apply it against
the current page context.”

<script src="/assets/video-player.js"></script>
Downloaded by this…
… executed by this.

Caching
prefetch will not execute or otherwise process the resource
It will drop it into HTTP cache as per its caching headers
Except…

“
“…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
ﬁve minutes old.”
— csswz.it/nostate-prefetch

iFetched with lowest
possible priority

i
In-flight prefetches
persist across
navigations

!…prefetch acts like
dns-prefetch in IE9

i
A mandatory fetch for
a file needed for the
current navigation

iA way to surface late-
discovered resources

HTML
CSS
Font
JS
VDOM
}
1350ms

preload helps the
browser find them sooner

"audio"
"document"
"embed"
"fetch"
"font"
as="image"
"object"
"script"
"style"
"track"
"video"
"worker"

“
“The attribute is necessary to guarantee correct
prioritization, request matching, application of
the correct CSP3 policy, and setting of the
appropriate Accept request header.”

“
“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.”

Chrome Issues
Chrome over-prioritises preload
Dispatches preloads before other critical resources
Often returns less-critical resources sooner

0.4s slower to
start render
@andydavies

!…but completely
deprecated.

“
“…not useful, proprietary, and buggy.”
— Yoav Weiss, csswz.it/2VOEyQc

i
Download and build
entire webpages in the
background…

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!

Prerender is dead, 
long live prerender!

Prerender is dead, 
long live prerender!
NoState Prefetch

i
prerender is the API;
NoState Prefetch is the
mechanism

!prerender will not
render anything

!prerender will not
render anything
!

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
<title>Prerender</title>
<link rel="prerender" href="https://csswizardry.com" />
</head>
<body>
<h1>Prerender</h1>
</body>
</html>

!
Edge only supports
HTTP header for
preconnect

!
Edge doesn’t support
HTTP header for
preload

if ($omgWeAreBeingDDoSed == false) {
<script src="https://instant.page/1.1.0" defer></script>
}

Implementing Resource Hints
1.Identify a key page
2.Audit important assets and origins
3.Assess likely user ﬂows
4.Design bespoke Resource Hint strategies

Web font
Likely next navigation
Critical third party

Web font Likely next navigation
Critical third party
JS image gallery

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

// HTTP response header
link: <https://res.cloudinary.com>; rel=preconnect

<link rel="preconnect"
href="https://www.google-analytics.com">
<link rel="dns-prefetch"
href="https://www.google-analytics.com">

<link rel="stylesheet" href="/assets/app.css" />

<link rel="prefetch" href="/assets/gallery.js" />

<link rel="prerender" href="/products/one.html" />
<link rel="prerender" href="/products/two.html" />
<link rel="prerender" href="/products/three.html" />

Thank You!
@csswizardry
csswizardry@gmail.com
speakerdeck.com/csswizardry
harry.is/for-hire

More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS Wizardry)

More Related Content

Similar to More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS Wizardry) (20)

More from Shift Conference (20)

Recently uploaded (20)

More Than You Ever Wanted to Know About Resource Hints - Harry Roberts (CSS Wizardry)