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).

Bb854891c46db72f4a6f9da4504e879a?s=128

Harry Roberts

April 20, 2019
Tweet

Transcript

  1. 1.
  2. 3.
  3. 4.
  4. 7.
  5. 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.”
  6. 11.

    <head> ... <link rel="preconnect" href="https://www.youtube.com/" /> <link rel="prefetch" href="app.ae72eb.js" />

    <link rel="preload" href="/assets/webfont.woff2" as="font" type="font/woff2" crossorigin /> ... </head>
  7. 19.
  8. 24.

    “ “[…] common names […] can answer in closer to

    80–120ms. […] an uncommon name […] can average closer to 200–300ms.” — csswz.it/2GuZo21
  9. 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
  10. 30.
  11. 33.
  12. 36.
  13. 37.
  14. 38.
  15. 42.
  16. 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
  17. 48.
  18. 49.
  19. 53.
  20. 54.
  21. 55.
  22. 58.

    “ “The user agent SHOULD NOT apply preprocessing on the

    response and MUST NOT automatically execute or apply it against the current page context.”
  23. 59.

    <!-- search-results.html --> <link rel="prefetch" href="/assets/video-player.js" /> <!-- video.html -->

    <script src="/assets/video-player.js"></script> Downloaded by this… … executed by this.
  24. 60.

    Caching prefetch will not execute or otherwise process the resource

    It will drop it into HTTP cache as per its caching headers Except…
  25. 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
  26. 64.
  27. 65.
  28. 68.
  29. 74.
  30. 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.”
  31. 86.
  32. 90.
  33. 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.”
  34. 98.
  35. 100.
  36. 110.
  37. 115.
  38. 117.
  39. 118.
  40. 119.
  41. 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!
  42. 129.

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport"

    content="width=device-width, minimum-scale=1.0" /> <title>Prerender</title> <link rel="prerender" href="https://csswizardry.com" /> </head> <body> <h1>Prerender</h1> </body> </html>
  43. 131.
  44. 134.
  45. 140.
  46. 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
  47. 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
  48. 152.
  49. 153.

    <!-- Early-discover web font --> <link rel="stylesheet" href="/assets/app.css" /> <link

    rel="preload" href="/assets/webfont.woff2" as="font" type="font/woff2" crossorigin />
  50. 155.

    <!-- Prerender first three search results --> <link rel="prerender" href="/products/one.html"

    /> <link rel="prerender" href="/products/two.html" /> <link rel="prerender" href="/products/three.html" />
  51. 156.

    <head> <link rel="preconnect" href="https://www.google-analytics.com"> <link rel="dns-prefetch" href="https://www.google-analytics.com"> <link rel="stylesheet" href="/assets/app.css"

    /> <link rel="preload" href="/assets/webfont.woff2" as="font" type="font/woff2" crossorigin /> <link rel="prefetch" href="/assets/gallery.js" /> <link rel="prerender" href="/products/one.html" /> <link rel="prerender" href="/products/two.html" /> <link rel="prerender" href="/products/three.html" /> </head>