Find us at BrightonSEO 25/26 April - STAND 18! Fill your swag bag!

Dealing with Performance issues?

Crawl your website with Sitebulb for 300+ tech SEO checks

Try for Free
High This Hint is very important, and definitely warrants attention. Opportunity This Hint represents an opportunity for optimization.

Minify CSS

This means that the URL in question contains CSS files that are not minified or could be minified further.

Why is this important?

When creating CSS files, developers tend to use spacing, comments and well-named variables to make code and markup readable for themselves. It also helps others who might later work on the assets. While this is a plus during development, it becomes a negative when it comes to serving your pages. Web servers and browsers can parse file content without comments and well-structured code, both of which create additional network traffic without providing any functional benefit.

These unnecessary characters usually include white space characters, new line characters, comments, and sometimes block delimiters, which are used to add readability to the code but are not required for it to execute.

Minification works by analyzing and rewriting the text-based parts of a file to reduce its overall size, resulting in faster response times and lower bandwidth costs.

What does the Hint check?

This Hint will trigger for any internal URL which references CSS files that could be minified further.

Examples that trigger this Hint:

The Hint would trigger for any CSS resource URL which contains comments, characters or spacing that is functionally redundant:

/* Header background should match brand colors. */
h1 {
background-color: #000000;
}
h2 {
background-color: #000000;
}

How do you resolve this issue?

To solve this issue, you would need to use a CSS minifier to minify your CSS code, which will automatically strip out the redundant elements.

  • For small sites that you don't update often, you can probably use an online service for manually minifying your files. You paste your CSS into the service's UI, and it returns a minified version of the code.
  • For professional developers, you probably want to set up an automated workflow that minifies your CSS automatically before you deploy your updated code (e.g. Gulp or webpack)

Further Reading

Sitebulb Desktop

Find, fix and communicate technical issues with easy visuals, in-depth insights, & prioritized recommendations across 300+ SEO issues.

  • Ideal for SEO professionals, consultants & marketing agencies.

Sitebulb Cloud

Get all the capability of Sitebulb Desktop, accessible via your web browser. Crawl at scale without project, crawl credit, or machine limits.

  • Perfect for collaboration, remote teams & extreme scale.