Shopify iframe dimensions and Cumulative Layout Shift

Sites with unsized iframe dimension sizing have a good CLS most often: 93%, against 94% of all Shopify sites. Sites with explicitly sized iframe dimensions have it least often, at 90%.

Unsized is the most used: 97.7% of Shopify sites.

Vue sets the iframe dimension sizing to unsized on 98% of its sites, and 90% of Vue sites have a good CLS, against 94% of all sites.

FrameworkIframe dimension sizing on its sitesGood CLS

Shopify sites with iframe dimension sizing 6,485 sitesUnsized iframe (no width/height) 98%Explicit width & height attributes 16%94%

jQuery 2,638 sitesUnsized iframe (no width/height) 97%Explicit width & height attributes 20%91%

Vue 753 sitesUnsized iframe (no width/height) 98%Explicit width & height attributes 17%90%

Unsized iframe (no width/height) Explicit width & height attributes

Does the framework explain the iframe dimension sizing difference?

On jQuery, 90% of sites with unsized iframe dimension sizing have a good CLS, against 88% of jQuery sites with explicitly sized. Within jQuery, sites with unsized and explicitly sized have a good CLS about equally often. On Vue, 89% of sites with unsized iframe dimension sizing have a good CLS, against 88% of Vue sites with explicitly sized. Within Vue, sites with unsized and explicitly sized have a good CLS about equally often.

Why visible iframes cannot infer an aspect ratio without attributes

Unlike images, an <iframe> has no intrinsic dimensions in its network header; without explicit width and height attributes or a sized container, the browser defaults the frame to 300x150 pixels until scripts resize it. Across iframe-using sites, 16.0% size their embeds explicitly (90% good CLS) and 97.7% include unsized iframes (93% good CLS, largely hidden utility sandboxes).