CSS resources are render-blocking. Here are the steps for optimizing your CSS:

  • Consider using not so deep CSS rules (e.g. this is deep rule: “.mydiv .second-layer > p > span.too-deep”),
  • If CSS is one-time-only and you’re sure you’ll not need it again on other pages you can inline it.
  • Minify files (removes all white-spaces and comments).
  • You can move all CSS styles with media queries from render-blocking CSS (e.g. style.css) into non-render-blocking CSS file (e.g. mobile.css) with setting media attribute to link tag:
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
<link rel="stylesheet" href="print.css" media="print">
  • Compress the CSS files,
  • Cache those files on the server side.