xSpeed Cache
Get Plugin
Features Pricing Reviews FAQ
Documentation Blog Support Community Free vs Pro Compare
Get Plugin

Loading CSS Asynchronously

2 min read

CSS can block a page from appearing until it finishes downloading. xSpeed Cache can load your stylesheets in a non-blocking way. This article explains what that means and when to use it.

What this does

By default, stylesheets are render-blocking. The browser waits to download your CSS before it draws the page. On pages with large stylesheets, this can delay what the visitor sees.

Load CSS Asynchronously changes how stylesheets load. xSpeed Cache rewrites each stylesheet tag to use the print-then-all pattern: the browser loads the file without blocking, then applies it once it arrives. A <noscript> fallback is added so visitors with JavaScript disabled still get their styles.

Why use it

Loading CSS without blocking lets the page start drawing sooner. This works best when you also provide critical CSS (a small block of styles for the top of the page) so the page does not look unstyled while the full stylesheet loads.

How to enable it

  1. Go to the xSpeed Cache settings and open the Minify panel.
  2. Turn on Load CSS Asynchronously.
  3. Save your settings.
  4. Visit your site and watch how the page loads, especially the first moment it appears.

Warning: Without critical CSS, async loading can cause a flash of unstyled content. The page may appear plain for a moment before the styles apply. Test your site before leaving this on.

Settings explained

SettingWhat it doesDefault
Load CSS AsynchronouslyLoads stylesheets non-blocking via the print-then-all patternOff

Load CSS Asynchronously rewrites stylesheet link tags so they download without blocking the page. It pairs well with a critical-CSS workflow. Without critical CSS, the theme can show a flash of unstyled content while the full stylesheet loads. The setting defaults to off.

xSpeed Cache only rewrites real stylesheet links (rel="stylesheet"). It leaves other link tags, such as preload, untouched, so it does not interfere with styles the author set up intentionally.

Best practices

  • Use async CSS together with critical CSS for the best result.
  • Test the very first moment the page appears, not just the finished page.
  • If you see a flash of unstyled content and cannot add critical CSS, leave this setting off.
  • Clear your cache after changing the setting.

Troubleshooting

The page flashes unstyled for a moment before the design loads. This happens when there is no critical CSS to style the top of the page while the full stylesheet downloads. Add critical CSS, or turn off Load CSS Asynchronously.

A stylesheet did not change. xSpeed Cache only rewrites tags that are real stylesheet links. Custom link types, such as preload, are left as they are.

FAQ

What happens for visitors with JavaScript turned off? xSpeed Cache adds a <noscript> fallback that includes the original stylesheet, so those visitors still get styles.

Does this work with minify and combine? Yes. These are separate settings and can be used together.

  • Minifying CSS, JavaScript, and HTML
  • Combining CSS and JavaScript Files
  • Deferring and Delaying JavaScript