![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/](https://image.slidesharecdn.com/velocity-prebrowsing-20131015-131028163102-phpapp01/85/Prebrowsing-Velocity-NY-2013-31-320.jpg)
Prebrowsing - Velocity NY 2013
- 1. Prebrowsing souders@google.com stevesouders.com/docs/velocity-prebrowsing-20131015.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
- 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/
- 10. owner dev <link rel="dns-prefetch"... ! dev <link rel="prefetch"...! dev <link rel="prerender"...! browser DNS pre-resolution browser TCP pre-connect browser prefresh browser & dev preloader flickr.com/photos/dalydose/5492111447/
- 11. when prev <link rel="dns-prefetch"... ! prev <link rel="prefetch"...! prev <link rel="prerender"...! xition DNS pre-resolution xition TCP pre-connect xition prefresh current preloader flickr.com/photos/dalydose/5492111447/
- 12. prev xition current <link rel="dns-prefetch"...! <link rel="prefetch"...! <link rel="prerender"...! DNS pre-resolve TCP pre-connect prefresh preloader
- 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
- 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/
- 18. prev: browser support dns-prefetch Chrome 22+ Chrome Mobile 29+ Firefox 22+ Firefox Mobile 24+ IE 11* * preliminary and subject to change flickr.com/photos/himmelskratzer/212559623/
- 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/
- 23. prev: prefetch answers Downloads Resource Android 4 Y Chrome 31+* Y Firefox 23+ Y Firefox Mobile 24+ Y Opera 15+ Y * --prerender=enable! 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/
- 37. chrome://dns/
- 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/
- 40. xition: DNS pre-resolve browser resolves DNS before needed • start pages • typing URL or search • document’s HREFs & SRCs • onhover, mousedown browser pre-resolves RESOURCE domains during xition aosabook.org/en/posa/high-performance-networking-in-chrome.html chromium.org/developers/design-documents/dns-prefetching flickr.com/photos/aukirk/8375505268/
- 41. chrome://dns/
- 42. xition: TCP pre-connect next step above DNS pre-resolve for high confidence navigations flickr.com/photos/sjunnesson/4906652829/
- 44. chrome://dns/
- 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/
- 48. current preloader done by browser automatically, but devs need know what to expect flickr.com/photos/frankfarm/191415409/
- 49. 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/
- 50. preloader surprizes chegg.com – scripts at bottom which browsers? flickr.com/photos/matti_frisk/2717599581/
- 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/
- 58. Takeaways dev <link rel="dns-prefetch"... ! dev <link rel="prefetch"...! dev <link rel="prerender"...! browser DNS pre-resolution browser TCP pre-connect browser prefresh browser & dev preloader flickr.com/photos/myklroventine/4062102754/