Added an endpoint for getting the above-the-fold CSS on URL basis
I found getting the above-the-fold CSS for every page a bit tricky so I decided to add an endpoint in SplitCSS for it.
You can also combine it with the endpoint for removing unused CSS.
So if you have an issue with PageSpeed Insights regarding stylesheets, this might come in handy.
I documented it here: https://splitcss.com/documentation#critical-css
It's still in beta, but I'd be happy if someone gives it a try.
Ironically, your site isn't loading so it's showing me a Cloudflare error.
Could you explain what exactly you mean by "above-the-fold CSS"? That's a new one for me.
Oh snap, Digital Ocean is having some trouble right now :|
Luckily the web service is hosted on AWS, so it shouldn't be affected by this issue.
Above-the-fold content is the portion of the webpage that is visible in a browser window when the page first loads. Google wants to see inline CSS extracted from your main CSS file and injected into the head tag, allowing everything you see first to be loaded first.
It can be notoriously difficult to find and serve the above-the-fold CSS for every URL. This is the case where the web service might help.
lol it happens!
So I know what above the fold means, especially to a designer. I did not know that Google is encouraging people to put style tags into the head. That is equally devious and painful to read, but I suppose that's just the sort of thing that you get into if you're asking why that 99% efficiency can't be 100%.
What I don't understand even a little bit is how you can talk about there being an arbitrary cut-off for what qualifies as above-the-fold, given that every device and browser window will have an entirely different number of pixels available. For example, my monitor has a vertical resolution of 3840, which is admittedly atypical... but it's entirely fair to say that any phone will have a different cutoff than any tablet or any laptop or any iMac.
What am I missing?