This tool aims to reduce cumulative layout shift (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 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. It aims to improve Core Web Vitals (CWV) and thus enhance 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.