Storybook Addon Web Vitals
Storybook Addon Web Vitals can be used for instant feedback on loading, interactivity, and layout shift metric for each story. We use the web-vitals.
We report on INP, CLS, and LCP.
Getting Started
Requires Storybook 8
First, install the addon
npm i -D @washingtonpost/storybook-addon-web-vitals
Then, add following content to .storybook/main.js
:
module.exports = {
addons: ["@washingtonpost/storybook-addon-web-vitals"],
};
Usage
See toolbar for feedback on INP, CLS and LCP
CLS changes will highlight offending elements based on results from web-vitals
New results are logged to the console as they come in to provide the full data object from web-vitals
Made by
- luke.connors
- wrneff
- mcdoh
- floresa
- lavanderoi
- taliatrackim
Work with
Angular
Ember
HTML
Marko
Mithril
Preact
Rax
React
Riot
Svelte
Vue
Web Components
Tags