Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View gmetais's full-sized avatar

Gaël Métais gmetais

View GitHub Profile
FROM ubuntu:18.04
LABEL author="support@speedcurve.com"
# Default versions for Chrome Stable and Lighthouse
#
# Can be overidden at build time e.g. docker build --build-arg LIGHTHOUSE_VERSION=8.5.1
#
# Stable Chrome versions https://www.ubuntuupdates.org/package/google_chrome/stable/main/base/google-chrome-stable
#
@gmetais
gmetais / inp.js
Last active August 2, 2022 13:46
INP (Interaction to Next Paint) debugging in Chrome's console
// 1. Open Chrome's console
// 2. Activate the option "Preserve log"
// 3. Copy-paste this script
// 4. Interact with the page (clicks, keyhits...)
// 5. Refresh the page or switch tab twice, the console will then log the INP culprits > 40ms.
var s=document.createElement('script');s.src='//unpkg.com/web-vitals@next/dist/web-vitals.iife.js';s.onload=()=>{webVitals.onINP(console.log)};document.head.appendChild(s)
@gmetais
gmetais / gist:9dc573c607447bb57189920a1635173a
Last active June 13, 2022 22:58
A very simple an rough script that lists fonts that are loaded on a page and enumerates all elements that actually use each one. Helps discover if some fonts are loaded but barely used, so that you can skip them.
/* Simply copy and paste in the browser's console */
function weightToNumber(str) {
if (str === 'normal') {
return 400;
}
if (str === 'bold') {
return 700;
}
return parseInt(str, 10);
@gmetais
gmetais / gzip-conf.txt
Last active February 28, 2021 14:06
This is a list of Content-Type / mime-type for a server Gzip/Brotli compression configuration
This list was moved to https://letstalkaboutwebperf.com/en/gzip-brotli-server-config/
@gmetais
gmetais / findMultipleCssProperties.js
Last active May 7, 2016 13:42
Look up the DOM to find elements that have multiple CSS properties
/**
* Copy this function in the browser console then start using.
*
* Example:
*
* findMultipleCssProperties([['font-family', 'Roboto'], ['font-weight', 'normal', true], ['font-style', 'italic', true]])
* --> the last parameter (true) means the value should be found exactly, otherwise any string that contains the value is marked as ok
*
*/
if (window.addEventListener) {
window.addEventListener("load", AIALoadEvent);
} else {
window.attachEvent("onload", AIALoadEvent);
}
function AIALoadEvent() {
if (self == top) {
setTimeout(AIADisplayADV, 2000);
}
@gmetais
gmetais / findCssProperty.js
Last active August 29, 2015 14:15
Find a CSS property in the page
/**
* Copy this function in the browser console then start using.
*
* Examples:
*
* findCssProperty('background-image')
* --> log into the console all the background-images used
*
* findCssProperty('font-family', 'Roboto')
* --> log into the console all elements that have a background that contains the string "Roboto"