Upgrade to Pro — share decks privately, control downloads, hide ads and more …

More Than You Ever Wanted to Know About Resource Hints

More Than You Ever Wanted to Know About Resource Hints

Resource Hints are a great way for developers to make their web pages faster by allowing us to be a little bit smarter than the browser. Although not a new specification—they’ve been around in some form or another for years!—are we truly getting the most out of them? And do we understand them thoroughly enough to use them most effectively? Heck, do we even know what a ‘Resource Hint’ is?! Well, by the end of this talk, we’ll all be experts.

Let’s take a look at all of the different Resource Hints we have available to us, real-world examples of how best to use them, and learn about some of the more obscure intricacies and gotchas that we need to be aware of if we want to really get the best out of them (and to make sure that we really are being smarter than the browser).

Harry Roberts

April 20, 2019
Tweet

More Decks by Harry Roberts

Other Decks in Programming

Transcript

  1. More Than You Ever Wanted
    to Know About Resource Hints
    Harry Roberts • @csswizardry

    View full-size slide

  2. Hi, I’m Harry
    Consultant Performance Engineer
    Leeds, UK
    csswizardry.com
    @csswizardry

    View full-size slide

  3. i
    Pro-Tip / Short Summary

    View full-size slide

  4. !
    Caveat / Warning / Bug

    View full-size slide

  5. Resource Hints

    View full-size slide


  6. “These primitives enable the developer […] to
    assist the user agent in the decision process of
    which origins it should connect to, and which
    resources it should fetch and preprocess to
    improve page performance.”

    View full-size slide

  7. i
    Single lines of HTML
    that can dramatically
    speed up your site

    View full-size slide


  8. ...


    type="font/woff2" crossorigin />
    ...

    View full-size slide

  9. Overview
    1.dns-prefetch
    2.preconnect
    3.prefetch
    4.preload
    5.subresource
    6.prerender

    View full-size slide

  10. dns-prefetch

    View full-size slide

  11. csswz.it/dns-prefetch

    View full-size slide

  12. i
    Resolve the IP address
    for a given domain
    ahead of time

    View full-size slide

  13. i
    When you know the
    domain but not the URL

    View full-size slide

  14. 154 155 src="https://www.youtube.com/embed/5g8a9luSZVI"
    156 width="560" height="315">
    157

    View full-size slide

  15. 216.58.198.110

    View full-size slide


  16. “[…] common names […] can answer in closer to
    80–120ms. […] an uncommon name […] can
    average closer to 200–300ms.”
    — csswz.it/2GuZo21

    View full-size slide


  17. “More interestingly, for any of these queries
    that access the internet, dropped packets, and
    overworked (under provisioned) name resolvers,
    regularly increases the total resolution time to
    between 1 and 10 seconds.”
    — csswz.it/2GuZo21

    View full-size slide

  18. !
    dns-prefetch is
    implemented as
    prefetch in IE9…

    View full-size slide

  19. csswz.it/preconnect

    View full-size slide

  20. i
    Resolve the IP address
    and open a TCP/TLS
    connection for a given
    domain ahead of time

    View full-size slide

  21. i
    When you know the
    domain but not the URL

    View full-size slide

  22. TCP Handshake TLS Negotiation

    View full-size slide

  23. preconnect with

    dns-prefetch fallback

    View full-size slide

  24. !
    Breaks in Safari

    View full-size slide

  25. !
    Be judicious with
    preconnect

    View full-size slide

  26. Be Judicious
    Only warm up frequent, significant, and likely origins
    Don’t warm up fourth, fifth, sixth party origins
    Opening many connections can have a CPU and battery cost
    Chrome can only conduct six simultaneous DNS resolutions

    View full-size slide

  27. csswz.it/prefetch

    View full-size slide

  28. i
    A file needed for
    subsequent navigation

    View full-size slide

  29. i
    Download the file and
    drop it into HTTP cache
    for later usage

    View full-size slide


  30. “The user agent SHOULD NOT apply
    preprocessing on the response and MUST
    NOT automatically execute or apply it against
    the current page context.”

    View full-size slide





  31. Downloaded by this…
    … executed by this.

    View full-size slide

  32. Caching
    prefetch will not execute or otherwise process the resource
    It will drop it into HTTP cache as per its caching headers
    Except…

    View full-size slide


  33. “…those with the no-store Cache-
    Control header. A resource will
    be revalidated before use if there is
    a Vary response header, no-cache Cache-
    Control header, or if the resource is more than
    five minutes old.”
    — csswz.it/nostate-prefetch

    View full-size slide

  34. i
    Fetched with lowest
    possible priority

    View full-size slide

  35. i
    In-flight prefetches
    persist across
    navigations

    View full-size slide

  36. !
    …prefetch acts like
    dns-prefetch in IE9

    View full-size slide

  37. href="https://code.jquery.com/jquery-3.4.0.js" />

    View full-size slide

  38. csswz.it/preload

    View full-size slide

  39. i
    A mandatory fetch for
    a file needed for the
    current navigation

    View full-size slide

  40. i
    A way to surface late-
    discovered resources

    View full-size slide

  41. as="font" type="font/woff2" crossorigin />

    View full-size slide

  42. as="font" type="font/woff2" crossorigin />

    View full-size slide

  43. Late-discovered
    resource?

    View full-size slide

  44. HTML
    CSS
    Font
    }
    1000ms

    View full-size slide

  45. HTML
    CSS
    Background
    }
    1250ms

    View full-size slide

  46. HTML
    CSS
    Font
    JS
    VDOM
    }
    1350ms

    View full-size slide

  47. preload helps the
    browser find them sooner

    View full-size slide


  48. as="style" />
    as="font" type="font/woff2" crossorigin />

    View full-size slide

  49. HTML
    CSS
    Font
    JS
    VDOM
    }
    750ms

    View full-size slide

  50. The as Attribute

    View full-size slide

  51. as="font" type="font/woff2" crossorigin />

    View full-size slide

  52. "audio"
    "document"
    "embed"
    "fetch"
    "font"
    as="image"
    "object"
    "script"
    "style"
    "track"
    "video"
    "worker"

    View full-size slide


  53. “The attribute is necessary to guarantee correct
    prioritization, request matching, application of
    the correct CSP3 policy, and setting of the
    appropriate Accept request header.”

    View full-size slide

  54. !
    Don’t try to be sneaky

    View full-size slide

  55. i
    Priority Hints will help

    View full-size slide

  56. as="image" importance="high" />
    as="style" importance="low" />

    View full-size slide

  57. The type Attribute

    View full-size slide

  58. as="image" type="image/webp" />

    View full-size slide

  59. The crossorigin Attribute

    View full-size slide


  60. “Preload links for CORS enabled resources, such
    as fonts or images with a crossorigin attribute,
    must also include a crossorigin attribute, in
    order for the resource to be properly used.”

    View full-size slide

  61. i
    Keep an eye on Console

    View full-size slide

  62. !
    Beware Google Chrome

    View full-size slide

  63. Chrome Issues
    Chrome over-prioritises preload
    Dispatches preloads before other critical resources
    Often returns less-critical resources sooner

    View full-size slide

  64. 0.4s slower to
    start render
    @andydavies

    View full-size slide

  65. i
    Precursor to preload…

    View full-size slide

  66. !
    …but completely
    deprecated.

    View full-size slide


  67. “…not useful, proprietary, and buggy.”
    — Yoav Weiss, csswz.it/2VOEyQc

    View full-size slide

  68. csswz.it/prerender

    View full-size slide

  69. i
    Download and build
    entire webpages in the
    background…

    View full-size slide

  70. i
    …kinda…

    View full-size slide

  71. i
    …it’s complicated.

    View full-size slide

  72. Problematic Prerender
    Huge memory footprint with rendering whole new pages
    Bandwidth usage spikes for site and user
    Register multiple analytics hits, ad impressions
    How do we handle timers, HTTP auth, interstitials, autoplay media?
    How do we handle animations? Do we expect the carousel to start
    running? Or do we write more code to wait for page visibility?
    What if we get MitM and are made to prerender a malicious page?
    How would the user know? They wouldn’t!

    View full-size slide

  73. Prerender is dead,

    long live prerender!

    View full-size slide

  74. Prerender is dead,

    long live prerender!
    NoState Prefetch

    View full-size slide

  75. i
    prerender is the API;
    NoState Prefetch is the
    mechanism

    View full-size slide

  76. !
    prerender will not
    render anything

    View full-size slide

  77. !
    prerender will not
    render anything
    !

    View full-size slide

  78. NoState Prefetch

    View full-size slide

  79. i
    A recursive prefetch

    View full-size slide

  80. A B
    B1
    B2
    B3
    B4
    B5

    View full-size slide






  81. Prerender



    Prerender


    View full-size slide

  82. i
    Fetched with lowest
    possible priority

    View full-size slide

  83. Tips, Tricks, and Gotchas

    View full-size slide

  84. i
    Deploy as HTTP
    Headers

    View full-size slide

  85. !
    Edge only supports
    HTTP header for
    preconnect

    View full-size slide

  86. !
    Edge doesn’t support
    HTTP header for
    preload

    View full-size slide

  87. i
    Generate Dynamically

    View full-size slide

  88. instant.page

    View full-size slide

  89. !
    Have an escape hatch

    View full-size slide

  90. if ($omgWeAreBeingDDoSed == false) {

    }

    View full-size slide

  91. !
    You Need a Scheme

    View full-size slide

  92. All Together!

    View full-size slide

  93. Implementing Resource Hints
    1.Identify a key page
    2.Audit important assets and origins
    3.Assess likely user flows
    4.Design bespoke Resource Hint strategies

    View full-size slide

  94. Web font
    Likely next navigation
    Critical third party

    View full-size slide

  95. Web font Likely next navigation
    Critical third party
    JS image gallery

    View full-size slide

  96. Resource Hint Strategy
    1.HTTP header preconnect to cloudinary
    2.Regular preconnect for other third parties
    3.preload to discover web font sooner
    4.prefetch for gallery.js
    5.prerender or prefetch for likely next navigation

    View full-size slide

  97. // HTTP response header
    link: ; rel=preconnect

    View full-size slide


  98. href="https://www.google-analytics.com">
    href="https://www.google-analytics.com">

    View full-size slide



  99. as="font" type="font/woff2" crossorigin />

    View full-size slide





  100. as="font" type="font/woff2" crossorigin />





    View full-size slide

  101. Thank You!
    @csswizardry
    [email protected]
    speakerdeck.com/csswizardry
    harry.is/for-hire

    View full-size slide