Query metrics: Chapter 19. Resource Hints

[rviscomi]

Part	Chapter	Authors	Reviewers	Tracking Issue
IV. Content Distribution	19. Resource Hints	@khempenius @yoavweiss	@andydavies @addyosmani	#21

READ ME!

All of the metrics in the table below have been marked as Able To Query during the metrics triage. The analyst assigned to each metric is expected to write the corresponding query and submit a PR to have it reviewed and added to the repo.

In order to stay on schedule and have the data ready for authors, please have all metrics reviewed and merged by August 5.

Assignments

ID	Metric description	Analyst	Notes
19.01	% of sites using $HINT; how this has changed since a year ago.	@rviscomi	since it requires a custom metric, we can't apply that to older crawls. comparisons must be done using regex... reluctantly marking this ATQ if we use regex approach on older crawls
19.02	For sites using $HINT, # of times it is used.	@rviscomi	link-nodes custom metric
19.03	crossorigin attribute, as attribute, resource priority	@rviscomi	link-nodes custom metric
19.04	Preload/Prefetch-only: the resource types that $HINT is used for (e.g. js, document, etc.)	@rviscomi	link-nodes custom metric
19.05	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.	@rviscomi	link-nodes custom metric
19.06	Preload only: % of sites where a preload of low priority is done before a load of higher priority and a different as attribute value.	@rviscomi	link-nodes custom metric
19.07	% of sites using this	@rviscomi
19.08	Usage breakdown by tag (i.e. iframe, img, link, or script)	@rviscomi	priority-hints custom metric
19.09	Usage breakdown by Importance (i.e. low/high/auto)	@rviscomi	priority-hints custom metric
19.10	(Optional) tag x importance (e.g. do scripts tend to be "high" importance? iframes "low" importance? etc.)	@rviscomi	priority-hints custom metric

Checklist of metrics to be merged

• 19.01 % of sites using $HINT; how this has changed since a year ago.
• 19.02 For sites using $HINT, # of times it is used.
• 19.03 crossorigin attribute, as attribute, resource priority
• 19.04 Preload/Prefetch-only: the resource types that $HINT is used for (e.g. js, document, etc.)
• 19.05 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.
• 19.06 Preload only: % of sites where a preload of low priority is done before a load of higher priority and a different as attribute value.
• 19.07 % of sites using this
• 19.08 Usage breakdown by tag (i.e. iframe, img, link, or script)
• 19.09 Usage breakdown by Importance (i.e. low/high/auto)
• 19.10 (Optional) tag x importance (e.g. do scripts tend to be "high" importance? iframes "low" importance? etc.)

[rviscomi]

@khempenius @yoavweiss @andydavies @addyosmani I'm putting together a sheet with the results of these queries. See here. As it comes together, feel free to let me know if anything is unintuitive or if my understanding of the metric is incorrect.

[rviscomi]

@khempenius @yoavweiss a couple of resource hint metrics reference priorities:

• 19.03 crossorigin attribute, as attribute, resource priority
• 19.06 Preload only: % of sites where a preload of low priority is done before a load of higher priority and a different as attribute value.

My understanding of resource hints is that these are elements that take the form <link rel="[preload,prefetch,...]" as="..." crossorigin="..." href="..."> but I'm not aware of an attribute to indicate priority.

Priority hints, on the other hand, have an importance attribute on the iframe, img, link, or script elements themselves.

One other question, I don't see dns-prefetch included in #21 anywhere. Was this intentional or should I add it to the query's list of resource hints?

cc @igrigorik in case you're interested, I see you wrote the spec 😛

[igrigorik]

I believe we're talking about priority indirectly here, as defined based on provided as attribute — e.g. as=image has lower priority than as=script. That said, @yoavweiss is the expert on this bit, so I'll defer to him :-)

[yoavweiss]

What @igrigorik said - the reference to priorities is implicit...
I could create a table indicating as values and resource types that exceed them in priorities, if that would be helpful.

My understanding of resource hints is that these are elements that take the form <link rel="[preload,prefetch,...]" as="..." crossorigin="..." href="..."> but I'm not aware of an attribute to indicate priority.

The priority tracking here should be for preload but not for prefetch.

One other question, I don't see dns-prefetch included in #21 anywhere. Was this intentional or should I add it to the query's list of resource hints?

It does make sense to track dns-prefetch as well, good call. It could also be interesting to see it in combination with other hints (e.g. preconnect)

Priority hints, on the other hand, have an importance attribute on the iframe, img, link, or script elements themselves.

Priority Hints haven't shipped yet, so I hope people are not relying on them...

[rviscomi]

I could create a table indicating as values and resource types that exceed them in priorities, if that would be helpful.

@yoavweiss yes that'd be helpful!

It does make sense to track dns-prefetch as well, good call. It could also be interesting to see it in combination with other hints (e.g. preconnect)

Updated the queries and the results sheet.

Priority Hints haven't shipped yet, so I hope people are not relying on them...

According to metric 19_07...

client	freq	total	pct
desktop	1780	4371974	0.04
mobile	2047	5297442	0.04

😁

[rviscomi]

Reopening until 19.06 is resolved. @yoavweiss do you have that relative priority table handy?

[yoavweiss]

Here's a table for Chrome's priorities at the moment:

File type	Characteristic	Priority
HTML	Top-level navigation	Very High
HTML	Iframe	Very High
CSS	Blocking	Very High
CSS	Late in document	Medium
CSS	Optional	Lowest
Script	Blocking	High
Script	Blocking - late in document	Medium
Script	Defer	Low
Script	Async	Low
Script	module	High
Font	Preload	High
Font		Very High
Image	InViewport	High
Image	outside of viewport	Low
Prefetch		Very Low
Beacon		Very Low
Fetch		High

(Thanks to @domfarolino for his help compiling the list)

[andydavies]

Is this at the network or the rendering layer - there were subtle differences but not sure if that still applies

…

On Mon, 2 Sep 2019 at 12:09, Yoav Weiss ***@***.***> wrote: Here's a table for Chrome's priorities at the moment: File type Characteristic Priority HTML Top-level navigation Highest HTML Iframe Highest CSS Blocking High CSS Late in document Medium CSS Optional Lowest Script Blocking High Script Blocking - late in document Medium Script Defer Low Script Async Low Script module ?? Font Preload High Font Highest Image InViewport High Image outside of viewport Low Prefetch Very Low Beacon Very Low Fetch High — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#100?email_source=notifications&email_token=AADIILHXF2X44F3MKNW64I3QHTX5XA5CNFSM4IGIC7P2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD5VQN5Y#issuecomment-527107831>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AADIILBFIOCCLT2S3TRKFY3QHTX5XANCNFSM4IGIC7PQ> .

[yoavweiss]

These are Blink's priorities, not the net stack ones

[rviscomi]

Thanks @yoavweiss. I'm not actually sure if this one is doable. I can tell whether one resource type was loaded before another, but I don't necessarily know whether it was defer/async, in/out of the viewport, blocking/optional, etc. These characteristics affect the priority for resource types significantly, so without them the results wouldn't be accurate.

If you know of a more straightforward way to measure this I can give it a shot. Meanwhile, the rest of the results are available in this sheet, so I'll unblock you to start writing the chapter contents.