Skip to content

Instantly share code, notes, and snippets.

View rviscomi's full-sized avatar

Rick Viscomi rviscomi

View GitHub Profile
@rviscomi
rviscomi / cms-cwv.sql
Created August 19, 2021 19:24
August 19, 2021 Web Almanac live stream queries
SELECT
client,
app,
origins,
SAFE_DIVIDE(origins_with_good_cwv, origins_eligible_for_cwv) AS pct_good_cwv
FROM
`httparchive.core_web_vitals.technologies`
WHERE
date = "2021-07-01" AND
REGEXP_CONTAINS(categories, r'CMS')
@rviscomi
rviscomi / lazy-loading-crux-lcp-wordpress.sql
Last active August 30, 2021 09:25
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 (
@rviscomi
rviscomi / mdn-content-popularity-tracker.gs
Last active May 28, 2021 17:40
Apps Script code for syncing MDN content popularity stats to Google Sheets to be visualized in the content dashboard: bit.ly/mdn-content-dash
// Written by Rick Viscomi (@rick_Viscomi)
const MDN_JSON = 'https://raw.githubusercontent.com/mdn/content/main/files/popularities.json';
const MDN_JSON_COMMITS = 'https://api.github.com/repos/mdn/content/commits?path=files/popularities.json';
const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Raw data')
function run() {
const lastCommit = getLastCommit();
const lastCommitDate = new Date(lastCommit.author.date).toLocaleDateString();
const lastEntryDate = new Date(sheet.getRange(sheet.getLastRow(), 1).getValue()).toLocaleDateString();
@rviscomi
rviscomi / web-app-manifest.js
Created May 12, 2021 03:59
WebPageTest custom metric: web app manifest
[web-app-manifest]
const response_bodies = $WPT_BODIES;
const manifestURLs = new Set(Array.from(document.querySelectorAll('link[rel=manifest]')).map(link => {
const base = new URL(location.href).origin;
const href = link.getAttribute('href');
return new URL(href, base).href;
}));
const manifests = response_bodies.filter(har => {
@rviscomi
rviscomi / 0. state-of-the-web-httparchive-10th-anniversary.md
Last active November 19, 2020 22:19
Show notes for the 10th Anniversary of HTTP Archive episode of the State of the Web podcast

HTTP Archive's 10th Anniversary - The State of the Web

Published November 19, 2020

Rick meets with Steve Souders, who created the HTTP Archive project 10 years ago this month, to talk about its origins and reflect on it's growth. They're also joined by Patrick Meenan, creator of WebPageTest and maintainer of HTTP Archive, along with Paul Calvano, past State of the Web guest and also a maintainer of HTTP Archive.

Links to resources discussed in this episode:

@rviscomi
rviscomi / gatsby-cwv.sql
Created September 3, 2020 17:11
Calculating the % of Gatsby websites with "good" Core Web Vitals performance
#standardSQL
# Gatsby Core Web Vitals performance
CREATE TEMP FUNCTION IS_GOOD (good FLOAT64, needs_improvement FLOAT64, poor FLOAT64) RETURNS BOOL AS (
good / (good + needs_improvement + poor) >= 0.75
);
CREATE TEMP FUNCTION IS_NON_ZERO (good FLOAT64, needs_improvement FLOAT64, poor FLOAT64) RETURNS BOOL AS (
good + needs_improvement + poor > 0
);
@rviscomi
rviscomi / ha-scrape.js
Last active August 23, 2020 05:41
HTTP Archive crawl status scraper
const DESKTOP_API = 'https://dev.httparchive.org/bulktest/batch_report.php';
const MOBILE_API = 'https://mobile.httparchive.org/bulktest/batch_report.php';
const pattern = new RegExp();
pattern.compile(/initial URLs\s+\d+\s+(\d+)\nsubmitted\s+\d+\s+(\d+)\ntested\s+\d+\s+(\d+)\nobtained\s+\d+\s+(\d+)\nHAR parsed\s+\d+\s+(\d+)\s+DONE:\s+(\d+).*success:\s+(\d+).*failed:\s+(\d+).*completed passes:\s+(\d)/s);
const patternMap = {
1: 'initial URLs',
2: 'submitted',
3: 'tested',
4: 'obtained',
@rviscomi
rviscomi / cwv-timeseries.sql
Created May 7, 2020 17:39
CrUX Core Web Vitals timeseries
# Query the Core Web Vitals for an origin over time.
SELECT
yyyymm,
# Largest Contentful Paint
# good < 2500ms, poor >= 4000ms
p75_lcp,
fast_lcp AS good_lcp,
avg_lcp AS needs_improvement_lcp,
slow_lcp AS poor_lcp,
# First Input Delay

CrUX.now() (bit.ly/crux-now)

(10min demo at the performance.now() meetup, 20 November 2019, Amsterdam)

CrUX is the Chrome User Experience Report, a public dataset of performance and UX data from real Chrome users in the field.

Quick facts:

  • Launched in November 2017
  • Monthly data dumps (second Tuesday)
{
"startedDateTime": "2019-07-11T23:37:41.920+00:00",
"title": "Run 1, First View for https://webmedia-tunisie.com/",
"id": "page_1_0_1",
"pageTimings": {
"onLoad": 13624,
"onContentLoad": -1,
"_startRender": 4600
},
"_minify_total": -1,