Click "Simulate DOM delays" below to see it in action.

• In the head, This page loads main.css, a small CSS file with just what we need.
• main.css hides and styles .pr elements with loading indicators.
• The larger css files reset .pr with additional styles and image data just before </body>.

Result: Page loads with adequate styling incredibly fast.

Users can immediately engage with your site, supplementary styles and detail load shortly thereafter.

This image uses the .pr class to render a placeholder image before the actual image is called from post-render.css

DaVinci

None of these images actually exist as files on the server.

Renoir

Instead, they are encoded in a Base64 strings.

Monet

These string set the background image of each of the above containers in the 3rd stylesheet.

Cleanly delaying supplementary styles

Refresh this page with DOM delays to test

• Loading extra style in later stylesheets can create jagged animations from unstyled to styled.
• Nesting these p elements under the .pr class hides them with loading indicator
• Styles are loaded at the same time the rules for .pr are reset.
• Great for styles for specific elements which do not appear on every page.
• Example: Styles for a private list of contacts probably won't appear until after the user has viewed at least one page on your site. In which case, they've already lazy-loaded the styles in time to view them.