Skip to content

Instantly share code, notes, and snippets.


Addy Osmani addyosmani

View GitHub Profile
View custom-metrics.js
const po = new PerformanceObserver(() => {});
po.observe({type: 'largest-contentful-paint', buffered: true});
const lastEntry = po.takeRecords().slice(-1)[0];
return lastEntry.renderTime || lastEntry.loadTime;
const po = new PerformanceObserver(() => {});
po.observe({type: 'layout-shift', buffered: true});
return po.takeRecords().reduce((val, entry) => val + entry.value, 0);
addyosmani / lcp.js
Last active Aug 5, 2020
Largest Contentful Paint - Puppeteer
View lcp.js
const puppeteer = require('puppeteer');
const devices = require('puppeteer/DeviceDescriptors');
const Good3G = {
'offline': false,
'downloadThroughput': 1.5 * 1024 * 1024 / 8,
'uploadThroughput': 750 * 1024 / 8,
'latency': 40
addyosmani /
Created Mar 13, 2020
Generate markdown notes for github releases

git log --pretty=format:"* %s" v0.0.8..v0.1.0 >

addyosmani / lazyload.html
Last active Sep 14, 2020
Native image lazy-loading with a cross-browser fallback
View lazyload.html
<img data-src="unicorn.jpg" loading="lazy" alt=".." class="lazyload"/>
// Select all images with the class "lazyload"
const images = document.querySelectorAll("img.lazyload");
// Check if the browser supports the "loading" attribute
if ('loading' in HTMLImageElement.prototype) {
// If so, we'll update all <img src> to point to the data-src instead
images.forEach(img => {
img.src = img.dataset.src;
addyosmani /
Last active Jul 5, 2019
this.performance links
addyosmani /
Created Sep 9, 2018
Put your Webpack bundle on a diet (multi-part series)
addyosmani / functional-utils.js
Created Jan 7, 2018 — forked from bendc/functional-utils.js
A set of pure ES2015 functions aimed to make functional JavaScript more idiomatic.
View functional-utils.js
// Examples at
// array utils
// =================================================================================================
const combine = (...arrays) => [].concat(...arrays);
const compact = arr => arr.filter(Boolean);

Working with a React codebase and want to use Preact? Ideally, you should use preact and preact-compat for your dev, prod and test builds. This will enable you to discover any interop bugs early on. If you would prefer to only alias preact and preact-compat in Webpack for production builds (e.g if your preference is using React DevTools and enzyme), make sure to thoroughly test everything works as expected before deploying to your servers.

addyosmani /
Last active Sep 14, 2020
Workbox recipes

Workbox runtime caching recipes

Your Service Worker script will need to import in Workbox and initialize it before calling any of the routes documented in this write-up, similar to the below:

const workbox = new WorkboxSW();

// Placeholder array populated automatically by workboxBuild.injectManifest()
addyosmani /
Last active Sep 25, 2019
Image Decoding in Blink

Image Decoding in Blink / Chrome (true as of M62)

Blink decodes off the main thread for image elements and for CSS styles (an image as an element's background style, for example). Moving the decode to the compositor thread (or the compositor worker thread pool?) does free-up the main thread to work on other tasks. We call this deferred decoding. With deferred decoding, the decode work remains on the critical path for presenting a frame to the display, so it can still cause animation jank.

The HTMLImageElement.decode() API should help with the jank problem. Also deferred decoding does not work with SVG image resources. There are still cases where decoding images happens synchronously on the main thread: 2D canvas drawImage() and createPattern(), and WebGL texture uploads.

You can’t perform that action at this time.