Here’s a popular list of CSS and JS tools that do the “minifying” for you:
- To minify HTML, try HTML Minifier
- To minify CSS, try cssnano and csso.
Alternatively, the PageSpeed Module, integrates with an Apache or Nginx web server to automatically optimize your site, including resource minification.
Your browser waits for all CSS to be loaded before it can begin rendering a web page. The more CSS you have, the longer it will take for your web page to be styled. Let’s discuss some workarounds to help load your CSS faster (aside from “minifying”):
Media Types and Queries
When including your styles, the media attribute can be very helpful. By marking it as "print" the browser will not have to wait until it is loaded.
Media Queries allow you to load CSS depending on the size of the viewport and in an increasingly mobile age, it is highly recommended you use them. Based on your query, your browser decides if it has to load the CSS or not.
Deliver and Include CSS as Early as Possible
Since the browser has to wait for all CSS to be loaded, it's important to provide it as quickly as possible. A very simple way to make sure the browser receives CSS as early as possible is by including it in the HEAD section of your HTML document. This way, the browser will start loading CSS as soon as possible.
Including Scripts with ´async´