martinschierle’s gists

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 / 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 / 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 / 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 / webvitals_batch.js

Last active June 30, 2020 22:21

	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 / 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()) {

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 / layoutshifts_from_fonts.js

Last active September 1, 2020 17:49

	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 / layout_shifts_in_wpt

Created August 5, 2020 13:03

Use this snippet in "inject script" in advanced tab of webpagetest. When you do later customize waterfall and show custom marks, you will see layout jumps in wpt waterfall.

	let po = new PerformanceObserver((list) => {
	for (const entry of list.getEntries()) {
	//console.log(entry);
	let val = entry.value;
	window.performance.mark('layout_shift_'+val);
	}
	});

	po.observe({type: 'layout-shift', buffered: true});

martinschierle / cls_source_crawler.js

Created August 20, 2020 07:48

Crawler to crawl for layout shift sources

	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');

Martin Schierle martinschierle