Layout Shift GIF Generator

layout-shift-gif.js - Visualise the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.

Easily identify problematic layout shifts in the viewport on mobile and desktop. Available as a simple command line tool, or as an online tool.

Try the Layout Shift GIF Tool

Simply enter an URL and hit generate!

Note: This might take a few minutes depending on current usage. If you can't wait why not try the command line tool.

.

About

Not only is layout shift annoying and a bad user experience, it's now part of Google's Core Web Vitals which will become a ranking factor for Google Search in 2021.

Lighthouse is a great tool for identifying your Cumulative Layout Shift (CLS) score, but it's not so great for quickly visualising what's actually changing on a page. The Layout Shift GIF Generator allows you to quickly see which elements are moving around in the viewport and return your CLS metric.

Device Information

The tool is able to check both a desktop and a mobile viewport.

- The desktop viewport is a standard 1920x1080 resolution.

- The mobile viewport is the Nexus 5X profile from Lighthouse.

Both the CPU and the network are throttled simulating a good 3G network.

Usage

Command Line Tool

The command line tool can be installed directly from NPM.

npm install -g layout-shift-gif

Once installed the tool can be used as per the following example.

layout-shift-gif --url https://blacklivesmatter.com/ --device mobile --output layout-shift.gif

Support

If my fun web experiments brighten your day, my tools save your bacon, or you simply want to say thanks for the work that goes into SEOslides.page, consider supporting me on Ko-fi by buying me a coffee.

Even a small amount will go a long way to covering the costs of running and maintaining my projects.

Buy Me A Coffee

Changelog

1.2.0

Now uses the updated maximum session window metric for CLS.

1.1.5

Updated to Chromium 90

1.1.4

Updated the boundaries to be inline with the Feb 17th changes to CWV.

1.1.3

- Ignore HTTPS errors. Allowing people to use the CLI tool with their own self-signed certificates.

1.1.0

- A cookie file can now be attached (in the Puppeteer JSON format). This is useful if you need to disable a deliberate pop-up such as a GDPR warning.

- The device viewport width and/or height can be overridden if you wish to generate a gif of different device sizes, or entire pages.

- Now available on NPM.

1.0.0

- All the changes.

Known Issues

- If there is a lot of vertical movement on a page it can be difficult to discern which elements have shifted.

Contact

Send me an email via hello@defaced.dev or you can find me on Twitter at @defaced.

Follow @defaced

For more tools and fun projects checkout the defaced.dev homepage.

back to defaced.dev