prebrowsing - velocity ny 2013
TRANSCRIPT
![Page 1: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/1.jpg)
[email protected] stevesouders.com/docs/velocity-prebrowsing-20131015.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
Prebrowsing
![Page 2: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/2.jpg)
flickr.com/photos/adrianhu/8731191034/
![Page 3: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/3.jpg)
flickr.com/photos/garylerude/7524325808/
![Page 4: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/4.jpg)
flickr.com/photos/garylerude/7524325808/
flickr.com/photos/mn_francis/388474284/
![Page 5: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/5.jpg)
![Page 6: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/6.jpg)
get what the browser needs
before the browser needs it
I made this word up & own the domain
TM Prebrowsing
![Page 7: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/7.jpg)
y ! cache? first time visit
cleared/purged
expired
modified
flickr.com/photos/athrasher/2823255013/
![Page 8: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/8.jpg)
flickr.com/photos/josefeliciano/3849557951/
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?
![Page 9: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/9.jpg)
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/
![Page 10: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/10.jpg)
owner <link rel="dns-prefetch"...!
<link rel="prefetch"...!
<link rel="prerender"...!
DNS pre-resolution
TCP pre-connect
prefresh
preloader
dev
dev
dev
browser
browser
browser
browser & dev
flickr.com/photos/dalydose/5492111447/
![Page 11: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/11.jpg)
when <link rel="dns-prefetch"...!
<link rel="prefetch"...!
<link rel="prerender"...!
DNS pre-resolution
TCP pre-connect
prefresh
preloader
prev
prev
prev
xition
xition
xition
current
flickr.com/photos/dalydose/5492111447/
![Page 12: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/12.jpg)
<link rel="dns-prefetch"...!
<link rel="prefetch"...!
<link rel="prerender"...!
prev xition current
DNS pre-resolve
TCP pre-connect
prefresh
preloader
![Page 13: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/13.jpg)
<link rel="dns-prefetch"...!
<link rel="prefetch"...!
<link rel="prerender"...!
before user intention is certain
risk of false positives (wasteful)
high confidence scenarios exist
prev
![Page 14: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/14.jpg)
![Page 15: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/15.jpg)
<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
prev: dns-prefetch
flickr.com/photos/chpaquette/507056729/
![Page 16: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/16.jpg)
blog.chromium.org/2008/09/dns-prefetching-or-pre-resolving.html
![Page 17: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/17.jpg)
chrome://histograms/DNS
![Page 18: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/18.jpg)
prev: browser support
* preliminary and subject to change
dns-prefetch
Chrome 22+
Chrome Mobile 29+
Firefox 22+
Firefox Mobile 24+
IE 11*
flickr.com/photos/himmelskratzer/212559623/
![Page 19: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/19.jpg)
whatwg.org/specs/web-apps/current-work/#link-type-prefetch
flickr.com/photos/captivated/1564878334/
<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.!
prev: prefetch
What about “The resource should be downloaded.”?!
![Page 20: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/20.jpg)
are they downloaded?
how many?
prefetched immediately?
what’s the download priority?
what happens on page transition?
is https supported?
prev: prefetch questions
flickr.com/photos/captivated/1564878334/
![Page 21: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/21.jpg)
also http://prebrowsing.com/
![Page 22: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/22.jpg)
![Page 23: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/23.jpg)
prev: prefetch answers
* --prerender=enable!
Downloads Resource
Android 4 Y
Chrome 31+* Y
Firefox 23+ Y
Firefox Mobile 24+ Y
Opera 15+ Y
flickr.com/photos/captivated/1564878334/
![Page 24: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/24.jpg)
prev: prefetch answers
* --prerender=enable!
Downloads Resource
# in 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)
(same domain) sharded domains
flickr.com/photos/captivated/1564878334/
![Page 25: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/25.jpg)
prev: prefetch answers
* --prerender=enable!
Downloads Resource
# in Parallel
After 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
(same domain) sharded domains
flickr.com/photos/captivated/1564878334/
![Page 26: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/26.jpg)
prev: prefetch answers
* --prerender=enable!
Downloads Resource
# in Parallel
After 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
(same domain) sharded domains
flickr.com/photos/captivated/1564878334/
![Page 27: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/27.jpg)
flickr.com/photos/captivated/1564878334/
prev: prefetch answers
* --prerender=enable!
Downloads Resource
# in Parallel
After 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
(same domain) sharded domains
![Page 28: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/28.jpg)
make resources cacheable
do critical resources: HTML, JS, CSS
add "Accept-Ranges: bytes" header
prev: prefetch Tips
flickr.com/photos/captivated/1564878334/
![Page 29: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/29.jpg)
<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
prev: prerender
flickr.com/photos/aftab/2640901551/
![Page 30: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/30.jpg)
chrome://net-internals/#prerender
--prerender="enabled"!
![Page 31: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/31.jpg)
previously prev: before user intention is known risk of false positives (wasteful)
reduce risk using onmousedown:
prev: onmousedown
var l = document.createElement('link'); !l.rel = "prefetch"; !l.href = "/utils.js"; !document.getElementsByTagName('head')
[0].appendChild(l); !
flickr.com/photos/braydawg/185092747/
![Page 32: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/32.jpg)
prev: browser support
* --prerender=enable!
** preliminary and subject to change
dns-prefetch prefetch prerender
Android 4 4
Chrome 22+ 31+* 22+
Chrome Mobile 29+
Firefox 22+ 23+
Firefox Mobile 24+ 24+
IE 11** 11** 11**
Opera 15+
flickr.com/photos/himmelskratzer/212559623/
![Page 33: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/33.jpg)
xition
DNS pre-resolve
TCP pre-connect
prefresh
HUGE
window of opportunity
![Page 34: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/34.jpg)
w3.org/TR/navigation-timing/
xition
![Page 35: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/35.jpg)
xition
DNS pre-resolve
TCP pre-connect
prefresh
![Page 36: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/36.jpg)
browser resolves DNS before needed • start pages
xition: DNS pre-resolve
flickr.com/photos/aukirk/8375505268/
aosabook.org/en/posa/high-performance-networking-in-chrome.html chromium.org/developers/design-documents/dns-prefetching
![Page 37: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/37.jpg)
chrome://dns/
![Page 38: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/38.jpg)
browser resolves DNS before needed • start pages • typing URL or search
xition: DNS pre-resolve
flickr.com/photos/aukirk/8375505268/
aosabook.org/en/posa/high-performance-networking-in-chrome.html chromium.org/developers/design-documents/dns-prefetching
![Page 39: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/39.jpg)
chrome://predictors/
![Page 40: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/40.jpg)
browser resolves DNS before needed • start pages • typing URL or search • document’s HREFs & SRCs • onhover, mousedown
browser pre-resolves RESOURCE domains during xition
xition: DNS pre-resolve
flickr.com/photos/aukirk/8375505268/
aosabook.org/en/posa/high-performance-networking-in-chrome.html chromium.org/developers/design-documents/dns-prefetching
![Page 41: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/41.jpg)
chrome://dns/
![Page 42: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/42.jpg)
next step above DNS pre-resolve
for high confidence navigations
xition: TCP pre-connect
flickr.com/photos/sjunnesson/4906652829/
![Page 43: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/43.jpg)
chrome://predictors/
![Page 44: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/44.jpg)
chrome://dns/
![Page 45: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/45.jpg)
![Page 46: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/46.jpg)
xition: prefresh I didn’t make this word up Michael Kleber did
TM
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-resource-prefetching="enabled"!
flickr.com/photos/chpaquette/507056729/
![Page 47: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/47.jpg)
chrome://predictors/
![Page 48: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/48.jpg)
current
preloader
done by browser automatically,
but devs need know what to expect
flickr.com/photos/frankfarm/191415409/
![Page 49: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/49.jpg)
preloader biggest browser performance improvement
EVER!
motivated by script downloads before: sequential – parser blocked
after: parallel – lookahead parser looks ahead
lots of (new) logic load scripts & stylesheets early
load images later
flickr.com/photos/matti_frisk/2717599581/
![Page 50: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/50.jpg)
flickr.com/photos/matti_frisk/2717599581/
preloader surprizes chegg.com – scripts at bottom
which browsers?
![Page 51: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/51.jpg)
flickr.com/photos/matti_frisk/2717599581/
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
![Page 52: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/52.jpg)
![Page 53: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/53.jpg)
![Page 54: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/54.jpg)
![Page 55: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/55.jpg)
![Page 56: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/56.jpg)
![Page 57: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/57.jpg)
flickr.com/photos/bekahstargazing/318930460/
![Page 58: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/58.jpg)
Takeaways <link rel="dns-prefetch"...!
<link rel="prefetch"...!
<link rel="prerender"...!
DNS pre-resolution
TCP pre-connect
prefresh
preloader
dev
dev
dev
browser
browser
browser
browser & dev
flickr.com/photos/myklroventine/4062102754/
![Page 59: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/59.jpg)
![Page 60: Prebrowsing - Velocity NY 2013](https://reader035.vdocuments.mx/reader035/viewer/2022062418/554f594fb4c905b9508b52b2/html5/thumbnails/60.jpg)
Steve Souders [email protected]
stevesouders.com/docs/velocity-prebrowsing-20131015.pptx flickr.com/photos/nj_dodge/187190601/