Medium This Hint is worth investigating further, and may warrant further attention depending on the type and quantity of URLs affected. Opportunity This Hint represents an opportunity for optimization.

Remove unused CSS

This means that the URL contains 'unused CSS', which is not actually used for rendering.

Why is this important?

By default, browsers download all stylesheets they encounter before they can render content to the user's screen. If you have 'unused CSS', this means that the browser needs to download CSS that it is not even going to use, delaying rendering in the process.

What does the Hint check?

This Hint will trigger for any internal URL that references CSS resources with over 2 KiB of unused rules.

How do you resolve this issue?

'Removing unused CSS' is much more complicated than it sounds. All tools - including both Sitebulb and Lighthouse - have natural limitations in what data they can provide about unused CSS.

For example, Lighthouse can tell you which code is dead or unused on a single page, with no context about the usage on other pages. Sitebulb actually has a 'Code Coverage' report that can show you which files have wasted rules across EVERY page of your site:

Code Coverage Percentages

But even that comes with a warning - you don't really know that the CSS is not required:

  • Sitebulb (or any tool) can't emulate user actions (such as clicking a tab) so it can't check all different combinations of page state.
  • It is difficult to be sure you have checked every possible combination of media queries on every page.

This means that 'just removing code because a tool told you to' is really bad advice. You could break core functionality of very important pages.

So the best advice for solving this problem is assigning it to a developer who is very familiar with the code, with the aim to improve the situation over time.

Further Reading

Free 14 day trial.
Full, unrestricted access.
No credit card required.

Try Sitebulb for Free