We have a WordPress website that uses Divi
theme and Litespeed cache
plugin. I checked our website on google pagespeed insights and it says that there is a render-blocking
css.
According to pagespeed
the url(example url) below is render-blocking
<link data-optimized="1" rel="stylesheet" id="divi-dynamic-css" href="https://healthandbeauty.com/wp-content/litespeed/css/0ez9a02P748a67191h2be0c2d4f1cb.css?ver=7f0f3" type="text/css" media="all">
Problem: Is there a way I can create a WordPress hook/function to defer/load asynchronously the CSS file via the id
property of the <link id="divi-dynamic-css">
tag? In addition, 0ez9a02P748a67191h2be0c2d4f1cb
is a dynamic file name generated by Litespeed cache.
I need WordPress hooks/filters for this since the <link id="divi-dynamic-css">
tag is displayed by Divi or WordPress and not by me. In other words, I cannot manually add or remove <link id="divi-dynamic-css">
.
For example:
add_action('style_loader_tag', 'make_css_async');
function make_css_async() {
?>
$html = <link rel='stylesheet' id='divi-dynamic-css' href='wp-content/litespeed/css/0ez9a02P748a67191h2be0c2d4f1cb.css?ver=7f0f3' media="all" onload="this.media='all'" />
return $html;
<?php
Your help is greatly appreciated. Thanks!