Layout Shift Terminator

The following tool allows you to enter arbitrary markup which causes layout shifts (e.g. social embed) in order load the markup at various viewport sizes to be able to measure the dimensions at each. With this information it then provides optimized markup with container queries to reduce the amount of cumulative layout shift (CLS) when the markup is rendered on a loading page. This improves Core Web Vitals (CWV) and thus enhance page experience. Learn more.

Demos:


@westonruter