Embeds and Iframes often contribute to the Layout Shift, which can be distracting to users and degrades the page experience. This plugin is a POC to eliminate Layout Shifts from WordPress block editor embeds.
Currently, a setting is provided in the block embed settings, which can help users measure embed dimensions beforehand and add them to block attributes. Later these block attributes can be used to add required dimensions to the embeds and iframes before the page is served to the end user.
When the user clicks on the setting button named Terminate Layout Shift, the current block content is rendered into an iframe until it's loaded, and then its respective height and width are measured. This process takes place several times on different viewports to ensure that dimensions are calculated for each device viewport.
- Currently, terminating the Layout Shift is a manual process, which has to be done for each embed. We are exploring different approaches to make it fully automatic.
- Provide user settings to select viewports for which dimensions should be measured.