Tag: CSS

  • CSS optimization

    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.