Ethan Gardner ethangardner

Priority Hints is rolling out to Chrome in the 101 release which is currently available in the Dev/Beta channel of Chrome and available in WebPageTest when using the Chrome Canary browser selection.

To make it easier to experiment with priority hints (particularly for LCP images) without making production changes, I set up a couple of public Cloudflare Workers that can be used dynamically with WebPageTest to inject priority hints into existing pages and to preload arbitrary images when combined with WebPageTest's overrideHost script command.

Injecting Priority Hints

There is a cloudflare worker at hint.perf.workers.dev that will take a CSS selector from the x-hint HTTP header and add fetchpriority=high to any elements in the HTML that match the selector. The easiest way to experiment with this is to use Chrome's dev tools locally, identify the element that hosts the imag

	#standardSQL

	--Update the list of URLs and the date of the tables used

	WITH
	origins AS (
	SELECT
	origin
	FROM
	`chrome-ux-report.all.201909`

	<script>
	import {trapFocus} from "./trapFocus";
	</script>

	<div use:trapFocus>
	<button>Hi!</button>
	<button>Second button</button>
	</div>

	# Distribution of LCP performance on WordPress pages across desktop/mobile with and without native image lazy loading.
	SELECT
	_TABLE_SUFFIX AS client,
	percentile,
	usesLazyLoading,
	COUNT(0) AS pages,
	COUNTIF(pctGoodLCP IS NOT NULL) AS pagesWithCrUXData,
	APPROX_QUANTILES(pctGoodLCP, 1000)[OFFSET(percentile * 10)] AS pctGoodLCP,
	APPROX_QUANTILES(p75LCP, 1000)[OFFSET(percentile * 10)] AS p75LCP
	FROM (

	/* Using a JavaScript proxy for a super low code REST client */
	// via https://dev.to/dipsaus9/javascript-lets-create-aproxy-19hg
	// also see https://towardsdatascience.com/why-to-use-javascript-proxy-5cdc69d943e3
	// also see https://github.com/fastify/manifetch
	// also see https://github.com/flash-oss/allserver
	// and https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb

	const createApi = (url) => {
	return new Proxy({}, {
	get(target, key) {

	/* Ultra lightweight Github REST Client */
	// original inspiration via https://gist.github.com/v1vendi/75d5e5dad7a2d1ef3fcb48234e4528cb
	const token = 'github-token-here'
	const githubClient = generateAPI('https://api.github.com', {
	headers: {
	'User-Agent': 'xyz',
	'Authorization': `bearer ${token}`
	}
	})