npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

layout-shift-gif

v1.3.2

Published

Generates a .gif showing the layout shift events for a website.

Downloads

314

Readme

Layout Shift GIF Generator - CLI

https://defaced.dev/tools/layout-shift-gif-generator/

Visualise the Core Web Vitals metric Cumulative Layout Shift (CLS) with a simple GIF.

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

Support this project Help support the work that goes into creating and maintaining my projects and buy me a coffee via Ko-fi or sponsor me on GitHub Sponsors.

Getting Started

Installation

The Layout Shift GIF Generator command line tool can be installed directly from NPM.

npm install -g layout-shift-gif

Usage

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

This will generate an animated layout-shift.gif of https://blacklivesmatter.com/ showing the regions of Cumulative Layout Shift on the viewport of a simulated mobile device.

Options

Usage: layout-shift-gif --url <url>

Options:
      --help     Show help                                             [boolean]
      --version  Show version number                                   [boolean]
  -u, --url      Website URL                                 [string] [required]
  -d, --device   Device type                        [string] [default: "mobile"]
  -w, --width    Device viewport width                                  [number]
  -h, --height   Device viewport height                                 [number]
  -c, --cookies  Cookie filename                                        [string]
  -o, --output   Output filename          [string] [default: "layout-shift.gif"]
  -t, --type     CLS calculation method                [string] [default: "new"]

Examples:
  layout-shift-gif --url https://blacklivesmatter.com/ --device mobile --outpu
  t layout-shift.gif

Examples

Basic Examples

Simulated Mobile Device

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

Simulated Desktop Device

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

Advanced Examples

Supplying Cookies

You can supply a cookie file in the Puppeteer JSON format allowing you to bypass cookie notices, or interstitals.

I recommend using the Export cookie JSON file for Puppeteer Chrome extension to export your cookies in the correct format.

layout-shift-gif --url https://blacklivesmatter.com/ --cookies cookies.json

Original CLS Calculation Method

In June 2021 Google changed how they calculate the CLS metric. Layout Shift GIF Generator defaults to the newest method, but if you require the old method it can still be access viable the --type option.

layout-shift-gif --url https://blacklivesmatter.com/ --type old

Device Simulation

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 to simulate a good 3G network.

Hosted Version

If you don't wish to use the CLI version there is also a free hosted version running in a cloud function available on defaced.dev

Output

An outline of how to interpret the GIF output from this tool.

Page Screenshot

The screenshot of the page is taken after all the page elements have shifted and the CLS has been calculated.

Border Style

The border style of an outlined element represents the start and end positions of the elements shift.

  • A dashed border indicates the element's starting position.

  • A solid border indicates the element's end position.

Border Colour

The border colour of an outlined element represents the CLS score of that element against the overall page thresholds for CLS outlined by Google.

Defining the Core Web Vitals metrics thresholds

🟢 Good 0.1

🟠 Needs Improvement

🔴 Poor > 0.25

This means that if you see a shifting element with a red or orange outline then this element alone is contributing significantly to a negative CLS score for that page.

Corner Metric

The metric in the top left corner is the overall CLS score for that page and is the score you'll see in Lighthouse or Pagespeed Insights.

Corner Colour

The colour of the top left corner represents where the pages overall CLS score fits within the thresholds for CLS outlined by Google.

Defining the Core Web Vitals metrics thresholds

🟢 Good 0.1

🟠 Needs Improvement

🔴 Poor > 0.25

Sponsors

If you find this project useful please considering sponsoring me on GitHub Sponsors and help support the work that goes into creating and maintaining my projects.

Bonus

Sponsors are able to remove the project support message from all my projects, as well as access other additional perks.

Author

Chris Johnson - defaced.dev - @defaced