Several CSS Optimization questions: Minification / Critical Path'ing / Async CSS

#1
I have a question about how LSC handles the file created when it combines CSS files. When running it through Google's PageSpeed Insights tool, I'm always left with a Render Blocking CSS file that is located here:
Code:
https://MYSERVEREXAMPLE.com/min/27f84.css
The name of the file changes when I make any changes to the CSS files (which I would expect as this is a dynamically created file). The problem I'm having is that I cannot locate this file in either SSH or FTP. It just isn't anywhere to be found in any way that I know how to find it. I suspect that it is a cached file located in one of the cache folders, though I cannot locate it by file name. Given that I cannot locate it, I cannot alter anything about it so as to remove it. So how do we make it non-Render Blocking, along with the factors I bring up next?

Secondly, as to enter the Critical Path CSS: I've used a variety of tools to create the Critical Path CSS, from the free ones to the most notable premium services, such as https://criticalcss.com/ used to generate critical css paths for both manual and automated inject via API. My questions are: Does the Critical Path section of LSC only affect the Homepage (as I suspect is the case) and does it account for responsive design at all. Are there any plans to allow for a Per Page Critical Path entry section AND some way to inject said CP-CSS on a per page basis. There are precious few solutions for such things, with some being far less helpful than others and requiring a bit of know-how, which is fine for those of us who enjoy such things, and at least one that I've found that seeks to fully automate the entire process with extreme ease of use, such as the Pegasaas WordPress Plugin for Google Pagespeed Optimization Automation. (For the record, I'm aware these are NOFOLLOW links, though if posting that is still frowned upon, please just let me know and I'll remove it / or please remove them).

Lastly, I've attempted every possible configuration arrangement to get Async CSS to work and not once, on any site I've attempted it, had it work. It Always breaks the site, every time, no matter which theme I've used, from just no-theme core WP to heavy-built themes to core-non-customized cutting-edge builders such as Divi 3.0 (3.0.94) by ElegantThemes.com. It would certainly be a huge help given the whole Critical Path CSS issues in my questions above as we're told as of late that minification/concatenation is the "old way" of doing things, with quite a few "experts" telling us that we shouldn't even do min/cat anymore as long as we're using HTTP/2 and PUSH enabled servers...which we are when we're using Litespeed (especially full-bore Enterprise).

I look forward to reading the response to these queries as I've held off for a solid month as I attempted to work it all out for myself, which included a healthy amount of Googling which turned up a whole fat lotta nothing much helpful. I absolutely love my Litespeed VPS and the LS Cache Plugin for WordPress has made it even that much more exciting, though there are just some things that frustrate me to no end. I know you folks are working tirelessly to make it the most amazing solution there is and you're so close to it being the pound-for-pound best solution available. In the meantime ... Help me, Obi-Litespeed Wan, you're my only hope.
 
Last edited by a moderator:

hai

Well-Known Member
#2
That min/xx.css is stored in cache. Did you turn on async css? Not sure if it will help non-Render Blocking.

Yes we can add that feature ( different rules for different pages ), but may need more suggestion on this point. For each page path, do you want to use any rule matching in setting? We have the automatic generating critical css feature in our dev plan.

If you get site broken when using Async CSS, you know you need to add critical css first. We are aware of this thing and do want to make it easier for users to generate rules. Any suggestion is always welcome
 
#3
Hi Hai,

Thank you for the swift response.

Ok, as to that file being cached, I thought so. Async CSS does not help with render blocking. Is there any way to manipulate that file in cache? Does referencing it via relative url work? I had the strangest bug when testing this a week or so ago... the CSS file that was showing in View Source was NOT the same file that Pagespeed Insights / GTMetrix was showing me as the culprit for render blocking.

So I'm a bit lost with this question, "do you want to use any rule matching in setting?" - I'm not sure what you mean by "rule matching".

As to Async CSS... adding the C-CSS first, saving, then activating Async CSS did the trick.

I would say the best suggestion I could give is to automate the process on a per page basis. The only solution I've found that fully automates this process is the Pegasaas Accelerator which actually automates several of the options that Litespeed has at present. While I personally enjoy the tinkering, I know quite a few folks out there don't want to spend hours upon hours turning switches on and off. Most just want to turn it on and go back to the rest of the day. So yeah, as much automation as possible while still having the on/off switch on any given feature is definitely the way to go.
 
Top