Removing Unused CSS During Website Theme Development With SCSS
There are times when you realise that a web project will not want certain features from its CSS stylesheet/s. This is true given that CSS frameworks like Bootstrap, Foundation, etc. provide great customisation to suit your web build.
Think about the last time you might’ve wanted to remove something from the stylesheet, probably because of the aesthetics of another developer going to sift through your code.
You may realise that Bootstrap 4 for example now includes :root selectors through its _root.scss file. Yes, you might want to keep this file. But this is preferential. The CSS variables in this certain project may prove useful in the long run. You never know.
Leniency of GZip Compression for Unwanted CSS
There is the argument that GZip will already deal with the hassle of having to remove unwanted CSS. Peterbe.com provides great insight to this argument.
Once the browser has downloaded the payload, it appears to be very fast at parsing it to get ready to render the page accordingly. In other words, don’t worry so much about the “bloat” of the content of the CSS file. Worry more about the excessive HTTP requests needed in total.
Meaning that removing unwanted CSS is not a low hanging fruit when it comes to improving website speed. So it is not mandatory to optimise your CSS in this scenario. But what you will want to make sure is that you stay organised with your files and names throughout the project, so that you may stay level-headed from start to completion.
Twitter Bootstrap 4 Framework GZip Size
According to cnvyr.io, by placing the default Bootstrap 4 framework, it results in a gzipped size of 57 KB. Yet the minified, gzipped file is almost halved in size — at a staggering 24 KB! Therefore you will not have to worry at all when debating whether or not to remove certain parts from your web framework.
Of course, there are still websites that take into serious consideration regarding the size of a website, for example websites that have to be served to their users in remote regions where internet access is not as readily available. Where even 24 KB will take time to load.
Versus Deferring Unused CSS
Yet Google’s PageSpeed Insights mentions a warning about your “Render Blocking CSS”, and Google’s LightHouse Project advises too to “Defer unused CSS”. This is different from removing unwanted CSS however, since it uses the term “Defer” meaning to put back for later on when needed. Google web performance snapshots simply recommend though to inline all Critical CSS that may appear to make a webpage load slow.
This can easily be resolved with the use of caching plugins like WP Rocket as a paid solution, or Autoptimize with “Inline and Defer CSS”. There is a great guide on doing so from wpfaster.com.
Conclusion
Concerning the overhead of optimising your CSS to reduce its own file size appears to not be a low-hanging fruit. There are easier and more impactful improvements that can be made towards making a faster website since CSS frameworks now tend to be a measly less than 30 KB. So it is considered a myth nowadays to have CSS frameworks classed as your website bloat.
Instead, what has to be focused on are the media (images, iframes, video), and optimised loading of resources (defer JS as much as possible, include Critical CSS aka deferring unused CSS). These are to deal with your website. And remember too that there are server-side improvements that appear to be low-hanging fruit as well, which include finding out if you’re server supports HTTP/2, OPCache, and better compression methods. If not, looking for a CDN like CloudFlare Free seems to do the trick quite well.
Please let me know in the comments below how you think?
Resources
Bengtsson, P. (2016). CSS Bloat Comparison. [online] Peterbe.com. Available at: https://www.peterbe.com/plog/css-bloat-comparison [Accessed 3 Mar. 2019].
GitHub. (2019). twbs/bootstrap. [online] Available at: https://github.com/twbs/bootstrap/blob/master/scss/_root.scss [Accessed 3 Mar. 2019].
Google Developers. (2019). Defer unused CSS | Tools for Web Developers | Google Developers. [online] Available at: https://developers.google.com/web/tools/lighthouse/audits/unused-css[Accessed 3 Mar. 2019].
Mishra, A. (2014). How to Inline Critical, Above-the-Fold CSS & Optimize CSS Delivery in WordPress With the Autoptimize “Inline and Defer CSS” Option. [online] WpFASTER. Available at: https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option [Accessed 3 Mar. 2019].