How to minify CSS for better website performance

Why minify CSS?

CSS minification reduces the size of cascading style sheet (CSS) files so that they load faster. CSS minification works by eliminating all unnecessary characters and spaces from CSS markup without impacting how browsers interpret it.

CSS files contain instructions for formatting HTML elements. When they load faster, webpages load quicker overall, just as wearing lightweight clothing helps a jogger run faster. Fast loading improves the user experience and SEO value of the page, and page speed improvements can even help boost conversion rates.

As an example, this simple style sheet has several lines of code, along with comments for developers reading it:

/* paragraph styling here */

p {
font-family: arial;
color: green;
background-color: white;
}

/* links */

a:link {
color: blue;
}

a:visited {
color: white;
}

After CSS minification, it is just one compressed line, and the comments are removed:

p{font-family:arial;color:green;background-color:white;}a:link{color:blue;}a:visited{color:white;} 

While this text is less readable for humans, a browser reads and interprets the second version in exactly the same way as the first. The minified version has the advantage of loading faster because it takes up less space.

How page rendering works

Before a browser can display a webpage, it has to know what elements (such as text, images, and other multimedia) are on the webpage and where everything goes on the page. Just as contractors need a building's blueprints before they can start construction, browsers need a webpage's "blueprints" before they can start rendering the page.

Upon receiving an HTML file for a webpage, browsers begin constructing something called a Document Object Model (DOM) tree; this is like a rough outline or a sketch of all the elements on the page. Browsers also parse all <style> tags and linked CSS files to build a CSSOM tree, which maps out how all those page elements will be styled.

Finally, browsers combine the DOM and CSSOM to create a "render tree." Once the render tree is created, the browser starts painting the page. Until this happens, the user is looking at a blank screen.

The upshot: until the browser finishes downloading and reading CSS, the page cannot appear.

How can CSS block a webpage from displaying?

In web development, any element or feature that has to be loaded before the page can be displayed to the end user is called a "render-blocking resource." CSS is such a resource. Render-blocking resources must be optimized for quick loading whenever possible.

Large render-blocking resources take longer to download, causing the browser to wait — literally blocking the page — so it appears to the user as if nothing is happening. Delays like this often cause users to leave the page ("bounce").

They also impact Core Web Vitals, the metrics Google uses to measure page performance — particularly Largest Contentful Paint (LCP), which measures how long the largest element of a page takes to load. Poor Core Web Vitals scores can cause Google to rank the page lower in search results, so the page may receive less traffic overall.

How to minify CSS

Fortunately, many minification tools are available for CSS. Perhaps the most convenient approach is to use the minification tools integrated with a website's content delivery network (CDN), a service that caches and delivers content. CDNs should be able to provide minification services to further boost performance.

Cloudflare Auto Minify is included with the Cloudflare CDN. Site owners can select CSS files (along with JavaScript and HTML files) to minify from their Cloudflare dashboard.

What is the difference between CSS minification and compression?

Technically, CSS minification is different from CSS compression, even though the goal of both is the same: to reduce the size of the file. Minification alters the code by removing comments and characters. Compression makes the file smaller through the use of a compression algorithm (such as gzip) and does not actually alter the file's contents.

Are there any downsides to minifying CSS?

Because minified CSS is often less readable, minification can make it harder for developers to manually identify and fix bugs in CSS markup.

Also, minifying CSS on its own is not enough to improve the performance of a website. It may buy a website milliseconds, but there are additional actions website operators must undertake to see significant performance improvements — including image optimization, browser HTTP caching, and more.

CSS vs. JavaScript minification

JavaScript minification is a similar concept, but for executable JavaScript code. Comments, spaces, and other extra characters are removed so that the .js file can load and execute more quickly. JavaScript and CSS minification both contribute to a faster-loading website, and can result in better user engagement and increased organic traffic.

Website operators can use the Cloudflare CDN to minify both CSS and JavaScript — learn about available Cloudflare plans here.