https://github.com/GoogleChromeLabs/layout-shift-terminator

https://github.com/GoogleChromeLabs/layout-shift-terminator

cls cwv px

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/GoogleChromeLabs/layout-shift-terminator
• Owner: GoogleChromeLabs
• License: apache-2.0
• Created: 2021-08-22T19:02:32.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-04-04T23:19:12.000Z (over 1 year ago)
• Last Synced: 2024-04-09T21:56:36.814Z (7 months ago)
• Topics: cls, cwv, px
• Language: HTML
• Homepage: https://googlechromelabs.github.io/layout-shift-terminator/
• Size: 197 KB
• Stars: 35
• Watchers: 4
• Forks: 4
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Layout Shift Terminator

This tool aims to reduce [cumulative layout shift (CLS)](https://web.dev/cls/) for markup that lacks intrinsic sizing (and thus has visual instability). This issue is most often seen with social media embeds. In contrast with an image, iframe, or video which can (and should) be added with `width` and `height` attributes that correspond to the actual width and height of the content, this is often impossible for social media embeds with textual content that will have a variable height, especially considering the various screen sizes of the devices viewing the content.

Given a series of viewport dimensions for popular device form factors (e.g. mobile, tablet, desktop), this tool loads the markup into an `iframe` sized for each viewport. It waits for the page to load and then measures the size of the rendered markup for each viewport. Once these viewport-specific markup measurements are obtained, it then generates CSS [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) with the appropriate `min-height` for each viewport width. The original markup is wrapped with a `div` which includes this CSS as an inline `style` along with a `script` that will remove the `style` after a 4-second delay. This 4-second delay is intended to give the markup time to load before removing the `min-height` styles, which would not be needed anymore once the embed is loaded. 

In short, this tool seeks to automate the process outlined for Embeds and iframes in [Optimize Cumulative Layout Shift](https://web.dev/optimize-cls/). It aims to improve [Core Web Vitals (CWV)](https://web.dev/vitals/) and thus enhance [page experience](https://developers.google.com/search/docs/appearance/page-experience).

In the end, a page which optimizes layout-unstable markup using this tool should have much less cumulative layout shift. This will make the page more likely to have a good [page experience](https://developers.google.com/search/docs/advanced/experience/page-experience).