Minify CSS

Minifying elements can be a quick and effective method to reduce file sizes and help keep page load times down. In the case of CSS files, minification can be applied to reduce the number of unnecessary comments, blank spaces, redundant code, etc. Over time, all this extra “weight” can inadvertently lead to larger than necessary file sizes. By removing all of this, the browser can focus on the essential elements and forget about the elements it does not need. Like we had mentioned in earlier sections, the smaller the file, the faster it will download and be executed. And remember, CSS is considered a render-blocking resource, so you want to be sure that it is as lean as possible.

A Lighthouse report will alert you to any CSS files that should be reviewed as potential candidates for minification. Depending on how big or small your sites are, you may employ different tactics. Smaller websites can get away with manually minifying your CSS. Larger organizations with multiple domains may have to build minification into their web development workflows. There are a variety of free tools and resources, such as minifycode or cssminifer. For more advanced options, web development teams can take advantage of automation tools, like Gulp or Grunt, that can optimize CSS throughout the development pipeline. Additionally, CMS platforms like WordPress include access to plugins to minify CSS. Lastly, if your organization leverages a CDN, it is likely that minification is automatically applied to CSS from your origin server. The benefit is that any changes to the source or original CSS files are automatically updated with the minified files.