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 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
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
- Ignore HTTPS errors. Allowing people to use the CLI tool with their own self-signed certificates.
- 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.
- All the changes.
- If there is a lot of vertical movement on a page it can be difficult to discern which elements have shifted.
Send me an email via firstname.lastname@example.org 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