├── .eleventy.js
├── .eleventyignore
├── .gitignore
├── .nvmrc
├── LICENSE
├── README.md
├── _data
    ├── isolatedKeys.js
    ├── lastruns.js
    ├── lighthouseMaximums.js
    ├── sites
    │   ├── sample.js
    │   ├── ssg.js
    │   ├── test-runners.js
    │   └── zachleat.js
    └── urlsForApi.js
├── _includes
    └── layout.njk
├── api-urls.11ty.js
├── api.11ty.js
├── assets
    ├── chart.js
    ├── css.njk
    ├── islands.js
    ├── script.njk
    ├── sparkline.css
    ├── style.css
    └── timestamp-ago.js
├── categories.njk
├── index.njk
├── netlify.toml
├── package.json
├── plugins
    └── keep-data-cache
    │   ├── index.js
    │   └── manifest.yml
├── run-tests.js
├── utils
    ├── calc.js
    ├── getObjectKey.js
    └── sparkline.js
└── zip-results.js


/.eleventy.js:
--------------------------------------------------------------------------------
  1 | const byteSize = require("byte-size");
  2 | const shortHash = require("short-hash");
  3 | const lodash = require("lodash");
  4 | const getObjectKey = require("./utils/getObjectKey.js");
  5 | const calc = require("./utils/calc.js");
  6 | const Sparkline = require('./utils/sparkline.js');
  7 | 
  8 | function isUrlMatch(haystackUrls, needleUrl) {
  9 | 	if(!Array.isArray(haystackUrls) || haystackUrls.length === 0) {
 10 | 		return false;
 11 | 	}
 12 | 
 13 | 	if(needleUrl && typeof needleUrl === "string") {
 14 | 		// TODO lowercase just the origins
 15 | 		needleUrl = needleUrl.toLowerCase();
 16 | 		if(haystackUrls.indexOf(needleUrl) > -1 || needleUrl.endsWith("/") && haystackUrls.indexOf(needleUrl.substr(0, needleUrl.length - 1)) > -1) {
 17 | 			return true;
 18 | 		}
 19 | 	}
 20 | 	return false;
 21 | }
 22 | 
 23 | function hasUrl(urls, { url, requestedUrl }, skipUrls = []) {
 24 | 	// urls comes from sites[vertical].urls, all requestedUrls (may not include trailing slash)
 25 | 
 26 | 	// TODO lowercase just the origins
 27 | 	let lowercaseUrls = urls.map(targetUrl => targetUrl.toLowerCase());
 28 | 
 29 | 	if(isUrlMatch(skipUrls, requestedUrl) || isUrlMatch(skipUrls, url)) {
 30 | 		return false;
 31 | 	}
 32 | 
 33 | 	// Requested url matches?
 34 | 	if(isUrlMatch(lowercaseUrls, requestedUrl)) {
 35 | 		return true;
 36 | 	}
 37 | 	if(isUrlMatch(lowercaseUrls, url)) {
 38 | 		return true;
 39 | 	}
 40 | 
 41 | 	return false;
 42 | }
 43 | 
 44 | function showDigits(num, digits = 2) {
 45 | 	let toNum = parseFloat(num);
 46 | 	let afterFixed = toNum.toFixed(digits);
 47 | 	return afterFixed;
 48 | }
 49 | 
 50 | function pad(num) {
 51 | 	return (num < 10 ? "0" : "") + num;
 52 | }
 53 | 
 54 | function mapProp(prop, targetObj) {
 55 | 	if(Array.isArray(prop)) {
 56 | 		let otherprops = [];
 57 | 		prop =  prop.map(entry => {
 58 | 			// TODO this only works as the first entry
 59 | 			if(entry === ":newest") {
 60 | 				entry = Object.keys(targetObj).sort().pop();
 61 | 			} else if(entry.indexOf("||") > -1) {
 62 | 				for(let key of entry.split("||")) {
 63 | 					if(lodash.get(targetObj, [...otherprops, key])) {
 64 | 						entry = key;
 65 | 						break;
 66 | 					}
 67 | 				}
 68 | 			}
 69 | 			otherprops.push(entry);
 70 | 
 71 | 			return entry;
 72 | 		});
 73 | 	}
 74 | 
 75 | 	return prop;
 76 | }
 77 | 
 78 | function getLighthouseTotal(entry) {
 79 | 	return entry.lighthouse.performance * 100 +
 80 | 		entry.lighthouse.accessibility * 100 +
 81 | 		entry.lighthouse.bestPractices * 100 +
 82 | 		entry.lighthouse.seo * 100;
 83 | }
 84 | 
 85 | module.exports = function(eleventyConfig) {
 86 | 	eleventyConfig.addFilter("shortHash", shortHash);
 87 | 	eleventyConfig.setServerOptions({
 88 | 		domDiff: false
 89 | 	});
 90 | 
 91 | 	eleventyConfig.addFilter("repeat", function(str, times) {
 92 | 		let result = '';
 93 | 
 94 | 		for (let i = 0; i < times; i++) {
 95 | 			result += str;
 96 | 		}
 97 | 
 98 | 		return result;
 99 | 	});
100 | 
101 | 	// first ${num} entries (and the last entry too)
102 | 	eleventyConfig.addFilter("headAndLast", function(arr, num) {
103 | 		if(num && num < arr.length) {
104 | 			let newArr = arr.slice(0, num);
105 | 			newArr.push(arr[arr.length - 1]);
106 | 			return newArr;
107 | 		}
108 | 		return arr;
109 | 	});
110 | 
111 | 	eleventyConfig.addFilter("displayUrl", function(url, keepWww = false) {
112 | 		if(!keepWww) {
113 | 			url = url.replace("https://www.", "");
114 | 		}
115 | 		url = url.replace("https://", "");
116 | 		if(url.endsWith("/index.html")) {
117 | 			url = url.replace("/index.html", "/");
118 | 		}
119 | 		return url;
120 | 	});
121 | 
122 | 	eleventyConfig.addFilter("showDigits", function(num, digits) {
123 | 		return showDigits(num, digits);
124 | 	});
125 | 
126 | 	eleventyConfig.addFilter("displayTime", function(time) {
127 | 		let num = parseFloat(time);
128 | 		if(num > 850) {
129 | 			return `${showDigits(num / 1000, 2)}s`;
130 | 		}
131 | 		return `${showDigits(num, 0)}ms`;
132 | 	});
133 | 
134 | 	eleventyConfig.addFilter("displayFilesize", function(size) {
135 | 		let normalizedSize = byteSize(size, { units: 'iec', precision: 0 });
136 | 		let unit = normalizedSize.unit;
137 | 		let value = normalizedSize.value;
138 | 		return `<span class="filesize">${value}<span class="filesize-label-sm">${unit.substr(0,1)}</span><span class="filesize-label-lg"> ${unit}</span></span>`;
139 | 	});
140 | 
141 | 	eleventyConfig.addFilter("displayDate", function(timestamp) {
142 | 		let months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
143 | 		let date = new Date(timestamp);
144 | 		let day = `${months[date.getMonth()]} ${pad(date.getDate())}`;
145 | 		return `${day} <span class="leaderboard-hide-md">${pad(date.getHours())}:${pad(date.getMinutes())}</span>`;
146 | 	});
147 | 
148 | 	eleventyConfig.addFilter("sortCumulativeScore", (obj) => {
149 | 		return obj.sort((a, b) => {
150 | 
151 | 			let newestKeyA = Object.keys(a).sort().pop();
152 | 			let newestKeyB = Object.keys(b).sort().pop();
153 | 
154 | 			// Lighthouse error
155 | 			// e.g. { url: 'https://mangoweb.net/', error: 'Unknown error.' }
156 | 			if(b[newestKeyB].error && a[newestKeyA].error) {
157 | 				return 0;
158 | 			} else if(b[newestKeyB].error) {
159 | 				return -1;
160 | 			} else if(a[newestKeyA].error) {
161 | 				return 1;
162 | 			}
163 | 
164 | 			// lower is better
165 | 			return a[newestKeyA].ranks.cumulative - b[newestKeyB].ranks.cumulative;
166 | 		});
167 | 	});
168 | 
169 | 	// Works with arrays too
170 | 	// Sort an object that has `order` props in values.
171 | 	// If prop is not passed in, sorts by object keys
172 | 	// Returns an array
173 | 	eleventyConfig.addFilter("sort", (obj, prop = "___key") => {
174 | 		let arr;
175 | 		let defaultKey = "___key";
176 | 		if(Array.isArray(obj)) {
177 | 			arr = obj;
178 | 		} else {
179 | 			arr = [];
180 | 
181 | 			for(let key in obj) {
182 | 				if(prop === defaultKey) {
183 | 					obj[key][defaultKey] = key;
184 | 				}
185 | 				arr.push(obj[key]);
186 | 			}
187 | 		}
188 | 
189 | 		let sorted = arr.sort((a, b) => {
190 | 			let aVal = lodash.get(a, mapProp(prop, a));
191 | 			let bVal = lodash.get(b, mapProp(prop, b));
192 | 			if(aVal > bVal) {
193 | 				return -1;
194 | 			}
195 | 			if(aVal < bVal) {
196 | 				return 1;
197 | 			}
198 | 			return 0;
199 | 		});
200 | 
201 | 		if(!Array.isArray(obj)) {
202 | 			if(prop === defaultKey) {
203 | 				for(let entry of sorted) {
204 | 					delete entry[defaultKey];
205 | 				}
206 | 			}
207 | 		}
208 | 
209 | 		return sorted;
210 | 	});
211 | 
212 | 	eleventyConfig.addFilter("getObjectKey", getObjectKey);
213 | 
214 | 	function filterResultsToUrls(obj, urls = [], skipKeys = [], skipUrls = []) {
215 | 		let arr = [];
216 | 		for(let key in obj) {
217 | 			if(skipKeys.indexOf(key) > -1) {
218 | 				continue;
219 | 			}
220 | 
221 | 			let result;
222 | 			let newestFilename = Object.keys(obj[key]).sort().pop();
223 | 			result = obj[key][newestFilename];
224 | 			// urls comes from sites[vertical].urls, all requestedUrls (may not include trailing slash)
225 | 			if(urls === true || result && hasUrl(urls, result, skipUrls)) {
226 | 				arr.push(obj[key]);
227 | 			}
228 | 		}
229 | 		return arr;
230 | 	}
231 | 
232 | 	eleventyConfig.addFilter("getSites", (results, sites, vertical, skipKeys = []) => {
233 | 		let urls = sites[vertical].urls;
234 | 		let skipUrls = sites[vertical].skipUrls;
235 | 		let isIsolated = sites[vertical].options && sites[vertical].options.isolated === true;
236 | 		let prunedResults = isIsolated ? results[vertical] : results;
237 | 		return filterResultsToUrls(prunedResults, urls, skipKeys, skipUrls);
238 | 	});
239 | 
240 | 	// Deprecated, use `getSites` instead, it works with isolated categories
241 | 	eleventyConfig.addFilter("filterToUrls", filterResultsToUrls);
242 | 
243 | 	eleventyConfig.addFilter("hundoCount", (entry) => {
244 | 		let count = 0;
245 | 		if(entry.lighthouse.performance === 1) {
246 | 			count++;
247 | 		}
248 | 		if(entry.lighthouse.accessibility === 1) {
249 | 			count++;
250 | 		}
251 | 		if(entry.lighthouse.bestPractices === 1) {
252 | 			count++;
253 | 		}
254 | 		if(entry.lighthouse.seo === 1) {
255 | 			count++;
256 | 		}
257 | 
258 | 		return count;
259 | 	});
260 | 
261 | 	eleventyConfig.addFilter("notGreenCircleCount", (entry) => {
262 | 		let count = 0;
263 | 		if(entry.lighthouse.performance < .9) {
264 | 			count++;
265 | 		}
266 | 		if(entry.lighthouse.accessibility < .9) {
267 | 			count++;
268 | 		}
269 | 		if(entry.lighthouse.bestPractices < .9) {
270 | 			count++;
271 | 		}
272 | 		if(entry.lighthouse.seo < .9) {
273 | 			count++;
274 | 		}
275 | 
276 | 		return count;
277 | 	});
278 | 
279 | 	eleventyConfig.addFilter("hundoCountTotals", (counts, entry) => {
280 | 		if(!entry.error && !isNaN(entry.lighthouse.performance)) {
281 | 			counts.total++;
282 | 		}
283 | 
284 | 		if(entry.lighthouse.performance === 1) {
285 | 			counts.performance++;
286 | 		}
287 | 		if(entry.lighthouse.accessibility === 1) {
288 | 			counts.accessibility++;
289 | 		}
290 | 		if(entry.lighthouse.bestPractices === 1) {
291 | 			counts.bestPractices++;
292 | 		}
293 | 		if(entry.lighthouse.seo === 1) {
294 | 			counts.seo++;
295 | 		}
296 | 
297 | 		if(entry.lighthouse.performance === 1 && entry.lighthouse.accessibility === 1 && entry.lighthouse.bestPractices === 1 && entry.lighthouse.seo === 1) {
298 | 			counts.perfect++;
299 | 		}
300 | 
301 | 		return counts;
302 | 	});
303 | 
304 | 	eleventyConfig.addFilter("lighthouseTotal", getLighthouseTotal);
305 | 
306 | 	eleventyConfig.addFilter("addLighthouseTotals", (arr) => {
307 | 		/* special case */
308 | 		for(let obj of arr) {
309 | 			for(let entry in obj) {
310 | 				if(obj[entry].lighthouse) {
311 | 					obj[entry].lighthouse[":lhtotal"] = getLighthouseTotal(obj[entry]);
312 | 				}
313 | 			}
314 | 		}
315 | 		return arr;
316 | 	});
317 | 
318 | 	eleventyConfig.addFilter("toJSON", function(obj) {
319 | 		return JSON.stringify(obj);
320 | 	});
321 | 
322 | 	eleventyConfig.addFilter("calc", calc);
323 | 
324 | 	eleventyConfig.addFilter("generatorImageUrl", (url) => {
325 | 		return `https://v1.generator.11ty.dev/image/${encodeURIComponent(url)}/`;
326 | 	});
327 | 
328 | 	eleventyConfig.addFilter("hostingImageUrl", (url) => {
329 | 		// return `https://v1--eleventy-api-built-with.netlify.app/${encodeURIComponent(url)}/image/host/`;
330 | 		return `https://v1.builtwith.11ty.dev/${encodeURIComponent(url)}/image/host/`;
331 | 	});
332 | 
333 | 	eleventyConfig.addPairedShortcode("starterMessage", (htmlContent) => {
334 | 		if(process.env.SITE_NAME !== "speedlify") {
335 | 			return htmlContent;
336 | 		}
337 | 		return "";
338 | 	});
339 | 
340 | 	// Assets
341 | 	eleventyConfig.addPassthroughCopy({
342 | 		"./node_modules/chartist/dist/chartist.js": "chartist.js",
343 | 		"./node_modules/chartist/dist/chartist.css.map": "chartist.css.map",
344 | 	});
345 | 
346 | 	eleventyConfig.addWatchTarget("./assets/");
347 | 
348 | 	eleventyConfig.setBrowserSyncConfig({
349 | 		ui: false,
350 | 		ghostMode: false
351 | 	});
352 | 	eleventyConfig.addShortcode('lighthouseSparkline', (site) => {
353 | 		const timeSeries = Object.values(site).sort(
354 | 			(a, b) => a.timestamp - b.timestamp
355 | 		);
356 | 		const values = timeSeries.map((run) => run.lighthouse?.total || 0);
357 | 		return Sparkline({
358 | 			// red-orange-green gradient similar to usage in <speedlify-score>
359 | 			gradient: [
360 | 				{ color: '#ff4e42', offset: '0%' },
361 | 				{ color: '#ff4e42', offset: '30%' },
362 | 				{ color: '#ffa400', offset: '70%' },
363 | 				{ color: '#ffa400', offset: '85%' },
364 | 				{ color: '#0cce6b', offset: '95%' },
365 | 				{ color: '#0cce6b', offset: '100%' },
366 | 			],
367 | 			values,
368 | 			min: 0,
369 | 			max: 400,
370 | 			timeSeries,
371 | 		});
372 | 	});
373 | 
374 | 	eleventyConfig.addShortcode('weightSparkline', (site) => {
375 | 		const timeSeries = Object.values(site).sort(
376 | 			(a, b) => a.timestamp - b.timestamp
377 | 		);
378 | 		const values = timeSeries.map((run) => run.weight?.total || 0);
379 | 		return Sparkline({
380 | 			color: '#d151ff',
381 | 			values,
382 | 			min: 0,
383 | 			timeSeries,
384 | 			// Display raw bytes as pretty values on y axis, e.g. 49244 => 48K
385 | 			formatAxis: (num) => {
386 | 				const { value, unit } = byteSize(num, { units: 'iec', precision: 0 });
387 | 				return value === '0' ? value : value + unit.slice(0, 1);
388 | 			},
389 | 		});
390 | 	});
391 | 
392 | 	eleventyConfig.setWatchJavaScriptDependencies(false);
393 | };
394 | 


--------------------------------------------------------------------------------
/.eleventyignore:
--------------------------------------------------------------------------------
1 | README.md


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .log
3 | _site
4 | _data/results/*
5 | _data/results-last-runs.json
6 | package-lock.json
7 | .env
8 | .cache


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Zach Leatherman @zachleat
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # speedlify
 2 | 
 3 | After you make a fast web site, keep it fast by measuring it over time. Read [Use Speedlify to Continuously Measure Site Performance](https://www.zachleat.com/web/speedlify/). Created by [@zachleat](https://www.zachleat.com/).
 4 | 
 5 | * Requires Node 12+
 6 | * Each file in `_data/sites/*.js` is a category and contains a list of sites for comparison.
 7 | 
 8 | ## Run locally
 9 | 
10 | _After cloning you’ll probably want to delete the initial `_data/sites/*.js` files and create your own file with a list of your own site URLs!_
11 | 
12 | ```
13 | npm install
14 | npm run test-pages
15 | npm run start
16 | ```
17 | 
18 | ## Related
19 | 
20 | * [The Eleventy Leaderboards](https://www.zachleat.com/web/eleventy-leaderboard-speedlify/) are running on Speedlify
21 | * [speedlify.dev](https://www.speedlify.dev/) shows some sample categories
22 | * Use the [`<speedlify-score>` component](https://github.com/zachleat/speedlify-score) to show your scores on your page. Read more at [I added Lighthouse Scores to my Site’s Footer and You Can Too](https://www.zachleat.com/web/lighthouse-in-footer/)
23 | * The [Eleventy Starter Projects list](https://www.11ty.dev/docs/starter/) shows Lighthouse scores from Speedlify. Read more at [The Lighthouse Scores Will Continue Until Morale Improves](https://www.zachleat.com/web/11ty-lighthouse/).
24 | 
25 | ## Deploy to Netlify
26 | 
27 | Can run directly on Netlify (including your tests) and will save the results to a Netlify build cache (via Netlify Build Plugins, see `plugins/keep-data-cache/`).
28 | 
29 | _After cloning you’ll probably want to delete the initial `_data/sites/*.js` files and create your own file with a list of your own site URLs!_
30 | 
31 | <a href="https://app.netlify.com/start/deploy?repository=https://github.com/zachleat/speedlify"><img src="https://www.netlify.com/img/deploy/button.svg" width="146" height="32"></a>
32 | 
33 | Speedlify will also save your data to `/results.zip` so that you can download later. Though this has proved to be unnecessary so far, it does serve as a fallback backup mechanism in case the Netlify cache is lost. Just look up your previous build URL and download the data to restore.
34 | 
35 | [![Netlify Status](https://api.netlify.com/api/v1/badges/7298a132-e366-460a-a4da-1ea352a4e790/deploy-status)](https://app.netlify.com/sites/speedlify/deploys)
36 | 
37 | * **Run every day or week**: You can set Speedlify to run at a specified interval using a Netlify Build Hook, read more on the Eleventy docs: [Quick Tip #008—Trigger a Netlify Build Every Day with IFTTT](https://www.11ty.dev/docs/quicktips/netlify-ifttt/).
38 | 
39 | ## Known Limitations
40 | 
41 | * If you change a URL to remove a redirect (to remove or add a `www.`, moved domains, etc), you probably want to delete the old URL’s data otherwise you’ll have two entries in the results list.
42 | * When running on Netlify, a single category has a max limit on the number of sites it can test, upper bound on how many tests it can complete in the 15 minute Netlify build limit.
43 | * The same URL cannot be listed in two different categories (yet).
44 | 
45 | ## Pay for something better
46 | 
47 | Speedlify is intended as a stepping stone to more robust performance monitoring solutions like:
48 | 
49 | * [SpeedCurve](https://speedcurve.com/)
50 | * [Calibre](https://calibreapp.com/)
51 | * [DebugBear](https://www.debugbear.com/)


--------------------------------------------------------------------------------
/_data/isolatedKeys.js:
--------------------------------------------------------------------------------
 1 | const shortHash = require("short-hash");
 2 | const fastglob = require("fast-glob");
 3 | 
 4 | module.exports = async function() {
 5 | 	let categories = await fastglob("./_data/sites/*.js", {
 6 | 		caseSensitiveMatch: false
 7 | 	});
 8 | 
 9 | 	let isolated = new Set();
10 | 	for(let file of categories) {
11 | 		let category = file.split("/").pop().replace(/\.js$/, "");
12 | 		let categoryData = require(`./sites/${category}.js`);
13 | 		if(typeof categoryData === "function") {
14 | 			categoryData = await categoryData();
15 | 		}
16 | 
17 | 		if(categoryData.options && categoryData.options.isolated) {
18 | 			isolated.add(category);
19 | 		}
20 | 	}
21 | 
22 | 	return Array.from(isolated);
23 | };


--------------------------------------------------------------------------------
/_data/lastruns.js:
--------------------------------------------------------------------------------
 1 | // Nunjucks workaround for dashes in global `results-last-runs.json` variable name
 2 | 
 3 | let lastruns = {};
 4 | 
 5 | try {
 6 | 	lastruns = require("./results-last-runs.json");
 7 | } catch(e) {
 8 | }
 9 | 
10 | module.exports = lastruns;


--------------------------------------------------------------------------------
/_data/lighthouseMaximums.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   average: {
 3 |     fcp: 4000,
 4 |     si: 5800,
 5 |     lcp: 4000,
 6 |     tti: 7300,
 7 |     tbt: 600,
 8 |     cls: 0.25,
 9 |   },
10 |   good: {
11 |     fcp: 2336,
12 |     si: 3387,
13 |     lcp: 2500,
14 |     tti: 3875,
15 |     tbt: 287,
16 |     cls: 0.1,
17 |     // fid: 130,
18 |   },
19 |   
20 | };


--------------------------------------------------------------------------------
/_data/sites/sample.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	name: "Sample", // optional, falls back to object key
 3 | 	description: "The default sites that get tested",
 4 | 	options: {
 5 | 		runs: 1,
 6 | 		frequency: 1, // (in minutes)
 7 | 	},
 8 | 	urls: [
 9 | 		"https://www.speedlify.dev/"
10 | 	]
11 | };


--------------------------------------------------------------------------------
/_data/sites/ssg.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	name: "SSG", // optional, falls back to object key
 3 | 	description: "Site Generator web sites",
 4 | 	// skip if localhost
 5 | 	// skip if this is a new fork of the speedlify (not Zach’s)
 6 | 	skip: !process.env.CONTEXT || process.env.SITE_NAME !== "speedlify",
 7 | 	options: {
 8 | 		frequency: 60 * 23, // 24 hours
 9 | 		// Use "run" if the sites don’t share assets on the same origin
10 | 		//           and we can reset chrome with each run instead of
11 | 		//           each site in every run (it’s faster)
12 | 		// Use "site" if sites are all on the same origin and share assets.
13 | 	},
14 | 	urls: [
15 | 		"https://www.11ty.dev/",
16 | 		"https://www.gatsbyjs.com/",
17 | 		"https://gohugo.io/",
18 | 		"https://nextjs.org/",
19 | 		"https://nuxt.com/",
20 | 		"https://gridsome.org/",
21 | 		"https://vuepress.vuejs.org/",
22 | 		"https://docusaurus.io/",
23 | 		"https://astro.build/",
24 | 		"https://jekyllrb.com/",
25 | 		"https://hexo.io/",
26 | 		"https://svelte.dev/",
27 | 		"https://remix.run/",
28 | 		"https://record-collector.net/",
29 | 		"https://www.solidjs.com/",
30 | 		"https://lume.land/",
31 | 	],
32 | 	skipUrls: [
33 | 		"https://hexo.io/zh-cn/",
34 | 	]
35 | };


--------------------------------------------------------------------------------
/_data/sites/test-runners.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	description: "Front-end Testing Tools",
 3 | 	// skip if localhost
 4 | 	// skip if this is a new fork of the speedlify (not Zach’s)
 5 | 	skip: !process.env.CONTEXT || process.env.SITE_NAME !== "speedlify",
 6 | 	options: {
 7 | 		frequency: 60 * 11 + 30, // 11h, 30m
 8 | 		// Use "run" if the sites don’t share assets on the same origin
 9 | 		//           and we can reset chrome with each run instead of
10 | 		//           each site in every run (it’s faster)
11 | 		// Use "site" if sites are all on the same origin and share assets.
12 | 		freshChrome: "site",
13 | 	},
14 | 	urls: [
15 | 		"https://eslint.org/",
16 | 		"https://qunitjs.com/",
17 | 		"https://karma-runner.github.io/latest/index.html",
18 | 		"https://gulpjs.com/",
19 | 		"https://webhint.io/",
20 | 		"https://gruntjs.com/",
21 | 		"https://theintern.io/",
22 | 		"https://istanbul.js.org/",
23 | 		"https://webdriver.io/",
24 | 		"https://mochajs.org/"
25 | 	]
26 | };


--------------------------------------------------------------------------------
/_data/sites/zachleat.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	name: "zachleat.com", // optional, falls back to object key
 3 | 	description: "Zach’s Personal web site",
 4 | 	// skip if localhost
 5 | 	// skip if this is a new fork of the speedlify (not Zach’s)
 6 | 	skip: !process.env.CONTEXT || process.env.SITE_NAME !== "speedlify",
 7 | 	options: {
 8 | 		frequency: 60 * 23, // 23 hours
 9 | 		// Use "run" if the sites don’t share assets on the same origin
10 | 		//           and we can reset chrome with each run instead of
11 | 		//           each site in every run (it’s faster)
12 | 		// Use "site" if sites are all on the same origin and share assets.
13 | 		freshChrome: "site"
14 | 	},
15 | 	urls: [
16 | 		"https://www.zachleat.com/",
17 | 		"https://www.zachleat.com/about/",
18 | 		"https://www.zachleat.com/web/",
19 | 		"https://www.zachleat.com/web/fonts/",
20 | 		"https://www.zachleat.com/web/eleventy/",
21 | 		"https://www.zachleat.com/resume/",
22 | 		"https://www.zachleat.com/twitter/",
23 | 		// Popular Posts
24 | 		"https://www.zachleat.com/web/lighthouse-in-footer/",
25 | 		"https://www.zachleat.com/web/speedlify/",
26 | 		"https://www.zachleat.com/web/comprehensive-webfonts/",
27 | 		"https://www.zachleat.com/web/google-fonts-display/",
28 | 	]
29 | };


--------------------------------------------------------------------------------
/_data/urlsForApi.js:
--------------------------------------------------------------------------------
 1 | const fastglob = require("fast-glob");
 2 | 
 3 | async function getCategoryToUrlMap() {
 4 | 	let categories = await fastglob("./_data/sites/*.js", {
 5 | 		caseSensitiveMatch: false
 6 | 	});
 7 | 
 8 | 	let map = {};
 9 | 	for(let file of categories) {
10 | 		let categoryName = file.split("/").pop().replace(/\.js$/, "");
11 | 		map[categoryName] = [];
12 | 
13 | 		let categoryData = require(`./sites/${categoryName}.js`);
14 | 		if(typeof categoryData === "function") {
15 | 			categoryData = await categoryData();
16 | 		}
17 | 		// TODO lowercase just the origin?
18 | 		map[categoryName] = categoryData.urls.map(url => url.toLowerCase());
19 | 	}
20 | 
21 | 	return map;
22 | }
23 | 
24 | function getCategoryList(map, url) {
25 | 	let categories = new Set();
26 | 	for(let categoryName in map) {
27 | 		if(map[categoryName].indexOf(url.toLowerCase())) {
28 | 			categories.add(categoryName);
29 | 		}
30 | 	}
31 | 	return Array.from(categories);
32 | }
33 | 
34 | module.exports = async function() {
35 | 	let categoryMap = await getCategoryToUrlMap();
36 | 
37 | 	let resultFiles = await fastglob("./_data/results/**/*.json", {
38 | 		caseSensitiveMatch: false
39 | 	});
40 | 
41 | 	let sites = {};
42 | 
43 | 	// TODO api JSON ranks should be dependent on category
44 | 	for(let resultFile of resultFiles) {
45 | 		let split = resultFile.split("/");
46 | 		let filename = split.pop();
47 | 		let hash = split.pop();
48 | 
49 | 		let resultData = require(`.${resultFile}`);
50 | 
51 | 		let categories = [];
52 | 		if(resultData.requestedUrl) {
53 | 			categories = getCategoryList(categoryMap, resultData.requestedUrl);
54 | 		}
55 | 
56 | 		sites[hash] = {
57 | 			requestedUrl: resultData.requestedUrl,
58 | 			url: resultData.url,
59 | 			// based on final URL not requested URL
60 | 			hash: hash,
61 | 			categories: categories,
62 | 			// Deprecated
63 | 			vertical: categories[0],
64 | 		};
65 | 	}
66 | 	return Object.values(sites);
67 | };


--------------------------------------------------------------------------------
/_includes/layout.njk:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8">
 5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 		<title>Speedlify</title>
 7 | 		<meta name="description" content="Benchmark web pages over time.">
 8 | 		<meta name="generator" content="{{ eleventy.generator }}">
 9 | 		<link rel="stylesheet" href="{{ '/style.css' | url }}">
10 | 		<script>
11 | 		document.documentElement.classList.add("js");
12 | 		</script>
13 | 	</head>
14 | 	<body>
15 | 		<header>
16 | 			<h1 class="speedlify-hed"><a href="{{ '/' | url }}">speedlify</a>{% if vertical %}:{{ vertical }}{% endif %}</h1>
17 | 			<p class="speedlify-subhed">
18 | 				Benchmark {{ sites[vertical].description or "web pages" }} over time.
19 | 				{%- if sites[vertical].unordered %}
20 | 					Results for this category are unordered.
21 | 				{%- endif %}
22 | 				{%- if maxResults %}
23 | 					Updates <em>at most</em> once every {{ sites[vertical].options.frequency or 60 }} minutes. Only the last {{ maxResults }} run{% if maxResults != 1 %}s{% endif %} (and the oldest run) are shown.
24 | 				{%- endif %}
25 | 				Created by <a href="https://www.zachleat.com/">@zachleat</a>.
26 | 			</p>
27 | 			<p class="speedlify-subhed">
28 | 				<a href="https://github.com/zachleat/speedlify/#deploy-to-netlify">Deploy your own instance of Speedlify and test your web sites</a>.
29 | 			</p>
30 | 		</header>
31 | 
32 | 		<main>
33 | 			{{ content | safe }}
34 | 		</main>
35 | 
36 | 		<footer>
37 | 			MIT licensed. Read <a href="https://www.zachleat.com/web/speedlify/">the blog post</a>. Source code on <a href="https://github.com/zachleat/speedlify/">GitHub</a>. Created by <a href="https://www.zachleat.com/">@zachleat</a>.
38 | 		</footer>
39 | 
40 | 		<script defer src="{{ '/chartist.js' | url }}"></script>
41 | 		<script defer src="{{ '/script.js' | url }}"></script>
42 | 	</body>
43 | </html>


--------------------------------------------------------------------------------
/api-urls.11ty.js:
--------------------------------------------------------------------------------
 1 | const shortHash = require("short-hash");
 2 | 
 3 | class ApiUrls {
 4 | 	data() {
 5 | 		return {
 6 | 			layout: false,
 7 | 			permalink: function(data) {
 8 | 				return `/api/urls.json`;
 9 | 			}
10 | 		};
11 | 	}
12 | 
13 | 	render(data) {
14 | 		let resultData = {};
15 | 		for(let urlData of data.urlsForApi) {
16 | 			resultData[urlData.requestedUrl] = urlData;
17 | 		}
18 | 		return JSON.stringify(resultData, null, 2);
19 | 	}
20 | }
21 | 
22 | module.exports = ApiUrls;


--------------------------------------------------------------------------------
/api.11ty.js:
--------------------------------------------------------------------------------
 1 | const getObjectKey = require("./utils/getObjectKey.js");
 2 | 
 3 | class ApiEntry {
 4 | 	async data() {
 5 | 		return {
 6 | 			layout: false,
 7 | 			pagination: {
 8 | 				size: 1,
 9 | 				data: "urlsForApi",
10 | 				alias: "site"
11 | 			},
12 | 			permalink: function(data) {
13 | 				return `/api/${data.site.hash}.json`;
14 | 			}
15 | 		};
16 | 	}
17 | 
18 | 	render(data) {
19 | 		let resultSet = data.results[data.site.hash];
20 | 		if(!resultSet) {
21 | 			// TODO better error message here, returns `false` string
22 | 			return false;
23 | 		}
24 | 
25 | 		let newestKey = getObjectKey(resultSet, ":newest");
26 | 		if(!newestKey) {
27 | 			// TODO better error message here, returns `false` string
28 | 			return false;
29 | 		}
30 | 
31 | 		let secondNewestKey = getObjectKey(resultSet, ":secondnewest");
32 | 		if(resultSet[secondNewestKey]) {
33 | 			resultSet[newestKey].previousRanks = resultSet[secondNewestKey].ranks;
34 | 		}
35 | 		return JSON.stringify(resultSet[newestKey], null, 2);
36 | 	}
37 | }
38 | 
39 | module.exports = ApiEntry;


--------------------------------------------------------------------------------
/assets/chart.js:
--------------------------------------------------------------------------------
 1 | function makeTable(table) {
 2 |   let labels = [];
 3 |   let series = [];
 4 | 
 5 |   let rows = Array.from(table.querySelectorAll(":scope tbody tr"));
 6 |   let minY = 90;
 7 |   let maxY = 100;
 8 |   rows = rows.reverse();
 9 | 
10 |   for(let row of rows) {
11 |     let label = row.children[0].innerText.split(" ");
12 |     labels.push(label.slice(0,2).join(" "));
13 |     let childCount = row.children.length - 1;
14 |     let seriesIndex = 0;
15 |     for(let j = 0, k = childCount; j<k; j++) {
16 |       let data = row.children[j + 1].dataset;
17 |       if(data && data.numericValue) {
18 |         minY = Math.min(data.numericValue, minY);
19 |         maxY = Math.max(data.numericValue, maxY);
20 |         if(!series[seriesIndex]) {
21 |           series[seriesIndex] = [];
22 |         }
23 |         series[seriesIndex].push(data.numericValue);
24 |         seriesIndex++;
25 |       }
26 |     }
27 |   }
28 | 
29 |   let options = {
30 |     high: Math.max(maxY, 100),
31 |     low: Math.max(0, minY - 5),
32 |     fullWidth: true,
33 |     onlyInteger: true,
34 |     showPoint: false,
35 |     lineSmooth: true,
36 |     axisX: {
37 |       showGrid: true,
38 |       showLabel: true
39 |     },
40 |     chartPadding: {
41 |       right: 40
42 |     }
43 |   };
44 | 
45 |   new Chartist.Line(table.parentNode.nextElementSibling, {
46 |     labels: labels,
47 |     series: series
48 |   }, options);
49 | }
50 | 
51 | function initializeAllTables(scope) {
52 |   let tables = scope.querySelectorAll("[data-make-chart]");
53 |   for(let table of tables) {
54 |     // make sure not in a closed details
55 |     if(table.closest("details[open]") || !table.closest("details")) {
56 |       makeTable(table);
57 |     }
58 |   }
59 | }
60 | 
61 | initializeAllTables(document);
62 | 
63 | let details = document.querySelectorAll("details");
64 | // let first = true;
65 | for(let detail of details) {
66 |   // open the first details by default
67 |   // if(first) {
68 |   //   detail.open = true;
69 |   //   first = false;
70 |   // }
71 |   detail.addEventListener("toggle", function(e) {
72 |     let open = e.target.hasAttribute("open");
73 |     if(open) {
74 |       initializeAllTables(e.target);
75 |     }
76 |     let row = e.target.closest(".leaderboard-list-entry-details");
77 |     row.classList.toggle("expanded", open);
78 |     row.previousElementSibling.classList.toggle("expanded", open);
79 |   });
80 | }
81 | 
82 | let expandAliases = document.querySelectorAll("[data-expand-alias]");
83 | for(let alias of expandAliases) {
84 |   alias.addEventListener("click", function(e) {
85 |     e.preventDefault();
86 |     let href = e.target.closest("a[href]").getAttribute("href");
87 |     if(href) {
88 |       let details = document.querySelector(href);
89 |       if(details) {
90 |         details.open = !details.hasAttribute("open");
91 |       }
92 |     }
93 |   }, false);
94 | }
95 | 


--------------------------------------------------------------------------------
/assets/css.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: style.css
3 | ---
4 | {% include "../node_modules/chartist/dist/chartist.css" %}
5 | {% include "./style.css" %}
6 | {% include "./sparkline.css" %}


--------------------------------------------------------------------------------
/assets/islands.js:
--------------------------------------------------------------------------------
  1 | class Island extends HTMLElement {
  2 |   static tagName = "is-land";
  3 | 
  4 |   constructor() {
  5 |     super();
  6 | 
  7 |     this.attrs = {
  8 |       autoInitType: "autoinit",
  9 |       import: "import",
 10 |       fallback: "fallback",
 11 |       scriptType: "module/island",
 12 |       template: "data-island"
 13 |     };
 14 | 
 15 |     this.conditionMap = {
 16 |       visible: Conditions.waitForVisible,
 17 |       idle: Conditions.waitForIdle,
 18 |       interaction: Conditions.waitForInteraction,
 19 |       media: Conditions.waitForMedia,
 20 |       "save-data": Conditions.checkSaveData,
 21 |     };
 22 | 
 23 |     // Internal promises
 24 |     this.ready = new Promise((resolve, reject) => {
 25 |       this.readyResolve = resolve;
 26 |       this.readyReject = reject;
 27 |     });
 28 |   }
 29 | 
 30 |   static getParents(el, selector) {
 31 |     let nodes = [];
 32 |     while(el) {
 33 |       if(el.matches && el.matches(selector)) {
 34 |         nodes.push(el);
 35 |       }
 36 |       el = el.parentNode;
 37 |     }
 38 |     return nodes;
 39 |   }
 40 | 
 41 |   static async ready(el) {
 42 |     let parents = Island.getParents(el, Island.tagName);
 43 |     let imports = await Promise.all(parents.map(el => el.wait()));
 44 | 
 45 |     // return innermost module import
 46 |     if(imports.length) {
 47 |       return imports[0];
 48 |     }
 49 |   }
 50 | 
 51 |   async forceFallback() {
 52 |     let prefix = "is-island-waiting--";
 53 |     let extraSelector = this.fallback ? this.fallback : "";
 54 |     // Reverse here as a cheap way to get the deepest nodes first
 55 |     let components = Array.from(this.querySelectorAll(`:not(:defined)${extraSelector ? `,${extraSelector}` : ""}`)).reverse();
 56 |     let promises = [];
 57 | 
 58 |     // with thanks to https://gist.github.com/cowboy/938767
 59 |     for(let node of components) {
 60 |       if(!node.isConnected || node.localName === Island.tagName) {
 61 |         continue;
 62 |       }
 63 | 
 64 |       // assign this before we remove it from the document
 65 |       let readyP = Island.ready(node);
 66 | 
 67 |       // Special case for img just removes the src to preserve aspect ratio while loading
 68 |       if(node.localName === "img") {
 69 |         let attr = prefix + "src";
 70 |         // remove
 71 |         node.setAttribute(attr, node.getAttribute("src"));
 72 |         node.setAttribute("src", `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>`);
 73 | 
 74 |         promises.push(readyP.then(() => {
 75 |           // restore
 76 |           node.setAttribute("src", node.getAttribute(attr));
 77 |           node.removeAttribute(attr);
 78 |         }));
 79 |       } else { // everything else renames the tag
 80 |         // remove from document to prevent web component init
 81 |         let cloned = document.createElement(prefix + node.localName);
 82 |         for(let attr of node.getAttributeNames()) {
 83 |           cloned.setAttribute(attr, node.getAttribute(attr));
 84 |         }
 85 | 
 86 |         let children = Array.from(node.childNodes);
 87 |         for(let child of children) {
 88 |           cloned.append(child); // Keep the *same* child nodes, clicking on a details->summary child should keep the state of that child
 89 |         }
 90 |         node.replaceWith(cloned);
 91 | 
 92 |         promises.push(readyP.then(() => {
 93 |           // restore children (not cloned)
 94 |           for(let child of Array.from(cloned.childNodes)) {
 95 |             node.append(child);
 96 |           }
 97 |           cloned.replaceWith(node);
 98 |         }));
 99 |       }
100 |     }
101 | 
102 |     return promises;
103 |   }
104 | 
105 |   wait() {
106 |     return this.ready;
107 |   }
108 | 
109 |   getConditions() {
110 |     let map = {};
111 |     for(let key of Object.keys(this.conditionMap)) {
112 |       if(this.hasAttribute(`on:${key}`)) {
113 |         map[key] = this.getAttribute(`on:${key}`);
114 |       }
115 |     }
116 | 
117 |     return map;
118 |   }
119 | 
120 |   async connectedCallback() {
121 |     this.fallback = this.getAttribute(this.attrs.fallback)
122 |     this.autoInitType = this.getAttribute(this.attrs.autoInitType);
123 | 
124 |     // Keep fallback content without initializing the components
125 |     // TODO improvement: only run this for not-eager components?
126 |     await this.forceFallback();
127 | 
128 |     await this.hydrate();
129 |   }
130 | 
131 |   getInitScripts() {
132 |     return this.querySelectorAll(`:scope script[type="${this.attrs.scriptType}"]`);
133 |   }
134 | 
135 |   getTemplates() {
136 |     return this.querySelectorAll(`:scope template[${this.attrs.template}]`);
137 |   }
138 | 
139 |   replaceTemplates(templates) {
140 |     // replace <template> with the live content
141 |     for(let node of templates) {
142 |       // get rid of the rest of the content on the island
143 |       if(node.getAttribute(this.attrs.template) === "replace") {
144 |         let children = Array.from(this.childNodes);
145 |         for(let child of children) {
146 |           this.removeChild(child);
147 |         }
148 |         this.appendChild(node.content);
149 |         break;
150 |       } else {
151 |         node.replaceWith(node.content);
152 |       }
153 |     }
154 |   }
155 | 
156 |   async hydrate() {
157 |     let conditions = [];
158 |     if(this.parentNode) {
159 |       // wait for all parents before hydrating
160 |       conditions.push(Island.ready(this.parentNode));
161 |     }
162 |     let attrs = this.getConditions();
163 |     for(let condition in attrs) {
164 |       if(this.conditionMap[condition]) {
165 |         conditions.push(this.conditionMap[condition](attrs[condition], this));
166 |       }
167 |     }
168 |     // Loading conditions must finish before dependencies are loaded
169 |     await Promise.all(conditions);
170 | 
171 |     this.replaceTemplates(this.getTemplates());
172 | 
173 |     let mod;
174 |     // [dependency="my-component-code.js"]
175 |     let importScript = this.getAttribute(this.attrs.import);
176 |     if(importScript) {
177 |       // we could resolve import maps here manually but you’d still have to use the full URL in your script’s import anyway
178 |       mod = await import(importScript);
179 |     }
180 | 
181 |     // do nothing if has script[type="module/island"], will init manually in script via ready()
182 |     let initScripts = this.getInitScripts();
183 | 
184 |     if(initScripts.length > 0) {
185 |       // activate <script type="module/island">
186 |       for(let old of initScripts) {
187 |         let script = document.createElement("script");
188 |         script.setAttribute("type", "module");
189 |         // Idea: *could* modify this content to retrieve access to the modules therein
190 |         script.textContent = old.textContent;
191 |         old.replaceWith(script);
192 |       }
193 |     } else if(mod) {
194 |       let autoInitType = this.autoInitType || importScript;
195 |       if(autoInitType === "petite-vue" || autoInitType === "vue") {
196 |         mod.createApp().mount(this);
197 |       }
198 |     }
199 | 
200 |     // When using <script type="module/island"> `readyResolve` will fire before any internal imports finish!
201 |     this.readyResolve({
202 |       import: mod
203 |     });
204 |   }
205 | }
206 | 
207 | class Conditions {
208 |   static waitForVisible(noop, el) {
209 |     if(!('IntersectionObserver' in window)) {
210 |       // runs immediately
211 |       return;
212 |     }
213 | 
214 |     return new Promise(resolve => {
215 |       let observer = new IntersectionObserver(entries => {
216 |         let [entry] = entries;
217 |         if(entry.isIntersecting) {
218 |           observer.unobserve(entry.target);
219 |           resolve();
220 |         }
221 |       });
222 | 
223 |       observer.observe(el);
224 |     });
225 |   }
226 | 
227 |   static waitForIdle() {
228 |     let onload = new Promise(resolve => {
229 |       if(document.readyState !== "complete") {
230 |         window.addEventListener("load", () => resolve(), { once: true });
231 |       } else {
232 |         resolve();
233 |       }
234 |     });
235 | 
236 |     if(!("requestIdleCallback" in window)) {
237 |       // run immediately
238 |       return onload;
239 |     }
240 | 
241 |     // both idle and onload
242 |     return Promise.all([
243 |       new Promise(resolve => {
244 |         requestIdleCallback(() => {
245 |           resolve();
246 |         });
247 |       }),
248 |       onload,
249 |     ]);
250 |   }
251 | 
252 |   static waitForInteraction(eventOverrides, el) {
253 |     let events = ["click", "touchstart"];
254 |     // event overrides e.g. on:interaction="mouseenter"
255 |     if(eventOverrides) {
256 |       events = (eventOverrides || "").split(",");
257 |     }
258 | 
259 |     return new Promise(resolve => {
260 |       function resolveFn(e) {
261 |         resolve();
262 | 
263 |         // cleanup the other event handlers
264 |         for(let name of events) {
265 |           el.removeEventListener(name, resolveFn);
266 |         }
267 |       }
268 | 
269 |       for(let name of events) {
270 |         el.addEventListener(name, resolveFn, { once: true });
271 |       }
272 |     });
273 |   }
274 | 
275 |   static waitForMedia(query) {
276 |     let mm = {
277 |       matches: true
278 |     };
279 | 
280 |     if(query && ("matchMedia" in window)) {
281 |       mm = window.matchMedia(query);
282 |     }
283 | 
284 |     if(mm.matches) {
285 |       return;
286 |     }
287 | 
288 |     return new Promise(resolve => {
289 |       mm.addListener(e => {
290 |         if(e.matches) {
291 |           resolve();
292 |         }
293 |       });
294 |     });
295 |   }
296 | 
297 |   static checkSaveData(expects) {
298 |     if("connection" in navigator && navigator.connection.saveData === (expects !== "false")) {
299 |       return Promise.resolve();
300 |     }
301 | 
302 |     // dangly promise
303 |     return new Promise(() => {});
304 |   }
305 | }
306 | 
307 | // Should this auto define? Folks can redefine later using { component } export
308 | if("customElements" in window) {
309 |   window.customElements.define(Island.tagName, Island);
310 | }
311 | 


--------------------------------------------------------------------------------
/assets/script.njk:
--------------------------------------------------------------------------------
1 | ---
2 | permalink: script.js
3 | ---
4 | {% include "./islands.js" %}
5 | {% include "../node_modules/speedlify-score/speedlify-score.js" %}
6 | {% include "./chart.js" %}
7 | {% include "./timestamp-ago.js" %}
8 | 


--------------------------------------------------------------------------------
/assets/sparkline.css:
--------------------------------------------------------------------------------
 1 | .sparkline {
 2 | 	vertical-align: middle;
 3 | 	display: grid;
 4 | 	grid-template: auto auto / auto auto;
 5 | 	gap: 0.25rem;
 6 | }
 7 | .sparkline .x-axis,
 8 | .sparkline .y-axis {
 9 | 	display: flex;
10 | 	justify-content: space-between;
11 | 	line-height: 0.65;
12 | 	font-size: 0.5rem;
13 | 	color: hsl(0, 0%, 50%);
14 | }
15 | .sparkline .y-axis {
16 | 	flex-direction: column-reverse;
17 | 	text-align: right;
18 | 	min-width: 3em;
19 | }
20 | .sparkline .x-axis {
21 | 	grid-column: 2 / 3;
22 | }
23 | .sparkline svg {
24 | 	--white: 255, 0%, 100%;
25 | 	background: linear-gradient(hsla(var(--white), 0.1), transparent);
26 | 	border-left: 1px solid hsla(var(--white), 0.1);
27 | 	border-bottom: 1px solid hsla(var(--white), 0.1);
28 | 	width: 4.375rem;
29 | 	height: auto;
30 | 	stroke-width: 1.5px;
31 | 	stroke-linejoin: round;
32 | }
33 | 


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
  1 | html {
  2 | 	overflow-y: scroll;
  3 | 	margin: 0;
  4 | }
  5 | body {
  6 | 	font-family: system-ui, sans-serif;
  7 | 	background-color: #2e2e2e;
  8 | 	color: #fff;
  9 | 	margin: 0.5rem; /* 8px /16 */
 10 | }
 11 | footer {
 12 | 	font-style: italic;
 13 | 	text-align: center;
 14 | }
 15 | code {
 16 | 	font-family: Monaco, monospace;
 17 | }
 18 | 
 19 | html:not(.js) [data-js-only] {
 20 | 	display: none !important;
 21 | }
 22 | [data-sr-only] {
 23 | 	border: 0;
 24 | 	clip: rect(0 0 0 0);
 25 | 	height: 1px;
 26 | 	margin: -1px;
 27 | 	overflow: hidden;
 28 | 	padding: 0;
 29 | 	position: absolute;
 30 | 	white-space: nowrap; /* 1 */
 31 | 	width: 1px;
 32 | }
 33 | 
 34 | 
 35 | :link,
 36 | :visited {
 37 | 	color: #fff;
 38 | }
 39 | 
 40 | summary {
 41 | 	padding: .25em 0;
 42 | }
 43 | 
 44 | .url {
 45 | 	font-size: 1em; /* 20px /16 */
 46 | 	-ms-word-break: break-all;
 47 | 	word-break: break-all;
 48 | 	word-break: break-word;
 49 | }
 50 | @media (min-width: 60em) { /* 960px */
 51 | 	.url {
 52 | 		font-size: 1.25em; /* 20px /16 */
 53 | 	}
 54 | }
 55 | 
 56 | table {
 57 | 	border-spacing: 0;
 58 | 	border-collapse: collapse;
 59 | }
 60 | th, td {
 61 | 	margin: 0;
 62 | 	padding: .75rem .5rem;
 63 | }
 64 | th {
 65 | 	text-align: left;
 66 | 	color: #ddd;
 67 | 	font-weight: normal;
 68 | }
 69 | 
 70 | abbr {
 71 | 	text-decoration: none;
 72 | }
 73 | 
 74 | /* Speedlify specific styles */
 75 | .speedlify-hed {
 76 | 	text-align: center;
 77 | 	font-size: 2em;
 78 | 	text-transform: lowercase;
 79 | 	font-style: italic;
 80 | }
 81 | @media (min-width: 37.5em) { /* 600px */
 82 | 	.speedlify-hed {
 83 | 		font-size: 3em;
 84 | 	}
 85 | }
 86 | .speedlify-subhed {
 87 | 	padding: 0 2em;
 88 | 	margin: 0 auto;
 89 | 	max-width: 40em;
 90 | 	text-align: center;
 91 | }
 92 | .speedlify-subhed ~ .speedlify-subhed {
 93 | 	margin-top: 1em;
 94 | }
 95 | 
 96 | /* Leaderboard */
 97 | 
 98 | .leaderboard-wrapper {
 99 | 	margin-left: -.5rem;
100 | 	margin-right: -.4375rem; /* 7px /16 */
101 | }
102 | .leaderboard {
103 | 	width: 100%;
104 | 	margin: 5em auto;
105 | 	max-width: 100rem; /* 1600px /16 */
106 | }
107 | .leaderboard-directlink {
108 | 	text-decoration: none;
109 | }
110 | .leaderboard-directlink span {
111 | 	font-size: 0.75em; /* 12px /16 */
112 | 	margin-right: 2px;
113 | 	vertical-align: text-top;
114 | }
115 | .leaderboard-trophies {
116 | 	white-space: nowrap;
117 | }
118 | .leaderboard-url {
119 | 	width: 100%;
120 | }
121 | .leaderboard-redirect-error,
122 | .leaderboard-redirect-warn {
123 | 	text-transform: uppercase;
124 | 	font-size: 0.75em; /* 12px /16 */
125 | 	font-weight: 400;
126 | 	margin-left: 1em;
127 | }
128 | .leaderboard-redirect-error:before {
129 | 	content: "⛔️ ";
130 | }
131 | .leaderboard-redirect-warn:before {
132 | 	content: "⚠️ ";
133 | }
134 | .leaderboard-redirect-warn code {
135 | 	text-transform: none;
136 | }
137 | .leaderboard-redirect-warn {
138 | 	color: hsl(58, 100%, 71%);
139 | }
140 | .leaderboard-redirect-error {
141 | 	color: hsl(1, 100%, 58%);
142 | }
143 | .leaderboard-list {
144 | 	width: auto;
145 | 	margin-left: auto;
146 | 	margin-right: auto;
147 | }
148 | .leaderboard-list-entry {
149 | 	border-top: 1px solid #444;
150 | }
151 | .leaderboard-list-entry:not(.expanded):target {
152 | 	background-color: #444;
153 | }
154 | .leaderboard-list-entry.expanded {
155 | 	border-color: #888;
156 | }
157 | .leaderboard-list-entry-badrank {
158 | 	border-top: 1px solid hsl(333, 100%, 20%);
159 | 	border-bottom: 1px solid hsl(333, 100%, 20%);
160 | }
161 | .js .leaderboard-list-entry-details:not(.expanded) {
162 | 	display: none;
163 | }
164 | .leaderboard-list-entry.expanded,
165 | .leaderboard-list-entry-details.expanded {
166 | 	background-color: #181818;
167 | }
168 | .leaderboard-expand-icon {
169 | 	display: inline-block;
170 | 	transition: .3s all;
171 | 	transform-origin: center;
172 | 	margin-right: 4px;
173 | }
174 | .leaderboard-expand-icon:before {
175 | 	content: "";
176 | 	display: inline-block;
177 | 	width: 0;
178 | 	height: 0;
179 | 	border-top: 7px solid transparent;
180 | 	border-bottom: 7px solid transparent;
181 | 	border-left: 7px solid #aaa;
182 | }
183 | .leaderboard-list-entry.expanded .leaderboard-expand-icon {
184 | 	transform: rotate(90deg);
185 | }
186 | .leaderboard-list-entry.expanded [data-expand-alias] {
187 | 	border-color: transparent;
188 | }
189 | .leaderboard-list-entry-details > td {
190 | 	padding: 0;
191 | }
192 | .leaderboard-list-entry-thumbnail {
193 | 	width: 2em;
194 | 	height: 2em;
195 | 	margin-right: .5em;
196 | 	vertical-align: middle;
197 | 	border: none;
198 | 	border-radius: .2em;
199 | }
200 | .leaderboard-list-entry-thumbnail.small {
201 | 	width: 1.5em;
202 | 	height: 1.5em;
203 | }
204 | 
205 | .leaderboard caption {
206 | 	font-size: 1.5em;
207 | 	margin: 0 0 1em;
208 | }
209 | .leaderboard-data-right {
210 | 	text-align: right;
211 | }
212 | @media (max-width: 37.4375em) { /* 599px */
213 | 	.leaderboard-hide-sm {
214 | 		display: none;
215 | 	}
216 | }
217 | @media (max-width: 72em) { /* 1152px */
218 | 	.leaderboard-hide-md {
219 | 		display: none;
220 | 	}
221 | }
222 | .leaderboard > thead > tr > th {
223 | 	font-size: 0.8125em; /* 13px /16 */
224 | }
225 | @media (min-width: 50em) { /* 800px */
226 | 	.leaderboard > tbody > tr > td {
227 | 		font-size: 1.3125em; /* 21px /16 */
228 | 	}
229 | }
230 | 
231 | [data-expand-alias] {
232 | 	white-space: nowrap;
233 | 	display: inline-block;
234 | 	text-decoration: none;
235 | 	background-color: #444;
236 | 	border-radius: 50px;
237 | 	border: 1px solid #aaa;
238 | 	padding: .5em 1em;
239 | 	text-align: center;
240 | }
241 | .js .leaderboard-details > summary {
242 | 	border: 0;
243 | 	clip: rect(0 0 0 0);
244 | 	height: 1px;
245 | 	margin: -1px;
246 | 	overflow: hidden;
247 | 	padding: 0;
248 | 	position: absolute;
249 | 	white-space: nowrap; /* 1 */
250 | 	width: 1px;
251 | }
252 | 
253 | /* Results table */
254 | .results {
255 | 	width: 100%;
256 | }
257 | .results th,
258 | .results td {
259 | 	padding: .25em;
260 | }
261 | @media (min-width: 25em) { /* 400px */
262 | 	.results th,
263 | 	.results td {
264 | 		padding-left: .5em;
265 | 		padding-right: .5em;
266 | 	}
267 | }
268 | .results th {
269 | 	color: #fff;
270 | 	border: 1px solid #555;
271 | 	text-align: center;
272 | }
273 | .results th:first-child {
274 | 	border-left: none;
275 | }
276 | @media (max-width: 87.4375em) { /* 1399px */
277 | 	.results th:last-child {
278 | 		border-right: none;
279 | 	}
280 | }
281 | .results tr:first-child th {
282 | 	font-weight: bold;
283 | }
284 | .results td {
285 | 	white-space: nowrap;
286 | }
287 | .results-calc {
288 | 	text-align: center;
289 | }
290 | .results-bool {
291 | 	width: 1ch;
292 | }
293 | .results-bool + td {
294 | 	padding-left: 0;
295 | }
296 | .results-date {
297 | 	width: 6.25rem; /* 100px /16 */
298 | }
299 | .leaderboard .results th,
300 | .leaderboard .results td {
301 | 	font-size: 0.6875em; /* 11px /16 */
302 | }
303 | @media (min-width: 31.25em) { /* 500px */
304 | 	.leaderboard .results th,
305 | 	.leaderboard .results td {
306 | 		font-size: 0.875em; /* 14px /16 */
307 | 	}
308 | }
309 | @media (min-width: 50em) { /* 800px */
310 | 	.leaderboard .results th,
311 | 	.leaderboard .results td {
312 | 		font-size: 0.7619047619048em; /* 16px /21 */
313 | 	}
314 | }
315 | 
316 | .small,
317 | .count,
318 | .date,
319 | .heart-hundo {
320 | 	color: #aaa;
321 | 	font-size: 0.8125em; /* 13px /16 */
322 | }
323 | .leaderboard-score-circles {
324 | 	display: inline-flex;
325 | 	margin-right: 8px;
326 | 	flex-wrap: nowrap;
327 | }
328 | .leaderboard-score-sum {
329 | 	display: inline-block;
330 | 	vertical-align: middle;
331 | }
332 | .leaderboard-score-circles {
333 | 	font-size: 0.6875rem; /* 11px /16 */
334 | 	font-weight: 600;
335 | 	line-height: 1;
336 | }
337 | .leaderboard-score-circles-400 {
338 | 	--speedlify-circle: #bcffc2;
339 | }
340 | @media (min-width: 37.5em) { /* 600px */
341 | 	.leaderboard-score-circles {
342 | 		font-size: 0.8125em; /* 13px /16 */
343 | 	}
344 | }
345 | 
346 | /* Score Cell RWD */
347 | .leaderboard-score{
348 | 	white-space: nowrap;
349 | 	display: flex;
350 | 	justify-content: space-between;
351 | 	align-items: center;
352 | }
353 | @media (max-width: 30em) { /* 480px */
354 | 	.leaderboard-score{
355 | 		display: none;
356 | 	}
357 | }
358 | @media (max-width: 60em) { /* 960px */
359 | 	.leaderboard-score-circles {
360 | 		display: none;
361 | 	}
362 | }
363 | 
364 | /* Layout */
365 | .tablewrap {
366 | 	width: 100%;
367 | 	margin: 0 0 2em;
368 | }
369 | @media (min-width: 87.5em) { /* 1400px */
370 | 	.layout {
371 | 		display: grid;
372 | 		grid-gap: 1em;
373 | 		margin-bottom: 2em;
374 | 	}
375 | 	.js .layout {
376 | 		grid-template-columns: repeat(auto-fill, 49%);
377 | 	}
378 | }
379 | 
380 | /* File sizes */
381 | /*.filesize {}*/
382 | .filesize-label-lg {
383 | 	display: none;
384 | }
385 | 
386 | @media (min-width: 31.25em) { /* 500px */
387 | 	.filesize-label-sm {
388 | 		display: none;
389 | 	}
390 | 	.filesize-label-lg {
391 | 		display: inline;
392 | 	}
393 | }
394 | [data-numeric-value="0"] .filesize-label-sm,
395 | [data-numeric-value="0"] .filesize-label-lg,
396 | [data-numeric-value="0"] .count {
397 | 	display: none;
398 | }
399 | 
400 | /* Charts */
401 | 
402 | .ct-chart.ct-chart {
403 | 	margin-bottom: 2em;
404 | }
405 | .ct-line.ct-line {
406 | 	stroke-width: 3px;
407 | }
408 | .ct-label.ct-label {
409 | 	fill: rgba(255, 255, 255, 0.4);
410 | 	color: rgba(255, 255, 255, 0.4);
411 | 	white-space: nowrap;
412 | }
413 | .ct-grid.ct-grid {
414 | 	stroke: rgba(255, 255, 255, 0.2);
415 | }
416 | /* via https://learnui.design/tools/data-color-picker.html */
417 | :root {
418 | 	--speedlify-color-1: #374c80;
419 | 	--speedlify-color-2: #7a5195;
420 | 	--speedlify-color-3: #bc5090;
421 | 	--speedlify-color-4: #ef5675;
422 | 	--speedlify-color-5: #ff764a;
423 | 	--speedlify-color-6: #ffa600;
424 | }
425 | .color--lighthouse {
426 | 	--speedlify-color-1: #004e5f;
427 | 	--speedlify-color-2: #006a6c;
428 | 	--speedlify-color-3: #00845f;
429 | 	--speedlify-color-4: #4f9a3e;
430 | 	--speedlify-color-5: #a3a704;
431 | 	--speedlify-color-6: #ffa600;
432 | }
433 | .color--weight {
434 | 	--speedlify-color-1: #5100ff;
435 | 	--speedlify-color-2: #de00c3;
436 | 	--speedlify-color-3: #ff0085;
437 | 	--speedlify-color-4: #ff004f;
438 | 	--speedlify-color-5: #ff6c22;
439 | 	--speedlify-color-6: #ffa600;
440 | }
441 | .results-series-a {
442 | 	background-color: var(--speedlify-color-1);
443 | }
444 | .ct-series-a.ct-series-a .ct-line {
445 | 	stroke: var(--speedlify-color-1);
446 | }
447 | .results-series-b {
448 | 	background-color: var(--speedlify-color-2);
449 | }
450 | .ct-series-b.ct-series-b .ct-line {
451 | 	stroke: var(--speedlify-color-2);
452 | }
453 | .results-series-c {
454 | 	background-color: var(--speedlify-color-3);
455 | }
456 | .ct-series-c.ct-series-c .ct-line {
457 | 	stroke: var(--speedlify-color-3);
458 | }
459 | .results-series-d {
460 | 	background-color: var(--speedlify-color-4);
461 | }
462 | .ct-series-d.ct-series-d .ct-line {
463 | 	stroke: var(--speedlify-color-4);
464 | }
465 | .results-series-e {
466 | 	background-color: var(--speedlify-color-5);
467 | }
468 | .ct-series-e.ct-series-e .ct-line {
469 | 	stroke: var(--speedlify-color-5);
470 | }
471 | .results-series-f {
472 | 	background-color: var(--speedlify-color-6);
473 | }
474 | .ct-series-f.ct-series-f .ct-line {
475 | 	stroke: var(--speedlify-color-6);
476 | }
477 | 
478 | 
479 | /* Category stats */
480 | .category-stats {
481 | 	margin: 2em auto 4em;
482 | 	max-width: 25em; /* 400px /16 */
483 | }
484 | .category-stats,
485 | .category-stats-entry {
486 | 	display: flex;
487 | 	flex-wrap: wrap;
488 | 	justify-content: center;
489 | 	align-items: center;
490 | }
491 | .category-stats-entry {
492 | 	flex-basis: 20em;
493 | 	padding: 0 1em;
494 | }
495 | .category-stats dt,
496 | .category-stats dd {
497 | 	flex-basis: 4.6875em; /* 150px /32 */
498 | }
499 | .category-stats dt {
500 | 	flex-grow: 999;
501 | 	min-width: 9.375em; /* 150px /16 */
502 | 	text-align: right;
503 | }
504 | .category-stats dd {
505 | 	flex-grow: 1;
506 | 	text-align: right;
507 | 	margin: 0 0 0 .5em;
508 | 	font-size: 2em;
509 | 	font-variant-numeric: tabular-nums;
510 | 	font-weight: 700;
511 | }
512 | .category-stats dd span {
513 | 	font-weight: 100;
514 | }


--------------------------------------------------------------------------------
/assets/timestamp-ago.js:
--------------------------------------------------------------------------------
 1 | ;(function() {
 2 | 	if(!("customElements" in window) || !("Intl" in window) || !Intl.RelativeTimeFormat) {
 3 | 		return;
 4 | 	}
 5 | 	const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
 6 | 
 7 | 	customElements.define("timestamp-ago", class extends HTMLElement {
 8 | 		connectedCallback() {
 9 | 			let timestamp = this.getAttribute("timestamp");
10 | 			if(timestamp) {
11 | 				let date = (new Date()).setTime(timestamp);
12 | 				let diff = Math.floor((date - Date.now())/(1000 * 60 * 60));
13 | 				this.setAttribute("title", this.innerText);
14 | 				this.innerText = rtf.format(diff, "hour");
15 | 			}
16 | 		}
17 | 	});
18 | })();


--------------------------------------------------------------------------------
/categories.njk:
--------------------------------------------------------------------------------
  1 | ---
  2 | maxResults: 10
  3 | layout: layout.njk
  4 | pagination:
  5 |   data: "sites"
  6 |   size: 1
  7 |   alias: vertical
  8 | permalink: "/{{ (sites[vertical].name or vertical) | slug }}/"
  9 | counts:
 10 |   performance: 0
 11 |   accessibility: 0
 12 |   bestPractices: 0
 13 |   seo: 0
 14 |   perfect: 0
 15 |   total: 0
 16 | ---
 17 | <div class="leaderboard-wrapper">
 18 | 	<table class="leaderboard">
 19 | 		<thead>
 20 | 			<tr>
 21 | {%- if not sites[vertical].unordered %}
 22 | 				<th>Rank</th>
 23 | 				<th class="leaderboard-hide-md">Trophy</th>
 24 | {%- endif %}
 25 | 				<th>URL</th>
 26 | 				<th class="leaderboard-hide-md">Built With</th>
 27 | 				<th class="leaderboard-hide-md">Host</th>
 28 | 				<th class="leaderboard-score">Lighthouse</th>
 29 | 				<th class="leaderboard-hide-sm">Page weight</th>
 30 | 				<th class="leaderboard-data-right"><span data-sr-only>Data and Graphs</span></th>
 31 | 			</tr>
 32 | 		</thead>
 33 | 		<tbody>
 34 | 		{%- set showRank = true %}
 35 | 		{%- for site in results | getSites(sites, vertical, isolatedKeys) | sortCumulativeScore %}
 36 | 			{%- set newestKey = site | getObjectKey(":newest") %}
 37 | 			{%- set key = site | getObjectKey %}
 38 | 			{%- set hundos = 0 %}
 39 | 
 40 | 			{%- if not site[newestKey].error %}
 41 | 				{%- set hundos = site[newestKey] | hundoCount %}
 42 | 				{%- set notGreenCircleCount = site[newestKey] | notGreenCircleCount %}
 43 | 				{%- if notGreenCircleCount >= 3 and sites[vertical].options and sites[vertical].options.noShame %}{% set showRank = false %}{% endif %}
 44 | 			{% endif %}
 45 | 			<tr class="leaderboard-list-entry{% if not sites[vertical].unordered and site[newestKey].ranks and loop.index != site[newestKey].ranks.cumulative %} leaderboard-list-entry-badrank{% endif %}" id="site-{{ site[key].url | shortHash }}">
 46 | {%- if not sites[vertical].unordered %}
 47 | 				<td class="leaderboard-number">
 48 | 					{%- if showRank %}<a href="#site-{{ site[key].url | shortHash }}" class="leaderboard-directlink"><span>#</span>{{ loop.index }}</a>{% endif -%}
 49 | 				</td>
 50 | 				<td class="leaderboard-hide-md leaderboard-trophies">
 51 | 					{%- if hundos === 4 %}🏆{% endif %}
 52 | 					{%- if loop.index0 === 0 %}🥇{% elseif loop.index0 === 1 %}🥈{% elseif loop.index0 === 2 %}🥉{% endif %}
 53 | 				</td>
 54 | {%- endif %}
 55 | 				{%- set hasRedirect = site[newestKey].requestedUrl and site[newestKey].url != site[newestKey].requestedUrl %}
 56 | 				<td class="leaderboard-url"><a href="{{ site[newestKey].url }}">
 57 | 						<img src="https://v1.indieweb-avatar.11ty.dev/{{ site[newestKey].url | urlencode }}/" width="150" height="150" alt="IndieWeb Avatar for {{ site[newestKey].url | displayUrl }}" class="leaderboard-list-entry-thumbnail" loading="lazy" decoding="async">
 58 | 						<code class="url">{{ site[newestKey].url | displayUrl(hasRedirect) }}</code>{#
 59 | 					#}</a>
 60 | 					{%- if hasRedirect %}<span class="leaderboard-redirect-warn">Redirect from <code class="url">{{ site[newestKey].requestedUrl | displayUrl(true) }}</code></span>{% endif -%}
 61 | 					{%- if site[newestKey].error %}<span class="leaderboard-redirect-error">Error</span>{% endif -%}
 62 | 				</td>
 63 | 				<td class="leaderboard-hide-md">
 64 | 					<img src="{{ site[newestKey].url | generatorImageUrl }}" width="60" height="60" alt="Generator for {{ site[newestKey].url | displayUrl }}" class="leaderboard-list-entry-thumbnail small" loading="lazy" decoding="async">
 65 | 				</td>
 66 | 				<td class="leaderboard-hide-md">
 67 | 					<img src="{{ site[newestKey].url | hostingImageUrl }}" width="60" height="60" alt="Hosting avatar for {{ site[newestKey].url | displayUrl }}" class="leaderboard-list-entry-thumbnail small" loading="lazy" decoding="async">
 68 | 				</td>
 69 | 			{%- if site[newestKey].error %}
 70 | 				<td colspan="2"></td>
 71 | 			{%- else %}
 72 | 				{%- set counts = counts | hundoCountTotals(site[newestKey]) %}
 73 | 				<td class="leaderboard-score">{% if showRank %}<is-land on:visible><speedlify-score class="leaderboard-score-circles{% if hundos === 4 %} leaderboard-score-circles-400{% endif %}" raw-data='{{ site[newestKey] | toJSON | safe }}'></speedlify-score></is-land><span class="leaderboard-score-sum leaderboard-number">{% if hundos === 4 %}😍{% else %}{{ site[newestKey] | lighthouseTotal }}{% endif %}</span>{% endif %}{% lighthouseSparkline site %}</td>
 74 | 				<td class="leaderboard-hide-sm">{% weightSparkline site %}</td>
 75 | 				<td class="leaderboard-data-right"><a href="#details-{{ site[key].url | shortHash }}" data-expand-alias data-js-only><span class="leaderboard-expand-icon"></span> Data<span class="leaderboard-hide-md"> and Graphs</span></a></td>
 76 | 			{%- endif %}
 77 | 			</tr>
 78 | 
 79 | 			{%- if not site[newestKey].error %}
 80 | 			<tr class="leaderboard-list-entry-details">
 81 | 				<td colspan="8">
 82 | 					<details class="leaderboard-details" id="details-{{ site[key].url | shortHash }}">
 83 | 						<summary>Show Data</summary>
 84 | 						<div class="layout color--lighthouse">
 85 | 							<div class="tablewrap">
 86 | 								<table data-make-chart class="results">
 87 | 									<thead>
 88 | 										<tr>
 89 | 											<th rowspan="2" class="results-date">Date</th>
 90 | {%- if not sites[vertical].unordered %}
 91 | 											<th rowspan="2" colspan="2">Rank</th>
 92 | {%- endif %}
 93 | 											<th colspan="9">Lighthouse</th>
 94 | 											<th colspan="2" rowspan="2">Axe</th>
 95 | 										</tr>
 96 | 										<tr>
 97 | 											<th class="results-series-a" colspan="3"><abbr title="Performance">Perf</abbr></th>
 98 | 											<th class="results-series-b" colspan="2"><abbr title="Accessibility">A11Y</abbr></th>
 99 | 											<th class="results-series-c" colspan="2">Best Practices</th>
100 | 											<th class="results-series-d" colspan="2">SEO</th>
101 | 										</tr>
102 | 									</thead>
103 | 									<tbody>
104 | 									{%- for entry in site | sort | headAndLast(maxResults) %}
105 | 										<tr>
106 | 											<td><code class="date">{{ entry.timestamp | displayDate | safe }}</code></td>
107 | {%- if not sites[vertical].unordered %}
108 | 											<td class="results-bool">
109 | 												{%- if entry.ranks.cumulative %}
110 | 													{%- if entry.ranks.cumulative === 1 %}🥇{% endif %}
111 | 													{%- if entry.ranks.cumulative === 2 %}🥈{% endif %}
112 | 													{%- if entry.ranks.cumulative === 3 %}🥉{% endif %}
113 | 												{%- elseif entry.ranks.hundos %}
114 | 													{%- if entry.ranks.hundos === 1 %}🥇{% endif %}
115 | 													{%- if entry.ranks.hundos === 2 %}🥈{% endif %}
116 | 													{%- if entry.ranks.hundos === 3 %}🥉{% endif %}
117 | 												{%- endif -%}
118 | 											</td>
119 | 											<td>{% if entry.ranks.cumulative %}#{{ entry.ranks.cumulative }}{% elseif entry.ranks.hundos %}#{{ entry.ranks.hundos }} {% endif %}</td>
120 | {%- endif %}
121 | 											<td class="results-bool">{%
122 | 											if entry.lighthouse.performance >= 0.9
123 | 												%}{%
124 | 											elseif entry.lighthouse.performance >= 0.5
125 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
126 | 											else
127 | 												%}🚫{%
128 | 											endif
129 | 											%}</td>
130 | 											<td data-numeric-value="{{ (entry.lighthouse.performance * 100) | round }}">{{ (entry.lighthouse.performance * 100) | round }}</td>
131 | 											<td class="results-calc"><a href="https://googlechrome.github.io/lighthouse/scorecalc/#FCP={{ entry.firstContentfulPaint }}&SI={{ entry.speedIndex }}&LCP={{ entry.largestContentfulPaint }}&TTI={{ entry.timeToInteractive }}&TBT={{ entry.totalBlockingTime }}&CLS={{ entry.cumulativeLayoutShift }}&FCI=&FMP=&device={{ entry.lighthouse.type or "mobile" }}&version={{ entry.lighthouse.version or "6.0.0" }}" target="_blank" rel="noopener noreferrer" class="leaderboard-hide-md">Calculator</a></td>
132 | 											<td class="results-bool">{%
133 | 											if entry.lighthouse.accessibility >= 0.9
134 | 												%}{%
135 | 											elseif entry.lighthouse.accessibility >= 0.5
136 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
137 | 											else
138 | 												%}🚫{%
139 | 											endif
140 | 											%}</td>
141 | 											<td data-numeric-value="{{ (entry.lighthouse.accessibility * 100) | round }}">{{ (entry.lighthouse.accessibility * 100) | round }}</td>
142 | 											<td class="results-bool">{%
143 | 											if entry.lighthouse.bestPractices >= 0.9
144 | 												%}{%
145 | 											elseif entry.lighthouse.bestPractices >= 0.5
146 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
147 | 											else
148 | 												%}🚫{%
149 | 											endif
150 | 											%}</td>
151 | 											<td data-numeric-value="{{ (entry.lighthouse.bestPractices * 100) | round }}">{{ (entry.lighthouse.bestPractices * 100) | round }}</td>
152 | 											<td class="results-bool">{%
153 | 											if entry.lighthouse.seo >= 0.9
154 | 												%}{%
155 | 											elseif entry.lighthouse.seo >= 0.5
156 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
157 | 											else
158 | 												%}🚫{%
159 | 											endif
160 | 											%}</td>
161 | 											<td data-numeric-value="{{ (entry.lighthouse.seo * 100) | round }}">{{ (entry.lighthouse.seo * 100) | round }}</td>
162 | 											<td class="results-bool">{% if entry.axe.violations == 0 %}{% else %}🚫{% endif %}</td>
163 | 											<td>{% if entry.axe.error %}Error{% else %}{{ entry.axe.violations }}{% endif %}</td>
164 | 										</tr>
165 | 									{%- endfor %}
166 | 									</tbody>
167 | 								</table>
168 | 							</div>
169 | 							<div data-js-only class="ct-chart ct-double-octave"></div>
170 | 						</div>
171 | 
172 | 						<div class="layout color--vitals">
173 | 							<div class="tablewrap">
174 | 								<table data-make-chart class="results">
175 | 									<thead>
176 | 										<tr>
177 | 											<th rowspan="2" class="results-date">Date</th>
178 | 											<th colspan="8">Core Web Vitals</th>
179 | 											<th colspan="6">Web Vitals</th>
180 | 										</tr>
181 | 										<tr>
182 | 											<th class="results-series-a" colspan="2"><abbr title="Largest Contentful Paint">LCP</abbr></th>
183 | 											<th class="results-series-b" colspan="2">Max <span class="leaderboard-hide-sm">Potential </span><abbr title="First Input Delay">FID</abbr></th>
184 | 											<th class="results-series-c" colspan="2"><abbr title="Total Blocking Time">TBT</abbr></th>
185 | 											<th colspan="2"><abbr title="Cumulative Layout Shift">CLS</abbr></th>
186 | 
187 | 											<th class="results-series-d" colspan="2"><abbr title="First Contentful Paint">FCP</abbr></th>
188 | 											<th class="results-series-e" colspan="2"><abbr title="Speed Index">SI</abbr></th>
189 | 											<th class="results-series-f" colspan="2"><abbr title="Time to Interactive">TTI</abbr></th>
190 | 										</tr>
191 | 									</thead>
192 | 									<tbody>
193 | 									{%- for entry in site | sort | headAndLast(maxResults) %}
194 | 										<tr>
195 | 											<td><code class="date">{{ entry.timestamp | displayDate | safe }}</code></td>
196 | 											<td class="results-bool">{%
197 | 												if entry.largestContentfulPaint > lighthouseMaximums.average.lcp
198 | 													%}<span class="leaderboard-hide-sm">🚫</span>{%
199 | 												elseif entry.largestContentfulPaint > lighthouseMaximums.good.lcp
200 | 													%}<span class="leaderboard-hide-sm">⚠️</span>{%
201 | 												endif
202 | 											%}</td>
203 | 											<td data-numeric-value="{{ entry.largestContentfulPaint }}">{{ entry.largestContentfulPaint | displayTime }}</td>
204 | 											{# https://web.dev/lighthouse-max-potential-fid/#how-lighthouse-determines-your-max-potential-fid-score #}
205 | 											<td class="results-bool"></td>
206 | 											<td data-numeric-value="{{ entry.maxPotentialFirstInputDelay }}">{{ entry.maxPotentialFirstInputDelay | displayTime }}</td>
207 | 											<td class="results-bool">{%
208 | 											if entry.totalBlockingTime > lighthouseMaximums.average.tbt
209 | 												%}<span class="leaderboard-hide-sm">🚫</span>{%
210 | 											elseif entry.totalBlockingTime > lighthouseMaximums.good.tbt
211 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
212 | 											endif
213 | 											%}</td>
214 | 											<td data-numeric-value="{{ entry.totalBlockingTime }}">{{ entry.totalBlockingTime | displayTime }}</td>
215 | 											<td class="results-bool">{%
216 | 											if entry.cumulativeLayoutShift > lighthouseMaximums.average.cls
217 | 												%}<span class="leaderboard-hide-sm">🚫</span>{%
218 | 											elseif entry.cumulativeLayoutShift > lighthouseMaximums.good.cls
219 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
220 | 											endif
221 | 											%}</td>
222 | 											<td>{{ entry.cumulativeLayoutShift | showDigits(2) }}</td>
223 | 											<td class="results-bool">{%
224 | 											if entry.firstContentfulPaint > lighthouseMaximums.average.fcp
225 | 												%}<span class="leaderboard-hide-sm">🚫</span>{%
226 | 											elseif entry.firstContentfulPaint > lighthouseMaximums.good.fcp
227 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
228 | 											endif
229 | 											%}</td>
230 | 											<td data-numeric-value="{{ entry.firstContentfulPaint }}">{{ entry.firstContentfulPaint | displayTime }}</td>
231 | 											<td class="results-bool">{%
232 | 											if entry.speedIndex > lighthouseMaximums.average.si
233 | 												%}<span class="leaderboard-hide-sm">🚫</span>{%
234 | 											elseif entry.speedIndex > lighthouseMaximums.good.si
235 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
236 | 											endif
237 | 											%}</td>
238 | 											<td data-numeric-value="{{ entry.speedIndex }}">{{ entry.speedIndex | displayTime }}</td>
239 | 											<td class="results-bool">{%
240 | 											if entry.timeToInteractive > lighthouseMaximums.average.tti
241 | 												%}<span class="leaderboard-hide-sm">🚫</span>{%
242 | 											elseif entry.timeToInteractive > lighthouseMaximums.good.tti
243 | 												%}<span class="leaderboard-hide-sm">⚠️</span>{%
244 | 											endif
245 | 											%}</td>
246 | 											<td data-numeric-value="{{ entry.timeToInteractive }}">{{ entry.timeToInteractive | displayTime }}</td>
247 | 										</tr>
248 | 									{%- endfor %}
249 | 									</tbody>
250 | 								</table>
251 | 							</div>
252 | 							<div data-js-only class="ct-chart ct-double-octave"></div>
253 | 						</div>
254 | 
255 | 						<div class="layout color--weight">
256 | 							<div class="tablewrap">
257 | 								<table data-make-chart class="results">
258 | 									<thead>
259 | 										<tr>
260 | 											<th rowspan="2" class="results-date">Date</th>
261 | 											<th colspan="7">Weight</th>
262 | 										</tr>
263 | 										<tr>
264 | 											<th class="results-series-a">Total</th>
265 | 											<th class="results-series-b">HTML</th>
266 | 											<th class="results-series-c"><abbr title="Cascading Style Sheets">CSS</abbr></th>
267 | 											<th class="results-series-d"><abbr title="JavaScript">JS</abbr></th>
268 | 											<th class="results-series-e">Images</th>
269 | 											<th class="results-series-f">Fonts</th>
270 | 											<th>Third Party</th>
271 | 										</tr>
272 | 									</thead>
273 | 									<tbody>
274 | 									{%- for entry in site | sort | headAndLast(maxResults) %}
275 | 										<tr>
276 | 											<td><code class="date">{{ entry.timestamp | displayDate | safe }}</code></td>
277 | 											<td data-numeric-value="{{ entry.weight.total / 1024 }}">{{ entry.weight.total | displayFilesize | safe }}</td>
278 | 											<td data-numeric-value="{{ entry.weight.document / 1024 }}">{{ entry.weight.document | displayFilesize | safe }}</td>
279 | 											<td data-numeric-value="{{ entry.weight.stylesheet / 1024 }}">{% if entry.weight.stylesheet or entry.weight.stylesheet === 0 %}{{ entry.weight.stylesheet | displayFilesize | safe }} <span class="count leaderboard-hide-sm">×{{ entry.weight.stylesheetCount }}</span>{% else %}❓{% endif %}</td>
280 | 											<td data-numeric-value="{{ entry.weight.script / 1024 }}">{{ entry.weight.script | displayFilesize | safe }} <span class="count leaderboard-hide-sm">×{{ entry.weight.scriptCount }}</span></td>
281 | 											<td data-numeric-value="{{ entry.weight.image / 1024 }}">{{ entry.weight.image | displayFilesize | safe }} <span class="count leaderboard-hide-sm">×{{ entry.weight.imageCount }}</span></td>
282 | 											<td data-numeric-value="{{ entry.weight.font / 1024 }}">{{ entry.weight.font | displayFilesize | safe }} <span class="count leaderboard-hide-sm">×{{ entry.weight.fontCount }}</span></td>
283 | 											<td data-numeric-value="{{ entry.weight.thirdParty / 1024 }}">{{ entry.weight.thirdParty | displayFilesize | safe }} <span class="count leaderboard-hide-sm">×{{ entry.weight.thirdPartyCount }}</span></td>
284 | 										</tr>
285 | 									{%- endfor %}
286 | 									</tbody>
287 | 								</table>
288 | 							</div>
289 | 							<div data-js-only class="ct-chart ct-double-octave"></div>
290 | 						</div>
291 | 					</details>
292 | 				</td>
293 | 			</tr>
294 | 			{%- endif %}
295 | 		{%- endfor %}
296 | 		</tbody>
297 | 	</table><!-- /leaderboard -->
298 | 	<dl class="category-stats">
299 | 		<div class="category-stats-entry">
300 | 			<dt>Performance 💯</dt>
301 | 			<dd>{{ counts.performance }}<span> / {{ counts.total }}</span></dd>
302 | 		</div>
303 | 		<div class="category-stats-entry">
304 | 			<dt>Accessibility 💯</dt>
305 | 			<dd>{{ counts.accessibility }}<span> / {{ counts.total }}</span></dd>
306 | 		</div>
307 | 		<div class="category-stats-entry">
308 | 			<dt>Best Practices 💯</dt>
309 | 			<dd>{{ counts.bestPractices }}<span> / {{ counts.total }}</span></dd>
310 | 		</div>
311 | 		<div class="category-stats-entry">
312 | 			<dt>SEO 💯</dt>
313 | 			<dd>{{ counts.seo }}<span> / {{ counts.total }}</span></dd>
314 | 		</div>
315 | 		<div class="category-stats-entry">
316 | 			<dt>Perfect 4×💯</dt>
317 | 			<dd>{{ counts.perfect }}<span> / {{ counts.total }}</span></dd>
318 | 		</div>
319 | 	</dl>
320 | </div><!-- /leaderboard-wrapper -->


--------------------------------------------------------------------------------
/index.njk:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: layout.njk
 3 | ---
 4 | {% starterMessage %}
 5 | <div class="starter-message">
 6 | 	<style>
 7 | 	.starter-message {
 8 | 		background-color: hsla(0, 0%, 0%, .4);
 9 | 		border: 2px solid hsla(60, 100%, 2%, 1);
10 | 		border-radius: .5em;
11 | 		padding: 2rem;
12 | 		margin: 2rem auto;
13 | 		max-width: 40em;
14 | 	}
15 | 	.starter-message h3 {
16 | 		margin-top: 0;
17 | 	}
18 | 	.starter-message ol {
19 | 		margin: 0;
20 | 	}
21 | 	</style>
22 | 	<h3>Quick Guide to Speedlify</h3>
23 | 	<ol>
24 | 		<li>Add your own URLs to test in a <code>_data/sites/*.js</code> configuration file. Look at the existing samples (Make sure you use <code>skip: false</code>). You can delete the existing ones after you’ve made your own</li>
25 | 		<li>Remove this message from <code>index.njk</code></li>
26 | 	</ol>
27 | </div>
28 | {% endstarterMessage %}
29 | <table class="leaderboard leaderboard-list">
30 | 	<caption>Choose a category</caption>
31 | 	<thead data-sr-only>
32 | 		<tr>
33 | 			<th>Category</th>
34 | 			<th>Site Count</th>
35 | 			<th>Last Run Date</th>
36 | 		</tr>
37 | 	</thead>
38 | 	<tbody>
39 | 	{%- for key, category in sites %}
40 | 		{%- if not category.hide %}
41 | 		<tr>
42 | 			<td><a href="{{ ('/' + (category.name or key) | lower | slug + '/') | url }}">{{ category.description or category.name or key }}</a></td>
43 | 			<td><span class="count">×{{ category.urls.length }}<span class="leaderboard-hide-sm"> site{% if category.urls.length != 1 %}s{% endif %}</span></span></td>
44 | 			<td class="leaderboard-hide-sm">{% if lastruns[key].timestamp %}<span class="small"><timestamp-ago timestamp="{{ lastruns[key].timestamp }}">{{ lastruns[key].timestamp | displayDate | safe }}</timestamp-ago></span>{% endif %}</td>
45 | 		</tr>
46 | 		{%- endif %}
47 | 	{%- endfor %}
48 | 	</tbody>
49 | </table>


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 |   publish = "_site"
 3 |   command = "npm run build-production"
 4 | 
 5 | [[plugins]]
 6 | package = "./plugins/keep-data-cache"
 7 | 
 8 | [[headers]]
 9 |   for = "/api/*"
10 |     [headers.values]
11 |     Access-Control-Allow-Origin = "*"
12 | 
13 | [[redirects]]
14 |   from = "https://speedlify.netlify.app"
15 |   to = "https://www.speedlify.dev"
16 |   status = 301
17 |   force = true
18 | 
19 | [context.branch-deploy.environment]
20 |   PUPPETEER_CACHE_DIR = "/opt/build/repo/node_modules/.cache/puppeteer-bin/"
21 | 
22 | [context.deploy-preview.environment]
23 |   PUPPETEER_CACHE_DIR = "/opt/build/repo/node_modules/.cache/puppeteer-bin/"
24 | 
25 | [context.production.environment]
26 |   PUPPETEER_CACHE_DIR = "/opt/build/repo/node_modules/.cache/puppeteer-bin/"


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "speedlify",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "scripts": {
 6 |     "clean": "rm -rf _data/results/* && rm -rf .log && rm -rf _site",
 7 |     "test-pages": "node run-tests",
 8 |     "build": "npx @11ty/eleventy --quiet",
 9 |     "start": "npx @11ty/eleventy --quiet --serve",
10 |     "zip-results": "node zip-results.js",
11 |     "build-production": "npm run test-pages && npm run build && npm run zip-results"
12 |   },
13 |   "keywords": [
14 |     "performance",
15 |     "lighthouse"
16 |   ],
17 |   "author": {
18 |     "name": "Zach Leatherman",
19 |     "email": "zachleatherman@gmail.com",
20 |     "url": "https://zachleat.com/"
21 |   },
22 |   "license": "MIT",
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "git+https://github.com/zachleat/speedlify.git"
26 |   },
27 |   "bugs": {
28 |     "url": "https://github.com/zachleat/speedlify/issues"
29 |   },
30 |   "homepage": "https://github.com/zachleat/speedlify#readme",
31 |   "devDependencies": {
32 |     "@11ty/eleventy": "^3.0.0",
33 |     "@11ty/eleventy-fetch": "^5.0.2",
34 |     "byte-size": "^9.0.1",
35 |     "cross-zip": "^4.0.1",
36 |     "dotenv": "^16.4.7",
37 |     "fast-glob": "^3.3.3",
38 |     "lodash": "^4.17.21",
39 |     "performance-leaderboard": "^12.4.0",
40 |     "short-hash": "^1.0.0"
41 |   },
42 |   "dependencies": {
43 |     "chartist": "^0.11.4",
44 |     "speedlify-score": "^4.0.4"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/plugins/keep-data-cache/index.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   // Restore file/directory cached in previous builds.
 3 |   // Does not do anything if:
 4 |   //  - the file/directory already exists locally
 5 |   //  - the file/directory has not been cached yet
 6 |   async onPreBuild({ utils }) {
 7 |     await utils.cache.restore('./_data/results-last-runs.json');
 8 |     await utils.cache.restore('./_data/results');
 9 |   },
10 |   // Cache file/directory for future builds.
11 |   // Does not do anything if:
12 |   //  - the file/directory does not exist locally
13 |   async onPostBuild({ utils }) {
14 |     await utils.cache.save('./_data/results-last-runs.json');
15 |     await utils.cache.save('./_data/results');
16 |   }
17 | };


--------------------------------------------------------------------------------
/plugins/keep-data-cache/manifest.yml:
--------------------------------------------------------------------------------
1 | name: keep-data-cache


--------------------------------------------------------------------------------
/run-tests.js:
--------------------------------------------------------------------------------
  1 | require("dotenv").config();
  2 | const fs = require("fs").promises;
  3 | const shortHash = require("short-hash");
  4 | const fastglob = require("fast-glob");
  5 | const PerfLeaderboard = require("performance-leaderboard");
  6 | 
  7 | const NUMBER_OF_RUNS = 3;
  8 | const FREQUENCY = 60; // in minutes
  9 | const NETLIFY_MAX_LIMIT = 15; // in minutes, netlify limit
 10 | const ESTIMATED_MAX_TIME_PER_TEST = 0.75; // in minutes, estimate based on looking at past builds
 11 | 
 12 | const prettyTime = (seconds) => {
 13 | 	// Based on https://johnresig.com/blog/javascript-pretty-date/
 14 | 	const days = Math.floor(seconds / (60*60*24));
 15 | 
 16 | 	return (
 17 | 		(days === 0 &&
 18 | 			((seconds < 60 && "just now") ||
 19 | 				(seconds < 60 * 2 && "1 minute ago") ||
 20 | 				(seconds < 3600 && Math.floor(seconds / 60) + " minutes ago") ||
 21 | 				(seconds < 7200 && "1 hour ago") ||
 22 | 				(seconds < 86400 * 2 && Math.floor(seconds / 3600) + " hours ago"))) ||
 23 | 		(days < 7 && days + " days ago") ||
 24 | 		(Math.ceil(days / 7) + " weeks ago")
 25 | 	);
 26 | }
 27 | 
 28 | async function tryToPreventNetlifyBuildTimeout(dateTestsStarted, numberOfUrls, estimatedTimePerBuild = ESTIMATED_MAX_TIME_PER_TEST) {
 29 | 	let minutesRemaining = NETLIFY_MAX_LIMIT - (Date.now() - dateTestsStarted)/(1000*60);
 30 | 	if(process.env.CONTEXT &&
 31 | 		process.env.CONTEXT === "production" &&
 32 | 		NETLIFY_MAX_LIMIT &&
 33 | 		minutesRemaining < numberOfUrls * estimatedTimePerBuild) {
 34 | 		console.log( `run-tests has about ${minutesRemaining} minutes left, but the next run has ${numberOfUrls} urls. Saving it for the next build.` );
 35 | 		return true;
 36 | 	}
 37 | 	return false;
 38 | }
 39 | 
 40 | (async function() {
 41 | 	// Netlify specific check (works fine without this env variable too)
 42 | 	if(process.env.CONTEXT && process.env.CONTEXT !== "production") {
 43 | 		console.log( "Skipping all test runs because we’re in a Netlify build or deploy preview!" );
 44 | 		return;
 45 | 	}
 46 | 
 47 | 	let dateTestsStarted = Date.now();
 48 | 	let dataDir = `./_data/`;
 49 | 	// Careful here, this filename needs to be .gitignore’d and
 50 | 	// listed in the keep-data-cache plugin.
 51 | 	let lastRunsFilename = `${dataDir}results-last-runs.json`;
 52 | 	let lastRuns;
 53 | 	try {
 54 | 		lastRuns = require(lastRunsFilename);
 55 | 		console.log( "Last runs at start: ", JSON.stringify(lastRuns) );
 56 | 	} catch (e) {
 57 | 		console.log(`There are no known last run timestamps`);
 58 | 		lastRuns = {};
 59 | 	}
 60 | 
 61 | 	let verticals = await fastglob("./_data/sites/*.js", {
 62 | 		caseSensitiveMatch: false
 63 | 	});
 64 | 
 65 | 	for(let file of verticals) {
 66 | 		let group = require(file);
 67 | 		if(typeof group === "function") {
 68 | 			group = await group();
 69 | 		}
 70 | 		let key = file.split("/").pop().replace(/\.js$/, "");
 71 | 
 72 | 		if(group.skip) {
 73 | 			console.log( `Skipping ${key} (you told me to in your site config)` );
 74 | 			continue;
 75 | 		}
 76 | 
 77 | 		// TODO maybe skip this step if it’s the first build?
 78 | 		if(await tryToPreventNetlifyBuildTimeout(dateTestsStarted, group.urls.length, group.estimatedTimePerBuild)) {
 79 | 			// stop everything, we’re too close to the timeout
 80 | 			return;
 81 | 		}
 82 | 
 83 | 		let runFrequency =
 84 | 			group.options && group.options.frequency
 85 | 				? group.options.frequency
 86 | 				: FREQUENCY;
 87 | 
 88 | 		if (!lastRuns[key]) {
 89 | 			console.log(`First tests for ${key}.`);
 90 | 		} else {
 91 | 			const lastRun = lastRuns[key];
 92 | 			const lastRunSecondsAgo = (dateTestsStarted - lastRun.timestamp) / 1000;
 93 | 			const lastRunSecondsAgoPretty = prettyTime(lastRunSecondsAgo);
 94 | 			const lastRunMinutesAgo = lastRunSecondsAgo / 60;
 95 | 			if (lastRunMinutesAgo < runFrequency) {
 96 | 				console.log(
 97 | 					`Previous test for ${key} ran ${lastRunSecondsAgoPretty}, less than ${runFrequency} minutes, skipping.`
 98 | 				);
 99 | 				continue;
100 | 			} else {
101 | 				console.log(`Previous test for ${key} ran ${lastRunSecondsAgoPretty}, more than ${runFrequency} minutes, running.`);
102 | 
103 | 			}
104 | 		}
105 | 
106 | 		let runCount =
107 | 			group.options && group.options.runs ? group.options.runs : NUMBER_OF_RUNS;
108 | 		let options = Object.assign({
109 | 			chromeFlags: ['--headless', '--disable-dev-shm-usage']
110 | 		}, group.options);
111 | 
112 | 		let results = await PerfLeaderboard(
113 | 			group.urls,
114 | 			runCount,
115 | 			options,
116 | 		);
117 | 
118 | 		let promises = [];
119 | 		for(let result of results) {
120 | 			let id = shortHash(result.url);
121 | 			let isIsolated = group.options && group.options.isolated;
122 | 			let dir = `${dataDir}results/${isIsolated ? `${key}/` : ""}${id}/`;
123 | 
124 | 			let filename = `${dir}date-${dateTestsStarted}.json`;
125 | 			await fs.mkdir(dir, { recursive: true });
126 | 			promises.push(fs.writeFile(filename, JSON.stringify(result, null, 2)));
127 | 			console.log( `Writing ${filename}.` );
128 | 		}
129 | 
130 | 		await Promise.all(promises);
131 | 		lastRuns[key] = { timestamp: Date.now() };
132 | 		console.log( `Finished testing "${key}".` );
133 | 
134 | 		// Write the last run time to avoid re-runs
135 | 		await fs.writeFile(lastRunsFilename, JSON.stringify(lastRuns, null, 2));
136 | 		console.log( `Last runs after "${key}":`, JSON.stringify(lastRuns) );
137 | 	}
138 | })();
139 | 


--------------------------------------------------------------------------------
/utils/calc.js:
--------------------------------------------------------------------------------
 1 | module.exports = (sites, type, key, greaterThanOrEqualTo = 1) => {
 2 | 	let sum = 0;
 3 | 	let values = [];
 4 | 	let keys;
 5 | 	if(Array.isArray(key)) {
 6 | 		keys = key;
 7 | 	} else {
 8 | 		keys = [key];
 9 | 	}
10 | 	let count = 0;
11 | 	for(let site of sites) {
12 | 		let test = true;
13 | 		for(let key of keys) {
14 | 			if(isNaN(site[key]) || site[key] < greaterThanOrEqualTo) {
15 | 				test = false;
16 | 			}
17 | 		}
18 | 		if(test) {
19 | 			count++;
20 | 		}
21 | 		if(typeof site[key] === "number") {
22 | 			sum += site[key];
23 | 			values.push(site[key]);
24 | 		}
25 | 	}
26 | 	if(type === "count") {
27 | 		return count;
28 | 	}
29 | 	if(type === "mean") {
30 | 		return sum / values.length;
31 | 	}
32 | 	if(type === "median") {
33 | 		if(values.length > 0) {
34 | 			return values.sort((a, b) => b - a)[Math.floor(values.length / 2)];
35 | 		}
36 | 	}
37 | };


--------------------------------------------------------------------------------
/utils/getObjectKey.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(obj, which = ":first") {
 2 | 	if(which === ":first") {
 3 | 		for(let key in obj) {
 4 | 			return key;
 5 | 		}
 6 | 	}
 7 | 
 8 | 	let arr = [];
 9 | 	for(let key in obj) {
10 | 		arr.push({
11 | 			timestamp: obj[key].timestamp,
12 | 			key: key
13 | 		});
14 | 	}
15 | 
16 | 	// lower is better
17 | 	arr.sort((a, b) => a.timestamp - b.timestamp);
18 | 
19 | 	if(arr.length && which === ":newest") {
20 | 		return arr[arr.length - 1].key;
21 | 	} else if(arr.length > 1 && which === ":secondnewest") {
22 | 		return arr[arr.length - 2].key;
23 | 	}
24 | }


--------------------------------------------------------------------------------
/utils/sparkline.js:
--------------------------------------------------------------------------------
  1 | function uuid() {
  2 | 	return Math.round(Math.random() * 10e9).toString(36);
  3 | }
  4 | 
  5 | /**
  6 |  * Convert a timestamp in milliseconds to a month & date string, e.g. `Mar 31`.
  7 |  * @param {number} timestamp Millisecond UNIX epoch timestamp
  8 |  * @returns {string}
  9 |  */
 10 | function msToDate(timestamp) {
 11 | 	const date = new Date(timestamp);
 12 | 	return date.toLocaleDateString(['en-US'], { day: 'numeric', month: 'short' });
 13 | }
 14 | 
 15 | /**
 16 |  * Convert a timestamp in milliseconds to an ISO format date string.
 17 |  * @param {number} timestamp Millisecond UNIX epoch timestamp
 18 |  * @returns {string}
 19 |  */
 20 | function msToISO(timestamp) {
 21 | 	const date = new Date(timestamp);
 22 | 	return date.toISOString();
 23 | }
 24 | 
 25 | /**
 26 |  * Round a number to an arbitrary precision.
 27 |  * @param {number} n Number to round
 28 |  * @param {number} decimals Number of decimals to round to
 29 |  * @returns {number} Rounded number
 30 |  */
 31 | function round(n, decimals = 1) {
 32 | 	const power = 10 ** decimals;
 33 | 	return Math.round(n * power) / power;
 34 | }
 35 | 
 36 | /**
 37 |  * Get the `d` attribute for an SVG path representing a sparkline.
 38 |  * @param {number[]} data
 39 |  * @param {number} w
 40 |  * @param {number} h
 41 |  * @param {number} maxY
 42 |  * @returns {string}
 43 |  */
 44 | function getD(data, w, h, maxY) {
 45 | 	/** @type {string[]} */
 46 | 	let l = [];
 47 | 	const maxX = data.length - 1;
 48 | 	for (let i = 0; i <= maxX; i++) {
 49 | 		l.push(round((i / maxX) * w) + ',' + round(h - (data[i] / maxY) * h));
 50 | 	}
 51 | 	return `M ${l.join(' L ')}`;
 52 | }
 53 | 
 54 | /**
 55 |  * Get an SVG `<linearGradient>` definition.
 56 |  * @param {{ color: string; offset: `${number}%`}[]} gradient - Color stops
 57 |  * @param {string} id - Random ID used to associate gradient with stroke/fill.
 58 |  * @returns {string}
 59 |  */
 60 | function getLinearGradient(gradient, id) {
 61 | 	const stops = gradient
 62 | 		.map((s) => `<stop stop-color="${s.color}" offset="${s.offset}" />`)
 63 | 		.join('');
 64 | 
 65 | 	return (
 66 | 		`<linearGradient id="${id}" x1="0" x2="0" y1="100%" y2="0" gradientUnits="userSpaceOnUse">` +
 67 | 		stops +
 68 | 		`</linearGradient>`
 69 | 	);
 70 | }
 71 | 
 72 | /**
 73 |  * @typedef {Object} SparklineOptions
 74 |  * @property {number[]} values - Array of values along the y axis to draw.
 75 |  * @property {number} [min] - Minimum value on the y axis (defaults to smallest value in `values`).
 76 |  * @property {number} [max] - Maximum value on the y axis (defaults to largest value in `values`).
 77 |  * @property {string} [color] - Color to draw the sparkline with (defaults to white). Overridden if `gradient` is set.
 78 |  * @property {{ color: string; offset: `${number}%` }[]} [gradient] - Gradient definition to draw the sparkline with.
 79 |  * @property {(val: number) => string | number} [formatAxis] - Formatter for y-axis legend.
 80 |  * @property {{ timestamp: number }[]} [timeSeries] - Sorted array of `performance-leaderboard` runs to extract timestamps from.
 81 |  */
 82 | 
 83 | /**
 84 |  * Generate HTML for a sparkline.
 85 |  * @param {SparklineOptions} opts
 86 |  * @return {string}
 87 |  */
 88 | function Sparkline({
 89 | 	values,
 90 | 	min = Math.min(...values),
 91 | 	max = Math.max(...values),
 92 | 	color = '#ffffff',
 93 | 	gradient,
 94 | 	formatAxis = (val) => val,
 95 | 	timeSeries,
 96 | }) {
 97 | 	// If we only have one data point, duplicate it to draw a straight line.
 98 | 	if (values.length === 1) values.push(...values);
 99 | 
100 | 	const minVal = Math.min(...values);
101 | 	const maxVal = Math.max(...values);
102 | 	const caption = `Sparkline ranging between ${formatAxis(minVal)} and ${formatAxis(maxVal)}.`;
103 | 
104 | 	const data = values.map((val) => Math.max(0, Math.round(val) - min));
105 | 	const maxY = Math.max(...data, max - min);
106 | 	const [width, height] = [70, 40];
107 | 
108 | 	const startTime = timeSeries?.at(0)?.timestamp;
109 | 	const endTime = timeSeries?.at(-1)?.timestamp;
110 | 
111 | 	const d = getD(data, width, height, maxY);
112 | 	const id = uuid();
113 | 
114 | 	return `<div class="sparkline">
115 | 	<div class="y-axis" aria-hidden="true">
116 | 		<div>${formatAxis(min)}</div>
117 | 		<div>${formatAxis(max)}</div>
118 | 	</div>
119 | 	<svg
120 | 		xmlns="http://www.w3.org/2000/svg"
121 | 		preserveAspectRatio="none"
122 | 		viewBox="0 0 ${width} ${height}"
123 | 	>
124 | 		<title>${caption}</title>
125 | 		<path
126 | 			fill="transparent"
127 | 			stroke="${gradient ? `url(#${id})` : color}" d="${d}"
128 | 		/>
129 | 		${gradient ? getLinearGradient(gradient, id) : ''}
130 | 	</svg>
131 | 	${
132 | 		startTime && endTime
133 | 			? `
134 | 	<div class="x-axis">
135 | 		<time datetime="${msToISO(startTime)}">${msToDate(startTime)}</time>
136 | 		<time datetime="${msToISO(startTime)}">${msToDate(endTime)}</time>
137 | 	</div>`
138 | 			: ''
139 | 	}
140 | </div>`;
141 | }
142 | 
143 | module.exports = Sparkline;
144 | 


--------------------------------------------------------------------------------
/zip-results.js:
--------------------------------------------------------------------------------
1 | const zip = require("cross-zip");
2 | const path = require("path");
3 | 
4 | let inPath = path.join(__dirname, "_data", "results");
5 | let outPath = path.join(__dirname, "_site", "results.zip");
6 | 
7 | zip.zipSync(inPath, outPath);


--------------------------------------------------------------------------------