BEST_PRACTICES /
Fixed dimensions

← Back

Overview

It's a best practice to define fixed dimensions on containers that have subresouces that are asynchronously loaded. We want the browser to be able to layout as much of the page as possible with just the HTML and CSS. Usually this involves defining some sort of statically sized placeholder that the subresouce will load into.

Resources blocking the first paint

If all the necessary layout dimension information is available at this point, the browser can paint the initial content and placeholders for any subresource content thats still loading.

Non-blocking resources

Don’t assume any of the non-blocking resources will be available on the first paint.

Testing & Debugging

Browser dev tools like Chrome's Rendering tools or Firefox's Paint Flashing can help spot containers that don't have dimensions set correctly. Turn on the "Show paint rectangles" setting and watch for cases where the paint rectangles don't fit tightly around the content being updated.

Cases

Images

Image tags should be set with a static height and width. This allows the browser to draw a placeholder of the appropriate size before the resource is fetched. Otherwise, once the image is loaded it may cause the page to re-layout.

Graphs

Most graph data is loaded async and has some sort of loading indicator. It's important to ensure the graph container has some sort of fixed dimensions so that loader is the same size as the rendered graph. The page shouldn’t jump around while the loader is being replaced with the actual graph.

Before After

Deferred content

With the deferred content pattern, we attempt to display data immediately if it's already in cache. Otherwise we show a loading indicator and asynchronously load the content once it's ready. The loading state and final state should have the same dimensions.

Before After

Feature detection scripts

Performing feature detection in asynchronous scripts is tricky when UI is dependent on it. You don’t want UI to flicker hiding or showing an element after scripts finally load and the feature detect runs. In general, avoid setting <html> or <body> classes when asynchronous scripts load or after DOMContentLoaded. We’re still working on patterns to improve these cases.