
The same issue appears in larger codebases that grow over a long time. When using CSS frameworks, it’s relatively common to end up with unused CSS (unless we only include the components we need). Terser is a popular JavaScript compression tool and if you use webpack, v4 includes a plugin to create minified build files. The output is a smaller but perfectly valid code file that the browser can parse and that will save you some bytes. Minification is the process of removing whitespace and any code that is not necessary. There’s also Brotli which can provide even better compression results, though it’s not as supported as Gzip. The most widely used compression format for server and client interactions is Gzip.

Watch the size of CSS Compress and minify CSSĮstablishing a connection to download an external stylesheet inevitably causes latency, but you can speed up the download by minimising the total bytes transferred over the network.Ĭompressing files can significantly improve speed, and many hosting platforms and CDNs encode assets with compression by default (or you can configure them easily). To avoid blocking parsing, deliver the CSS as soon as possible and arrange your resources in optimal order. Parser blocking CSS: how CSS can block HTML parsing.
