Skip to content

Instantly share code, notes, and snippets.

@rviscomi
rviscomi / 0. state-of-the-web-httparchive-10th-anniversary.md
Last active Nov 19, 2020
Show notes for the 10th Anniversary of HTTP Archive episode of the State of the Web podcast
View 0. state-of-the-web-httparchive-10th-anniversary.md

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 Sep 3, 2020
Calculating the % of Gatsby websites with "good" Core Web Vitals performance
View gatsby-cwv.sql
#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 Aug 23, 2020
HTTP Archive crawl status scraper
View ha-scrape.js
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
CrUX Core Web Vitals timeseries
View cwv-timeseries.sql
# 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
View CrUXnow.md

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)
View http-archive-har-payload.json
{
"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,
View gist:6033a9f723a78d714d0fec2e8c9bc510
{
"offscreenscore": [
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.0",
"0.03",
"0.13",
@rviscomi
rviscomi / 01_01.nljson
Last active Jul 24, 2019
Example of Web Almanac metric
View 01_01.nljson
{"volume":"161778","kbytes":"0","pdf":"0.037003430716520895","cdf":"0.037003430716520895"}
{"volume":"41534","kbytes":"10","pdf":"0.0095000586691637856","cdf":"0.046503489385684681"}
{"volume":"22318","kbytes":"20","pdf":"0.0051047890734915334","cdf":"0.051608278459176211"}
{"volume":"33100","kbytes":"30","pdf":"0.0075709525196061365","cdf":"0.059179230978782346"}
{"volume":"45611","kbytes":"40","pdf":"0.010432589588270558","cdf":"0.0696118205670529"}
{"volume":"50755","kbytes":"50","pdf":"0.011609175079535029","cdf":"0.081220995646587926"}
{"volume":"50951","kbytes":"60","pdf":"0.011654006097475899","cdf":"0.092875001744063823"}
{"volume":"54638","kbytes":"70","pdf":"0.012497332440067677","cdf":"0.1053723341841315"}
{"volume":"59040","kbytes":"80","pdf":"0.013504200506270282","cdf":"0.11887653469040178"}
{"volume":"60605","kbytes":"90","pdf":"0.013862162460747127","cdf":"0.13273869715114892"}
View parsed-css.json
{
"type": "stylesheet",
"stylesheet": {
"rules": [
{
"type": "comment",
"comment": "! jQuery UI - v1.9.2 - 2012-11-23\n* http://jqueryui.com\n* Includes: jquery.ui.core.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css\n* Copyright 2012 jQuery Foundation and other contributors; Licensed MIT ",
"position": {
"start": {
"line": 1,
@rviscomi
rviscomi / crux-cls.sql
Created Jun 17, 2019
Query for cumulative layout shifts in the Chrome UX Report
View crux-cls.sql
SELECT
form_factor.name AS form_factor,
cls.start,
ROUND(SUM(cls.density), 4) AS density
FROM
`chrome-ux-report.all.201905`,
UNNEST(experimental.cumulative_layout_shift.histogram.bin) AS cls
WHERE
origin = 'https://www.nytimes.com'
GROUP BY