Defer loading CSS

If your pages load a medium to large amount of CSS, deferring non-critical CSS is essential to optimize CSS delivery. Deferring a CSS file allows it to load after the HTML document (DOM) has finished loading, which helps prevent render-blocking and improves perceived page speed. To defer CSS effectively, the styles needed for the first visible (above-the-fold) part of a page should be inlined in the <head> of the page, and the remaining CSS should be defer-loaded using a small preload script.

How to defer CSS using HTML and a tiny JavaScript snippet

For JavaScript files, pure HTML attributes like defer and async are available. Unfortunately, these attributes do not work for CSS files. The following snippet uses a very small amount of JavaScript and is a widely recommended method for deferring CSS:


<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

How to use it:

  1. Copy and paste this snippet into the <head> of your page.
  2. Replace style.css with the path to the CSS file you want to defer.
  3. To defer multiple CSS files, repeat the snippet for each file and update the file path accordingly.

Be sure to include the <noscript> fallback. This ensures that browsers or devices with JavaScript disabled can still load the CSS properly.

Why is this best practice?

  • Non-render-blocking
    rel="preload" fetches the CSS early without blocking rendering.
  • Fast application of styles
    Switching rel to stylesheet in the onload handler applies the CSS as soon as it finishes loading.
  • No dependencies
    No jQuery or external JavaScript, just native browser features.
  • Excellent browser support
    Supported by all modern browsers, with the <noscript> fallback covering edge cases.
  • Recommended by performance experts
    This method is still referenced by Google Lighthouse, web.dev, and major performance guides.

Which CSS files should be deferred?

You should defer any CSS files that block the rendering of your page. These files delay the first paint and slow down the initial user experience. You can use our website speed test to identify which CSS files are flagged as render-blocking.

How do you determine which part of a CSS file to defer?

Before deferring CSS, you should first optimize CSS delivery by identifying the critical CSS, the styles required to render the above-the-fold content. Once you've extracted the critical rendering path CSS:

  1. Inline the critical CSS directly in the <head> of your HTML.
  2. Defer loading the remaining, non-critical portion of the original CSS file.

This method ensures that the initial view of the page is fully styled while the rest of the CSS loads later. It avoids flashes of unstyled content (FOUC) and layout shifts (CLS).

Do not defer small sized CSS files

If your page loads a small or medium-sized CSS file, deferring it usually isn't necessary. In these cases, you'll often get better performance results by inlining all of the CSS, rather than deferring it. If your page loads a small or medium-sized CSS file, deferring it usually isn't necessary. In these cases, you'll often get better performance results by

Only defer large CSS files

Deferring CSS is most beneficial when your pages load large CSS files. But you can't simply put all CSS into one file, defer it, and expect good results. If all CSS is deferred, visitors (especially those on slow connections or mobile devices) may initially see a blank page or an unstyled layout (commonly known as a flash of unstyled content). This happens because the browser hasn't loaded any styles yet.
That's why deferring all CSS is not an option. The correct solution is to:

  • Identify the CSS required for the above-the-fold content
  • Inline that CSS in the HTML <head>
  • Defer loading the remaining CSS

Optimized for page speed

One major advantage of this method is that it does not rely on jQuery or any other JavaScript library. It uses only native browser features, making it lightweight and well-suited for page speed optimization.

Why isn't there a "better" method available in 2026?

At the moment there is still no native defer attribute for CSS. Furthermore:

  • media="print" hacks are worse and less reliable
  • JavaScript loaders add unnecessary overhead

So in real-world performance testing, this preload-swap technique remains the most balanced and reliable solution.

Is your website doing it right?

Run a website speed test to check whether any CSS files are still blocking rendering. If you see CSS files listed under warnings such as "Remove or replace render-blocking resources", it means those files are not being properly deferred or loaded asynchronously and may be slowing down your page.

Last Updated: February 3, 2026

More Optimizations: