smallcss

SmallCSS

Removes unused styles to generate the smallest possible CSS file from HTML and CSS

Excellent for improving pagespeed!

Installation

npm install smallcss

Install globally for command line usage

Usage

Command Line - node smallcss test.html test.css dist/small.css

Programmatically (e.g. With Gulp) - small("test.html", "test.css", "dist/small.css")

Note: The destination argument is optional.

Example Scenario

Google PageSpeed Insights says Eliminate render-blocking JavaScript and CSS in above-the-fold content

The problem is your main.css file. So you decide to inline the critical styles. You could hand code it, but that's too time consuming and Bootstrap adds complexity.

Enter SmallCSS! Your homepage is in PHP, so you use the browser to download the generated HTML and run the command node smallcss index.html assets/main.css

Which creates small.css in the current directory.

Next you place the main.css in your footer asynchronously, example -

<link class="async-css" rel="stylesheet" href="/css/main.css" media="all">
<script>
document.querySelector(".async-css").setAttribute("media", "only async");
setTimeout(function(){
    document.querySelector(".async-css").setAttribute("media", "all");
}, 1);
</script>

Then add the small.css contents to a style tag in your header. Publish and re-run the pagespeed insight tool, it should have increased!

Now obviously your mileage may vary, but for me personally my site (hosted on GitHub pages) went from 82 to 95 on both Mobile and Desktop. As for filesizes, my main.css file was 121kb (with Bootstrap styles), now my homepage css (small.css) is 5kb