Introducing SplitCSS: the API for reducing unused CSS from your webpages. Your support is appreciated.
Fellow developers, I am about to launch splitcss.com, an API for reducing dead stylesheets.
Easy stylesheet splitting for individual web pages
Here's what happens very often: we have turned placing CSS into one file a habit.
So the browser has no choice but to load an entire stylesheet and apply only a handful of classes to the page that the user is viewing.
My aim is to deliver stylesheet splitting as a service.
That would mean that the service would return the stylesheet rules that are actually needed by the browser.
This would decrease file size and improve page speed.
Even tools like PageSpeed Insights started reporting the excessive amount of stylesheets:
Some people might even see an opportunity here to have a positive impact on their SEO and rankings, since speed is a ranking factor.
To be fair, this is not a silver bullet for every possible web app out there. There are many different ways to include CSS in web pages nowadays.
And also there are many CLI tools that scan your project source files for CSS selectors.
Still, it would be very convenient if this could be done on URL basis. If a service would try to find the dead styles.
What is the difference compared to CLI tools?
Well, what SplitCSS does is first runs Headless Chrome to get the HTML and then starts analysing it for unused CSS selectors.
Of course you can also do that from your terminal, but as a developer, I would love to have a service to take care of it. I would let it cache the cleaned stylesheet for the URL and let the browser load that one.
What about performance?
Many people think that consuming a service must be inevitably slow. Like you do an extra request, plus processing time plus delivering the response.
That is true, but stylesheets are quite static resources and can be cached, both by the service and by the consumer.
Also styles that appear after the user takes an action can be marked as necessary and the service will include them even they are not present in the initial DOM. Usually the number of such classes is low.
Your support is welcomed
I have recently shared the idea about the concept, with mixed feedback and a lot of concerns. Nevertheless there were some positive reactions and some people signed up for getting early access to the platform.
This has meant a lot to me.
So if anyone else finds the idea interesting, or at least intriguing, feel free to create an account - it doesn't cost anything.
The service is not perfect and probably it will never be, but I am willing to improve it.
It can become good enough for many cases, I would be extremely happy.
🙏 Thanks!
Further resources: