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.
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.
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.
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
- All the changes.
- If there is a lot of vertical movement on a page it can be difficult to discern which elements have shifted.
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
Send me an email via email@example.com 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