Skip to content

Instantly share code, notes, and snippets.

View martinschierle's full-sized avatar

Martin Schierle martinschierle

View GitHub Profile
function getLastResource(time, regex) {
let entries = performance.getEntriesByType('resource')
let last = null;
for(let i = 0; i < entries.length; i++) {
let e = entries[i];
if(regex && !e.name.match(regex)) continue;
if(e.responseEnd < time) last = e;
}
return last;
}
@martinschierle
martinschierle / cwv_crawler.js
Last active August 3, 2020 12:39
Small puppeteer script to run over a domain, crawl random urls, capture screenshots with lcp and cls elems highlighted, and also writing out a heatmap of lcp and cls bounding boxes across all crawled pages.
const puppeteer = require('puppeteer');
const { createCanvas, loadImage } = require('canvas')
const mustache = require('mustache')
var fs = require('fs');
const fsExtra = require('fs-extra')
let MAX_URLS = 50;
let TEMPLATE = fs.readFileSync('template.html', 'utf8');
@martinschierle
martinschierle / devtools_vitals.js
Last active June 9, 2020 19:25
JS Snippet to add to devtools to get CLS and LCP data
let po = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry);
}
});
po.observe({type: 'layout-shift', buffered: true});
let po2 = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
var fs = require('fs');
const mergeImg = require('merge-img');
const ampToolboxCacheUrl = require('amp-toolbox-cache-url').createCacheUrl;
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
@martinschierle
martinschierle / batch_cls_calc.js
Last active March 18, 2020 18:18
Calculating cls in batch for AMP vs non-AMP
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
var fs = require('fs');
const mergeImg = require('merge-img');
const ampToolboxCacheUrl = require('amp-toolbox-cache-url').createCacheUrl;
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
@martinschierle
martinschierle / cls.js
Last active August 31, 2022 18:47
Cumulative Layout Shift (CLS) with Puppeteer
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
'latency': 40
};
@martinschierle
martinschierle / Esp32Lighthouse
Last active December 22, 2019 23:28
Use ESP32 to get Google Lighthouse results from REST API and show via NeoPixel
#include <WiFi.h>
#include <ArduinoJson.h>
#include <HTTPClient.h>
#include <FastLED.h>
// Adjust these as you see need
const char* ssid = "";
const char* password = "";
const String URL = "https://www.spiegel.de";
const String targetMetric = "first-contentful-paint";
@martinschierle
martinschierle / sw_performance_check.js
Last active October 24, 2022 20:04
Puppeteer script to check performance of a page with and without service worker
// Idea and some code stemming from https://michaljanaszek.com/blog/test-website-performance-with-puppeteer#cacheAndServiceWorker
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const {URL} = require('url');
var fs = require('fs');
var sw_scope;
let NETWORK_PRESETS = {
'GPRS': {
'offline': false,
@martinschierle
martinschierle / zombiegame.ino
Last active October 28, 2019 22:19
Small game - inspired by the esp8622 'SpyGame' (humans vs. zombies), but newly written for M5Stick, using its display
#include <WiFi.h>
#include <M5StickC.h>
int team = 0;
String teamnames[2] = { "Human", "Zombie"};
int zombieTeam = 1;
int humanTeam = 0;
int colors[2] = { GREEN, RED};
int hideTime = 30; // in seconds
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
'latency': 40
};