CSS is the code that tells a browser how your page should look: colours, fonts, spacing, layouts. Every page needs some. But many small business sites built with a page builder or a feature-packed theme send visitors far more styling than the page in front of them uses: rules for sliders that aren't on the page, shop layouts on a contact page, pop-ups that are switched off. That code is still downloaded, and a carbon test counts it like any other file. This article explains why it happens, how to see it, and what you or your web person can do.
Why builders and big themes load so much CSS
Page builders and multipurpose themes are designed to do almost anything: dozens of widgets, layouts and effects that you can drop onto any page. The simplest way to make sure every feature always looks right is to bundle all of their styles into one or two big stylesheets and load them everywhere. That is convenient for the people building the tool, but it means a simple “About us” page may carry the styling for a whole catalogue of features.
Builders know this. Elementor, for example, described on its developer blog in 2021 that it used to have one large file containing the CSS rules of all its widgets, and that pages now load only the CSS of the widgets in use. Plugins add to the pile too: each one can bring its own stylesheet, often loaded on every page whether or not its feature appears there.
There is also a speed cost, separate from the data. Google's web.dev guidance notes that CSS files are render-blocking: they must be loaded and processed before the browser shows the page. So unused styles can delay what visitors see, as well as adding to what they download.
See it for yourself with the Coverage panel
Chrome has a built-in tool for this. It takes about five minutes and doesn't change anything on your site.
- Open the page in Chrome and open DevTools (F12, or right-click and choose Inspect).
- Open the Command Menu (Ctrl+Shift+P, or Cmd+Shift+P on a Mac), type
coverageand choose “Show Coverage”. The Coverage panel opens at the bottom of DevTools. - Click the reload button in the panel. The page reloads while Chrome records which code it uses.
- Use the drop-down in the panel to show CSS only. Each file is listed with its total bytes, unused bytes and a bar: Chrome's documentation explains that the grey part of the bar is unused and the green part is used.
- Click a file to open it and see the unused lines marked in the margin.
Look at the file names. They usually tell you where the CSS comes from: the theme, the builder, or a named plugin. That is the list you take to whoever looks after your site.
One caution: Coverage only knows what happened while it was recording. Styles for a mobile menu, a pop-up or a page you didn't visit will show as unused, but they may be needed. Chrome keeps recording while you interact with the page, so open menus and tabs before you stop the recording if you want a fairer picture.
What Lighthouse's “Reduce unused CSS” means
If you have run Lighthouse or PageSpeed Insights, you may have seen “Reduce unused CSS”. According to Chrome's documentation, it lists every stylesheet with a potential saving of 2 KiB or more. The same page suggests putting the styles needed for the first view inline in the page and loading the rest afterwards, and has platform tips: for WordPress and Joomla, reduce the number of plugins or extensions that load unused CSS, or switch to alternatives; for Drupal, themes and modules should only attach a stylesheet when it is actually used on the page.
Treat the potential saving as an upper limit, for the same reason as above. Our guide to reading a carbon report explains how GreenTracer uses these opportunities in its suggested actions.
Practical options, easiest first
- Check your builder's and theme's performance settings. Some have options to load styles only for elements used on a page, or to switch off modules. Elementor's per-widget loading is one example. Look in the settings, test the page afterwards, and keep the change only if everything still looks right.
- Turn off modules you don't use. Some themes ship sliders, portfolios, shop layouts and icon sets as optional modules. If you never use them, switching them off can stop their styles loading.
- Review plugins. Each plugin you remove is one less possible stylesheet. Start with ones you installed for a single campaign or no longer use.
- Ask your developer to split the CSS. The aim is for each page to load only what it needs: shared styles once, and feature styles only on pages with that feature. Coverage results and the file names make this a clear request rather than a vague “make it faster”.
- Be wary of one-click “remove unused CSS” tools. They can work, but because they decide what is unused from a sample of pages and states, they can strip styles that menus or forms need. Test key pages on a phone and a desktop after switching one on.
What to expect from the change
The bytes in Coverage measure the code itself, which isn't always the same as the bytes sent over the network. To see what a change really saves, note the transferred total in the Network panel before and after, with “Disable cache” ticked.
For scale: under the Sustainable Web Design Model v4, every megabyte removed from a page load lowers the estimate by about 0.148 g CO₂e per page view (about 0.121 g on a host listed as green). As an illustration, a page that stops sending 200 kB of stylesheets would fall by about 0.03 g per view. That is modest on its own, but CSS trimming tends to come with a faster first view, and it adds up alongside lighter images and fonts. You can see where a page sits on the scale on our grades page.
When you have made a change, check the page again and compare the bytes measured with your earlier result.
Sources
- Chrome DevTools: find unused JavaScript and CSS with the Coverage panel
- Lighthouse: reduce unused CSS
- web.dev: defer non-critical CSS
- Elementor developers: how Elementor improved asset loading (2021)
- Chrome DevTools: Network features reference
- Sustainable Web Design: estimating digital emissions (SWDM v4)
