prebrowsing - velocity ny 2013

[email protected] stevesouders.com/docs/velocity-prebrowsing-20131015.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.

Prebrowsing

flickr.com/photos/adrianhu/8731191034/

flickr.com/photos/garylerude/7524325808/

flickr.com/photos/garylerude/7524325808/

flickr.com/photos/mn_francis/388474284/

get what the browser needs

before the browser needs it

I made this word up & own the domain

TM Prebrowsing

y ! cache? first time visit

cleared/purged

expired

modified

flickr.com/photos/athrasher/2823255013/

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?

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/

owner <link rel="dns-prefetch"...!



DNS pre-resolution

TCP pre-connect

prefresh

preloader

dev

dev

dev

browser

browser

browser

browser & dev


when <link rel="dns-prefetch"...!



DNS pre-resolution

TCP pre-connect

prefresh

preloader

prev

prev

prev

xition

xition

xition

current


blog.chromium.org/2008/09/dns-prefetching-or-pre-resolving.html

chrome://histograms/DNS

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/

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.”?!

are they downloaded?

how many?

prefetched immediately?

what’s the download priority?

what happens on page transition?

is https supported?

prev: prefetch questions


also http://prebrowsing.com/

prev: prefetch answers

* --prerender=enable!

Downloads Resource

Android 4 Y

Chrome 31+* Y

Firefox 23+ Y

Firefox Mobile 24+ Y

Opera 15+ Y




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




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





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






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


make resources cacheable

do critical resources: HTML, JS, CSS

add "Accept-Ranges: bytes" header

prev: prefetch Tips


chrome://net-internals/#prerender

--prerender="enabled"!

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/

prev: browser support


** 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/

xition

DNS pre-resolve

TCP pre-connect

prefresh

HUGE

window of opportunity

w3.org/TR/navigation-timing/

xition

xition

DNS pre-resolve

TCP pre-connect

prefresh

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

chrome://dns/

browser resolves DNS before needed •  start pages •  typing URL or search




chrome://predictors/

browser resolves DNS before needed •  start pages •  typing URL or search •  document’s HREFs & SRCs •  onhover, mousedown

browser pre-resolves RESOURCE domains during xition




chrome://dns/

next step above DNS pre-resolve

for high confidence navigations

xition: TCP pre-connect

flickr.com/photos/sjunnesson/4906652829/

chrome://dns/

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/

current

preloader

done by browser automatically,

but devs need know what to expect

flickr.com/photos/frankfarm/191415409/

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/


preloader surprizes chegg.com – scripts at bottom

which browsers?


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/bekahstargazing/318930460/

Takeaways <link rel="dns-prefetch"...!



DNS pre-resolution

TCP pre-connect

prefresh

preloader

dev

dev

dev

browser

browser

browser

browser & dev

flickr.com/photos/myklroventine/4062102754/

Steve Souders [email protected]

stevesouders.com/docs/velocity-prebrowsing-20131015.pptx flickr.com/photos/nj_dodge/187190601/

prebrowsing - velocity ny 2013

Sports

prefetch keyword

prefetching flickr

prefetch tips

prefetch questions

link type prefetch

xitiondns preresolve

resource parallel android

specified resource