Skip to content

Instantly share code, notes, and snippets.

View ethangardner's full-sized avatar

Ethan Gardner ethangardner

View GitHub Profile
@pmeenan
pmeenan / wpt-hints.md
Last active March 18, 2023 16:48
Testing Priority Hints with WebPageTest

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

@DavidWells
DavidWells / github-proxy-client.js
Last active June 27, 2024 14:52
Full Github REST api in 34 lines of code
/* 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}`
}
})
@DavidWells
DavidWells / javascript-proxy-as-rest-client.js
Last active May 12, 2024 14:24
Using a javascript proxy as low code REST client
/* 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) {
@rviscomi
rviscomi / lazy-loading-crux-lcp-wordpress.sql
Last active August 17, 2024 17:57
Exploration into the correlation between native image lazy loading and LCP performance.
# 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 (
@JulienPradet
JulienPradet / Component.svelte
Last active February 5, 2025 23:17
How to use `use` directive to trap focus in Svelte
<script>
import {trapFocus} from "./trapFocus";
</script>
<div use:trapFocus>
<button>Hi!</button>
<button>Second button</button>
</div>
@mcmd
mcmd / CrUX.runningPercentages.sql
Last active August 17, 2024 17:53
BigQuery query to running % for CrUX metrics for a given month
#standardSQL
--Update the list of URLs and the date of the tables used
WITH
origins AS (
SELECT
origin
FROM
`chrome-ux-report.all.201909`
@rviscomi
rviscomi / CrashCourseInCrUX.md
Last active October 8, 2024 18:14
"Crash Course in CrUX" for the PerfMatters conference, April 2019
@jakub-g
jakub-g / async-defer-module.md
Last active November 21, 2024 06:36
async scripts, defer scripts, module scripts: explainer, comparison, and gotchas

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

@ole-boss
ole-boss / Big Query Google Analytics sessions export including site speed metrics.sql
Last active June 13, 2020 14:41
This script helps you creating sessions from Google Analytics raw data on hit level in Google Big Query. The export will also include some metrics related to site speed based on Google's Latency Tracking KPIs.
SELECT
first_sessions.sid AS sessionId,
visitorId,
first_transactions.transactionId AS transactionId,
timestamp,
deviceCategory,
landingPage,
pageviews,
timeOnSite,
channel,
@rviscomi
rviscomi / compression.sql
Last active August 2, 2024 22:38
Exploring compression stats in HTTP Archive
# https://discuss.httparchive.org/t/how-many-text-files-are-not-served-with-gzip/1092
#
# https://bigquery.cloud.google.com/table/httparchive:runs.2017_10_15_requests
#
# Browse encoding and MIME type for 10 random requests.
#standardSQL
SELECT
resp_content_encoding,
mimeType,