Generates a .gif showing the layout shift events for a website.
npm install layout-shift-gif--report flag.
npm install -g layout-shift-gif
`
$3
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.
$3
`
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"]
-r, --report Save report of shifts and elements [boolean] [default: false]
`
Examples
$3
#### Simulated Mobile Device
`
layout-shift-gif --url https://blacklivesmatter.com/ --device mobile
`
#### Simulated Desktop Device
`
layout-shift-gif --url https://blacklivesmatter.com/ --device desktop
`
$3
#### 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.
Save JSON Report š
The tool is able to create a corresponding JSON report including the full CSS selectors for every element triggering a shift.
`
layout-shift-gif --url https://blacklivesmatter.com/ --report
`
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.
$3
The screenshot of the page is taken after all the page elements have shifted and the CLS has been calculated.
$3
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.
$3
The border colour of an outlined element represents the CLS score of that element against the overall page thresholds for CLS outlined by Google.
š¢ 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.
$3
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.
$3
The colour of the top left corner represents where the pages overall CLS score fits within the thresholds for CLS outlined by Google.
š¢ Good ā¤ 0.1
š Needs Improvement
š“ Poor >` 0.25