How to load excluded CSS asynchronously?

Loading CSS async is no good idea. In most cases it causes content/layout shifting and this is not good if you want to get a good Pagespeed score. Loading CSS async can have advantages, but needs a strategy for loading critical and uncritical css.

unfortunately not from plugin side

but you can just simple edit the source code and add attribute media="print" onload="this.media='all'" to that CSS file , or use litespeed_buffer_after filter to edit the content on-the-fly.

I found this in your documentation.

function remove_broken_style( $content ) {
    return str_replace( '.content{opacity:0}', '', $content );
}
add_filter( 'litespeed_buffer_after', 'remove_broken_style', 0);

This code will solve my issue and will load CSS in an asynchronous manner, right?

that’s what I have mentioned in my last reply about the litespeed_buffer_after filter

you need to adapt a bit of it , to make it search your existing CSS file code and add async attribute into it

Yeah, I got it.
Can you please give me an example of CSS files? And if possible a guide or an article link where I can learn more about these filters.

you have the doc already , just need to learn a bit about PHP’s str_replace() function

let’s say your page has a HTML code , like

<link rel="stylesheet" href="/wp-content/themes/something/something.css">

then you can replace it like

return str_replace( 'something.css"', 'something.css" media="print" onload="this.media='all'"', $content );

this will then turn into output code like

<link rel="stylesheet" href="/wp-content/themes/something/something.css" something.css" media="print" onload="this.media='all'">

didn’ test the code , but idea is like this

Thanks!
I don’t know how to use this filter but will learn and use it. Your example is not working for me but it’s a good reference for me.

you just need a quick class on PHP’s function str_replace

basically , just find the CSS link , and replace it with async attribute in the code like my above example