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 Slide

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

    View Slide

  3. View Slide

  4. View Slide

  5. i
    Pro-Tip / Short Summary

    View Slide

  6. !
    Caveat / Warning / Bug

    View Slide

  7. View Slide

  8. Resource Hints

    View Slide


  9. “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 Slide

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

    View Slide


  11. ...


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

    View Slide

  12. csswz.it/rh

    View Slide

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

    View Slide

  14. dns-prefetch

    View Slide

  15. csswz.it/dns-prefetch

    View Slide

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

    View Slide

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

    View Slide


  18. View Slide

  19. View Slide

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

    View Slide

  21. 5g8a9luSZVI

    View Slide

  22. DNS Lookup

    View Slide

  23. 216.58.198.110

    View Slide


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

    View Slide


  25. “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 Slide

  26. @andydavies

    View Slide

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

    View Slide

  28. preconnect

    View Slide

  29. csswz.it/preconnect

    View Slide

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

    View Slide

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

    View Slide


  32. View Slide

  33. View Slide

  34. 5g8a9luSZVI

    View Slide

  35. TCP Handshake TLS Negotiation

    View Slide

  36. hpbn.co

    View Slide

  37. View Slide

  38. View Slide

  39. preconnect with

    dns-prefetch fallback

    View Slide


  40. View Slide

  41. !
    Breaks in Safari

    View Slide

  42. View Slide

  43. @andydavies

    View Slide



  44. View Slide

  45. !
    Be judicious with
    preconnect

    View Slide

  46. 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 Slide

  47. !
    Firefucked

    View Slide

  48. View Slide

  49. prefetch

    View Slide

  50. csswz.it/prefetch

    View Slide

  51. i
    A file needed for
    subsequent navigation

    View Slide


  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide



  56. View Slide

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

    View Slide


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

    View Slide





  59. Downloaded by this…
    … executed by this.

    View Slide

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

    View Slide


  61. “…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 Slide

  62. i
    Fetched with lowest
    possible priority

    View Slide

  63. i
    In-flight prefetches
    persist across
    navigations

    View Slide

  64. View Slide

  65. View Slide

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

    View Slide

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

    View Slide

  68. preload

    View Slide

  69. csswz.it/preload

    View Slide

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

    View Slide

  71. i
    A way to surface late-
    discovered resources

    View Slide

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

    View Slide

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

    View Slide

  74. View Slide

  75. Late-discovered
    resource?

    View Slide

  76. HTML
    CSS
    Font
    }
    1000ms

    View Slide

  77. HTML
    CSS
    Background
    }
    1250ms

    View Slide

  78. HTML
    CSS
    Font
    JS
    VDOM
    }
    1350ms

    View Slide

  79. preload helps the
    browser find them sooner

    View Slide


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

    View Slide

  81. HTML
    CSS
    Font
    JS
    VDOM
    }
    750ms

    View Slide

  82. The as Attribute

    View Slide

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

    View Slide

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

    View Slide


  85. “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 Slide

  86. View Slide

  87. !
    Don’t try to be sneaky

    View Slide




  88. View Slide




  89. View Slide

  90. View Slide

  91. i
    Priority Hints will help

    View Slide

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

    View Slide

  93. The type Attribute

    View Slide

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

    View Slide

  95. The crossorigin Attribute

    View Slide


  96. “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 Slide

  97. i
    Keep an eye on Console

    View Slide

  98. View Slide

  99. !
    Beware Google Chrome

    View Slide

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

    View Slide

  101. @andydavies

    View Slide

  102. @andydavies

    View Slide

  103. 0.4s slower to
    start render
    @andydavies

    View Slide

  104. subresource

    View Slide

  105. i
    Precursor to preload…

    View Slide

  106. !
    …but completely
    deprecated.

    View Slide


  107. View Slide

  108. SUBRESOURCE

    View Slide


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

    View Slide

  110. prerender

    View Slide

  111. csswz.it/prerender

    View Slide

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

    View Slide

  113. i
    …kinda…

    View Slide

  114. i
    …it’s complicated.

    View Slide

  115. View Slide


  116. View Slide

  117. View Slide

  118. View Slide

  119. PRERENDER

    View Slide

  120. 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 Slide

  121. Prerender is dead,

    long live prerender!

    View Slide

  122. Prerender is dead,

    long live prerender!
    NoState Prefetch

    View Slide

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

    View Slide

  124. !
    prerender will not
    render anything

    View Slide

  125. !
    prerender will not
    render anything
    !

    View Slide

  126. NoState Prefetch

    View Slide

  127. i
    A recursive prefetch

    View Slide

  128. A B
    B1
    B2
    B3
    B4
    B5

    View Slide






  129. Prerender



    Prerender


    View Slide

  130. i
    Fetched with lowest
    possible priority

    View Slide

  131. View Slide

  132. Tips, Tricks, and Gotchas

    View Slide

  133. i
    Deploy as HTTP
    Headers

    View Slide

  134. View Slide

  135. @andydavies

    View Slide

  136. !
    Edge only supports
    HTTP header for
    preconnect

    View Slide

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

    View Slide

  138. i
    Generate Dynamically

    View Slide

  139. instant.page

    View Slide

  140. View Slide

  141. !
    Have an escape hatch

    View Slide

  142. if ($omgWeAreBeingDDoSed == false) {

    }

    View Slide

  143. !
    You Need a Scheme

    View Slide


  144. ==

    View Slide


  145. View Slide

  146. All Together!

    View Slide

  147. 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 Slide

  148. Web font
    Likely next navigation
    Critical third party

    View Slide

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

    View Slide

  150. 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 Slide

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

    View Slide


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

    View Slide



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

    View Slide



  154. View Slide





  155. View Slide





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





    View Slide






  157. View Slide

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

    View Slide