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

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
     csswizardry@gmail.com
     speakerdeck.com/csswizardry
     harry.is/for-hire
     

     View Slide