Finalize assignments: Chapter 19. Resource Hints

[rviscomi]

Section	Chapter	Authors	Reviewers
IV. Content Distribution	19. Resource Hints	@khempenius @yoavweiss	@andydavies @addyosmani

Due date: To help us stay on schedule, please complete the action items in this issue by June 3.

To do:

• Assign subject matter experts (coauthors)
• Assign peer reviewers
• Finalize metrics

Current list of metrics:

For each resource hint (preload, prefetch, preconnect, prerender):

• % of sites using $HINT; how this has changed since a year ago.
• For sites using $HINT, # of times it is used.
• crossorigin attribute, as attribute, resource priority
• Preload/Prefetch-only: the resource types that $HINT is used for (e.g. js, document, etc.)
• Preload only: % of sites that are using as=font/as=fetch without a crossorigin attribute, or that are using any other as value with a crossorigin attribute.
• Preload only: % of sites where a preload of low priority is done before a load of higher priority and a different as attribute value.

Priority Hints:

• % of sites using this
  Note: depending on how small the sample size is the following metrics may not be worth calculating
• Usage breakdown by tag (i.e. iframe, img, link, or script)
• Usage breakdown by Importance (i.e. low/high/auto)
• (Optional) tag x importance (e.g. do scripts tend to be "high" importance? iframes "low" importance? etc.)

👉 AI (coauthors): Finalize which metrics you might like to include in an annual "state of priority hints" report powered by HTTP Archive. Community contributors have initially sketched out a few ideas to get the ball rolling, but it's up to you, the subject matter experts, to know exactly which metrics we should be looking at. You can use the brainstorming doc to explore ideas.

The metrics should paint a holistic, data-driven picture of the priority hints landscape. The HTTP Archive does have its limitations and blind spots, so if there are metrics out of scope it's still good to identify them now during the brainstorming phase. We can make a note of them in the final report so readers understand why they're not discussed and the HTTP Archive team can make an effort to improve our telemetry for next year's Almanac.

Next steps: Over the next couple of months analysts will write the queries and generate the results, then hand everything off to you to write up your interpretation of the data.

Additional resources:

• All chapter assignments
• Project timeline
• About the project

[rviscomi]

@yoavweiss you had mentioned that this chapter might be better off renamed or its scope changed to be less granular. Any other thoughts on that?

Also, @khempenius @yoavweiss have you thought of anyone who might make a good reviewer for this chapter?

[khempenius]

I agree. How about renaming this section to "Resource and Priority Hints" or "Loading Optimizations"?

Maybe @addyosmani can review?

[rviscomi]

Either rename SGTM. @yoavweiss any preference?

Added @andydavies as a reviewer. @addyosmani would you also be interested in reviewing?

[yoavweiss]

"Resource loading optimizations"? :)

[rviscomi]

Actually, "loading optimizations" may be too vague. Caching or compression are loading optimizations but not in scope for this chapter. Is "Resource Hints" a better name?

[addyosmani]

Resource Hints sgtm. Happy to review.

[rviscomi]

@khempenius @yoavweiss @andydavies @addyosmani we're hoping to finalize the list of metrics for each chapter today. Could you take a look at the metrics at #21 (comment) and tick the last TODO checkbox and close this issue if you're happy with it? Thanks!

[yoavweiss]

Belatedly updated some metrics. I think we want to try to detect sites that are using hints wrong:

• Preloading fonts/fetches without a crossorigin attribute
• Preloading more than X resources
• Preloading non-critical resources before render blocking ones
• Preconnecting to too many hosts

I'm not sure if these should be metrics on their own, or we can use collected metrics to conclude that (some just require a number, others require joining, so might be better as their own metric)

[rviscomi]

That's a good list, thanks @yoavweiss. Could you take a go at rephrasing the metrics to be more quantifiable? For example "% of websites that preload more than X resources" where X is defined. Just want to make sure that the data extracted by the analyst team matches your expectations.

[andydavies]

@yoavweiss In your pattern of "sites doing it wrong" you might want to look at how many are using multiple async CSS with preload - came across a few sites doing it and it's non-deterministic

Can you also look at how many are still using AppCache ;-p

[yoavweiss]

That's a good list, thanks @yoavweiss. Could you take a go at rephrasing the metrics to be more quantifiable? For example "% of websites that preload more than X resources" where X is defined. Just want to make sure that the data extracted by the analyst team matches your expectations.

@rviscomi - Added something like the above for "Preloading fonts/fetches without a crossorigin attribute". "Preloading more than X resources" and "Preconnecting to too many hosts" seem to be already covered.

Where I'm a bit stuck is "Preloading non-critical resources before render blocking ones". Is there a way to detect render blocking resources in HA? If there's nothing explicit, maybe we can infer that from network priority + destination??

[yoavweiss]

@yoavweiss In your pattern of "sites doing it wrong" you might want to look at how many are using multiple async CSS with preload - came across a few sites doing it and it's non-deterministic

@andydavies - not sure what you mean. Can you explain?

[andydavies]

@yoavweiss this approach https://www.filamentgroup.com/lab/async-css.html There are sites loading multiple stylesheets using this method, and there seems no guarantee on which order the sheets download and so are applied (smaller files will download first)

…

On Thu, 6 Jun 2019 at 12:25, Yoav Weiss ***@***.***> wrote: @yoavweiss <https://github.com/yoavweiss> In your pattern of "sites doing it wrong" you might want to look at how many are using multiple async CSS with preload - came across a few sites doing it and it's non-deterministic @andydavies <https://github.com/andydavies> - not sure what you mean. Can you explain? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21?email_source=notifications&email_token=AADIILBHA2HUNRL5YOFRNTDPZDXZDA5CNFSM4HOOMJWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODXCRM7Y#issuecomment-499455615>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADIILFKN6D2YF7KM4N7SHTPZDXZDANCNFSM4HOOMJWA> .

[yoavweiss]

OK, cool. That's theoretically fine, assuming that the CSS files only add unconnected-between-them specificity, no? Also, wouldn't developers notice breakage in cases they are inter-connected?

[rviscomi]

Where I'm a bit stuck is "Preloading non-critical resources before render blocking ones". Is there a way to detect render blocking resources in HA? If there's nothing explicit, maybe we can infer that from network priority + destination??

AFAIK that'd be difficult to get right using only heuristics. @pmeenan can you think of a more solid approach?

@yoavweiss when you're happy with the list of metrics can you close this issue?

[yoavweiss]

Added something with priorities that should be a close enough approximation (I think). Closing!

[pmeenan]

Thie "importance" attribute maybe?

…

On Fri, Aug 16, 2019 at 2:03 PM Rick Viscomi ***@***.***> wrote: @khempenius <https://github.com/khempenius> @yoavweiss <https://github.com/yoavweiss> question regarding this metric: crossorigin attribute, as attribute, resource priority How is priority determined? I don't think this is an attribute of the <link> element. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#21?email_source=notifications&email_token=AADMOBLPMO3P5LMTK6A7A7TQE3TV5A5CNFSM4HOOMJWKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4PJWQI#issuecomment-522099521>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADMOBOPVIHFXV3K4U3GDA3QE3TV5ANCNFSM4HOOMJWA> .