6. Prebrowsing
TM
I made this word up
& own the domain
get what the browser needs
before the browser needs it
7. y ! cache?
first time visit
cleared/purged
expired
modified
flickr.com/photos/athrasher/2823255013/
8. zen of prebrowsing
some techniques risk false positives
some don’t
sometimes the risk is high
sometimes it’s not
browsers do some prebrowsing
devs have to do some too
really? me?
flickr.com/photos/josefeliciano/3849557951/
9. just the facts
<link rel="dns-prefetch"...
!
<link rel="prefetch"...!
<link rel="prerender"...!
DNS pre-resolution
TCP pre-connect
prefresh
preloader
flickr.com/photos/dalydose/5492111447/
13. prev
before user intention is certain
<link rel="dns-prefetch"...!
<link rel="prefetch"...!
<link rel="prerender"...!
risk of false positives (wasteful)
high confidence scenarios exist
14.
15. prev: dns-prefetch
<link rel="dns-prefetch"
href="//cartoonnetwork.com">!
cost is low – less risk
may open TCP connections
ex: airbnb.com
<head>!
<link rel="dns-prefetch" href="//a0.muscache.com”>!
<link rel="dns-prefetch" href="//a1.muscache.com”>!
<link rel="dns-prefetch" href="//a2.muscache.com”>
!
chromium.org/developers/design-documents/dns-prefetching
flickr.com/photos/chpaquette/507056729/
19. prev: prefetch
<link rel="prefetch" href="http://
cartoonnetwork.com/utils.js">!
4.12.5.9 Link type "prefetch”
The prefetch keyword may be used with link, a, and area elements. This
keyword creates an external resource link.
The prefetch keyword indicates that preemptively fetching and caching the
specified resource is likely to be beneficial, as it is highly likely that the
user will require this resource.
!
There is no default type for resources given by the prefetch keyword.
whatwg.org/specs/web-apps/current-work/#link-type-prefetch
What about “The resource should be downloaded.”?!
flickr.com/photos/captivated/1564878334/
20. prev: prefetch questions
are they downloaded?
how many?
prefetched immediately?
what’s the download priority?
what happens on page transition?
is https supported?
flickr.com/photos/captivated/1564878334/
24. prev: prefetch answers
Downloads
# in
Resource Parallel
Android 4
Y
6 (1)
Chrome 31+*
Y
10 (6)
Firefox 23+
Y
1 (1)
Firefox Mobile 24+
Y
1 (1)
Opera 15+
Y
10 (6)
sharded domains
* --prerender=enable!
(same domain)
flickr.com/photos/captivated/1564878334/
25. prev: prefetch answers
Downloads
# in
After
Resource Parallel Onload
Android 4
Y
6 (1)
Y
Chrome 31+*
Y
10 (6)
N
Firefox 23+
Y
1 (1)
Y
Firefox Mobile 24+
Y
1 (1)
Y
Opera 15+
Y
10 (6)
N
sharded domains
* --prerender=enable!
(same domain)
flickr.com/photos/captivated/1564878334/
26. prev: prefetch answers
Downloads
# in
After
Resource Parallel Onload
Lowest
Priority
Android 4
Y
6 (1)
Y
n/a
Chrome 31+*
Y
10 (6)
N
N
Firefox 23+
Y
1 (1)
Y
n/a
Firefox Mobile 24+
Y
1 (1)
Y
n/a
Opera 15+
Y
10 (6)
N
N
sharded domains
* --prerender=enable!
(same domain)
flickr.com/photos/captivated/1564878334/
27. prev: prefetch answers
Downloads
# in
After
Resource Parallel Onload
Lowest
Priority
Page
Xition
Android 4
Y
6 (1)
Y
n/a
cancel
Chrome 31+*
Y
10 (6)
N
N
cancel
Firefox 23+
Y
1 (1)
Y
n/a
cancel
Firefox Mobile 24+
Y
1 (1)
Y
n/a
cancel
Opera 15+
Y
10 (6)
N
N
cancel
sharded domains
* --prerender=enable!
(same domain)
flickr.com/photos/captivated/1564878334/
28. prev: prefetch Tips
make resources cacheable
do critical resources: HTML, JS, CSS
add "Accept-Ranges: bytes" header
flickr.com/photos/captivated/1564878334/
29. prev: prerender
<link rel="prerender" href="http://
cartoonnetwork.com/">!
it’s like swapping in a hidden tab(by)
caching headers not a factor
JS is executed (page visiblity API)
high cost – high risk
developers.google.com/chrome/whitepapers/prerender
chrome://net-internals/#prerender
flickr.com/photos/aftab/2640901551/
31. prev: onmousedown
previously prev:
before user intention is known
risk of false positives (wasteful)
reduce risk using onmousedown:
var l = document.createElement('link'); !
l.rel = "prefetch";
!
l.href = "/utils.js";
!
document.getElementsByTagName('head')
[0].appendChild(l); !
flickr.com/photos/braydawg/185092747/
32. prev: browser support
dns-prefetch
Android 4
prefetch
prerender
4
Chrome
22+
Chrome Mobile
29+
Firefox
22+
23+
Firefox Mobile
24+
24+
IE
11**
11**
Opera
31+*
22+
11**
15+
* --prerender=enable!
** preliminary and subject to change
flickr.com/photos/himmelskratzer/212559623/
36. xition: DNS pre-resolve
browser resolves DNS before needed
• start pages
aosabook.org/en/posa/high-performance-networking-in-chrome.html
chromium.org/developers/design-documents/dns-prefetching
flickr.com/photos/aukirk/8375505268/
38. xition: DNS pre-resolve
browser resolves DNS before needed
• start pages
• typing URL or search
aosabook.org/en/posa/high-performance-networking-in-chrome.html
chromium.org/developers/design-documents/dns-prefetching
flickr.com/photos/aukirk/8375505268/
46. TM
xition: prefresh
I didn’t make this word up
Michael Kleber did
remember web pages’s resources
when web page is re-requested,
preload high confidence resources
avoids: 200, 304, disk i/o
in memory when needed
Chrome: --speculative-resourceprefetching="enabled"!
flickr.com/photos/chpaquette/507056729/
51. preloader surprizes
JS responsive images queued last
• IMG tag seen before JS executes
• bad if IMGs are lower priority
• good to shard domains
scripts “at the bottom” loaded
“at the top”
• steal connections
• critical IMGs delayed
flickr.com/photos/matti_frisk/2717599581/
