❓ Reducing CSS bloat for a faster and more sustainable website

Every byte of data transmitted and processed for a website generates carbon and slows down performance. A rarely discussed culprit is CSS (Cascading Style Sheets) and styling bloat.

CSS and related technologies (e.g. less or sass) are used to style websites e.g. to control the size and colour of text and buttons. In many cases sites only use a fraction of the styles defined due to using frameworks or copying code from previous sites. We need to be aware of this for a number of reasons:

1️⃣ WASTED DATA : Bloated CSS files and excessive styling require more data to be transferred, which increases the energy consumed (and therefore carbon emitted) when loading and rendering a page. By optimising CSS and reducing styling bloat, we can reduce the carbon weight of webpages.

2️⃣ SLOW AND FRUSTRATING USER EXPERIENCE: CSS bloat can lead to slower website performance, which in turn frustrates users and can negatively impact user experience. This can result in increased bounce rates and lost opportunities for your business. Optimising CSS not only benefits the environment but also improves the overall browsing experience for users.

3️⃣ SEO AND ACCESSIBILITY BENEFITS: Optimised CSS and lean styling contribute to faster page loading times. Search engines love fast-loading websites, and so do users! By reducing bloat, we improve website visibility, search engine rankings, and accessibility for all users, including those on slower connections or with limited data plans.

So, what can we do about CSS bloat? Firstly use the Coverage tool in browser developer tools to see what proportion of the styles in your CSS files are unused - you may be shocked!

Depending on how your site has been built there will be different ways to tackle bloat, but at a minimum you should ensure that you’re minifying and combining your CSS files.