Skip to content

Instantly share code, notes, and snippets.

Avatar

Rick Viscomi rviscomi

View GitHub Profile
@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
You can’t perform that action at this time.