layoutstable

Layoutstable is a design principle and practice aimed at preserving a stable visual layout as a page loads and as content updates. The term emphasizes minimizing layout shifts, which are disruptions in content position that can occur when images, ads, or dynamic components load or resize. Achieving layout stability improves readability and user experience and aligns with web performance goals such as Core Web Vitals CLS.

Applications include websites, mobile apps, and interactive dashboards. Practitioners focus on predicting and reserving space for elements whose size may change, such as media, embeds, or fonts. By controlling dimensions and flow, layoutstable helps prevent abrupt reflows that surprise users.

Key techniques include assigning explicit width and height attributes to media, using CSS aspect-ratio boxes, and reserving slots for dynamic content. CSS containment (contain: layout) and grid/flex layouts reduce reflow. Skeleton screens or lightweight placeholders give users a stable structure while content loads, and font loading strategies minimize shifts caused by late fonts.

Implementation varies by platform but common practices include preloading critical assets, reserving space for ad banners and embeds, using responsive images with intrinsic sizes, and avoiding inserting content before existing content without space. Developers monitor CLS scores and adjust layout policies across breakpoints to maintain stability during transitions.

See also: Core Web Vitals, Cumulative Layout Shift, responsive design, skeleton screens.