Shopify iframe dimensions and Cumulative Layout Shift

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

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

On jQuery, 97% of sites use unsized iframe dimension sizing, and 80% of jQuery sites have a good CLS, against 86% of all sites. On Vue, 98% of sites use unsized, and 80% of Vue sites have a good CLS.

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%86%

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

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

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

Does the framework explain the iframe dimension sizing difference?

On jQuery, 82% of sites with explicitly sized iframe dimension sizing have a good CLS, against 80% of jQuery sites with unsized. Within jQuery, sites with explicitly sized and unsized have a good CLS about equally often. On Vue, 85% of sites with explicitly sized iframe dimension sizing have a good CLS, against 80% of Vue sites with unsized. Within Vue, sites with explicitly sized and unsized 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 (85% good CLS) and 97.7% include unsized iframes (85% good CLS, largely hidden utility sandboxes).