Wordpress LScache Plugin: Minifying CSS will remove all data-no-async=1? from HTML attribute
Last Updated on: Wed, 15 Apr 2026 00:00:02 Hi team. I am using JS to add in the HTML attribute on my css files to activate Load CSS Asynchronously features. Below for my JS code. (function() const loadFirstCss = document.querySelectorAll(#template-default-css,#bootstrap-default-css,#theme-style-css) const arrayCss = [...loadFirstCss] //Array Prototypes here! arrayCss.forEach(element => element.setAttribute( data-no-async , 1 ) ) )() If i disable minifying CSS, my code will work fine. As in in the HTML tags, we can see the attributes have been add on the HTML tag. But when i enable it, it does not work at all. Even the JS cannot detect the element ID. Can you please advise? Thank you. This topic was modified 5 years ago by herman123456. The page I need help with: https://www.thecanvasartfactory.com.au/ Hi, herman123456. Could you please clarify what you would like to do? You say you are trying to activate Load CSS Asynchronously features, but the data-no-async=1 is used to exclude files from loading asynchronously. if youre trying to activate asynchronous loading, you can navigate to LiteSpeed Cache > Settings > Optimize and set Load CSS Asynchronously to ON. If, on the other hand, youve already got it turned on and youre attempting to exclude some CSS, let me know and well dig a little deeper to see whats up. Hi there. Apologize if my post is not clear enough. I got 3 css files that i want to have the data-no-async=1 attribute. I use the JavaScript code above which i put in a JS/extra.js to dive into the DOM and add the attribute to those CSS files. But when i activate set Load CSS Asynchronously to ON. My JavaScript cannot find those 3 CSS files. My question is actually quite simple. Can you please advise the easiest way to add data-no-async=1 attribute, to my css? and how do i excludes JS to be deferred? I tried to use JS Deferred Excludes in the plugin settings, but it doesnt work. As minifiying the JS will change the JS name. Thank you. OK, I understand now. Thank you for the clarification! when i activate set Load CSS Asynchronously to ON. My JavaScript cannot find those 3 CSS files. The minification process takes place before your JS runs, so the only way you can find those three CSS files is to have your JS search for them by their new minified names. how do i excludes JS to be deferred? I tried to use JS Deferred Excludes in the plugin settings, but it doesnt work. As minifiying the JS will change the JS name. You could either exclude JS/extra.js from minification, or you could try using the minified name in the JS Deferred Excludes box. Minified filenames dont change from page to page, as long as the original filenames stay the same and they are included in the same order on every page. Youll just need to take a look through your source code to find what the minified filenames are. Let me know if this is unclear or if it doesnt work!
LiteCache Rush: Speed comes from using less, not from doing it faster
Reference