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
- First 100KB (or so) of HTML
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.
- Plugin objects
- XHR deferred content
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.
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.
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.
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.
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
<body> classes when asynchronous scripts load or after
DOMContentLoaded. We’re still working on patterns to improve these cases.