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 GitHub using NPM.

npm install -g workeffortwaste/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

Changelog

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.

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.

Support me on Ko-fi

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