Who's afraid of the big bad preloader?

Yoav Weiss

What will we be talking about?

Once upon a time

https://www.flickr.com/photos/soldiersmediacenter/3351707140
https://www.flickr.com/photos/tacker/7008650081

DOM

https://www.flickr.com/photos/bearseye/8719343763

Subresources

https://www.flickr.com/photos/crazymandi/8165507495

SUPER subresources!

http://commons.wikimedia.org/wiki/File:Long_Beach_Comic_%26_Horror_Con_2011_-_Krypto,_the_Super_Dog_(6301707368).jpg

SLOW!

Frustration

http://chriscoven.deviantart.com/art/Grumpy-cat-344073323

Workarounds

A native solution

"The greatest browser optimization of all times"

- Steve Souders

https://www.flickr.com/photos/stampinmom/5373581438

What does it do?

Peek into HTML

Speculatively download resources

How does it work?

Preprocessing

Tokenization


"<img src><div>some text</div></img>"

↓

StartTag: img, src attribute, StartTag: div, Text: "some text",

EndTag: div, EndTag: img

Parsing



HTMLBodyElement

HTMLImageElement HTMLDivElement

Text

Where does the preloader fit in?

Why are we blocking???

DOM state

var p = document.createElement("p");
document.body.appendChild(p);

document.write

<script>document.write("<!--");</script>
<div>...

Style queries

<script>
var width = 
    document.getElementById("thing").width();
</script>

Which resources?

<link> external CSS

External JS

<img>

@import

<video poster>

<picture><img>

Not preloaded

  • <input>
  • <object>
  • <video><source>
  • <audio><source>
  • <iframe>
  • <link rel=import>

CSS based resources

JS based resources

Priorities

Based on context

  • CSS
  • Scripts
  • Visible images
  • Non-visible images

<head> first

Spec???

What has the preloader ever done for us?

Before

After

20% on average

Source: https://plus.google.com/+IlyaGrigorik/posts/8AwRUE7wqAE

<advice>

Critical resources must be in markup

Non-critical resources... Maybe not

Don't invalidate the DOM

document.getElementByTagName("base").href=
    "http://DontDoThat.com"

Assume nothing about loading order

Assumption fail #1

Setting cookies with JS

Assumption fail #2

Scripts at the bottom

Use APIs that expose critical hidden resources

FontLoad API


var f = new FontFace("newfont", 
                     "url(newfont.woff)", {});
f.load().then(function (fontFact) {
    // Do something once font is loaded.
});

Resource hints


<link rel="preload" href="/assets/font.woff" 
      as="font">
<link rel="preconnect" href="http://thirdparty.com">

Render blocking resources are bad, mmmmmkay?

</advice>

<future???>

More resources

  • <iframe>
  • <link rel=import>

    • Better CSS support

    Fonts

    Background images

    Resource priorities

    </future>

    Speaking of the future

    HTTP2?

    No load queue

    Priorities sent to the server

    Server push tho

    Time will tell

    To sum it up

    https://www.flickr.com/photos/tambako/13498520775
    https://www.flickr.com/photos/etersigni/6787786882

    Thanks!

    @yoavweiss on Twitter & GitHub

    Slides: yoavweiss.github.io/preloader-velocity-nyc-talk