# Load Selected Stylesheets Without Blocking Rendering

> Loads the stylesheets you choose in the background so they no longer delay the first paint, ideal for CSS of things below the fold like sliders or forms.

- Type: PHP
- Runs: Frontend only
- Category: [Performance](https://wpide.com/library/category/performance/)
- Tags: performance, css, render-blocking
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/async-load-stylesheets/

## Code

```php
// Style handles to load asynchronously. Find handles in the page source: id="HANDLE-css".
$wpide_async_styles = array( 'contact-form-7' );

add_filter( 'style_loader_tag', function ( $tag, $handle ) use ( $wpide_async_styles ) {
    if ( ! in_array( $handle, $wpide_async_styles, true ) || false !== strpos( $tag, 'onload=' ) ) {
        return $tag;
    }

    $async = preg_replace( "/media=(['\"])(all|screen)\\1/", 'media="print" onload="this.media=\'all\';this.onload=null;"', $tag, 1, $count );

    return $count ? $async . '<noscript>' . $tag . '</noscript>' : $tag;
}, 10, 2 );
```

## Notes

Do not use it for the main theme stylesheet, or visitors will briefly see unstyled content.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Load Selected Stylesheets Without Blocking Rendering" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/