This page simulates a slower load time by loading in the CSS files on a timer.

• 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 again 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.