Optimize CSS Delivery

Resource optimization is a key part of a web page optimization process. As one of the main web resources, the stylesheets affects page load. Let's see 8 simple tips that could improve the loading of CSS.

• Avoid use of @import directive
• Avoid css expressions
• Avoid inline style
• Use short CSS selectors
• Combine CSS files
• Minify CSS
• Compress CSS with GZip
• Cache CSS

Avoid @import

Downloading resources in parallel is key to a faster page. The @import directive causes the stylesheets to be downloaded sequentially. That's why the @import has a negative impact on web page performance. Instead of @import, use a <link> tag or concatenation.

<!-- Using @import -->
<style>
@import url('fonts.css');
</style>

<!-- Using <link> -->
<link rel="stylesheet" href="fonts.css">

Avoid expressions

CSS expressions are a non-standard way, used by IE back in the days, to use JavaScript for setting up CSS values. Since they are possibly executed hundreds or thousands of times, they degrade a web page performance. Anyway, the CSS expressions are no longer supported by modern browsers. Instead of CSS expressions, use the calc() CSS function.

/* CSS expression */
width: expression(document.body.clientWidth - 50);

/* CSS calc() */
width: calc(100% - 50px);

Avoid inline style

Inline CSS increases the HTML document size, which leads to a slower page loading. In addition, inline CSS is not cached. So, you should always avoid a inline CSS.

<!-- HTML & inline CSS -->
<div style="background-color: red; float: left; width: 50%;"></div>

/* CSS */
.item {
    background-color: red;
    float: left;
    width: 50%;
}
<!-- HTML -->
<div class="item"></div>

Keep your CSS selectors short

Reducing the depth level of nested CSS selectors is a key part of the effort to write efficient CSS selectors.

header ul.menu > li.active > ul.sub-menu {
    display: block;
}

/* the same, but more efficient */
.active .sub-menu {
    display: block;
}

Combine CSS files

The key for a faster web page is a low number of HTTP requests. To reduce the number of HTTP requests combine your CSS files into just one file.

<!-- Before concatenation -->
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="theme.css">

<!-- After concatenation -->
<link rel="stylesheet" href="main.css">

Minify CSS

The removal of comments, whitespaces and newlines significantly reduce the CSS file size which speeds up its downloading. CSS code before minification look like:

/* Clearfix */
.clearfix:after {
    clear: both;
    content: '';
    display: table;
    zoom: 1;
}

Minified CSS code looks like:

.clearfix:after{clear:both;content:'';display:table;zoom:1}

Compress CSS with GZip

Using the GZip, an HTTP compression method, to compress your CSS files reduce the size of transferred data between web server and the browser.

<IfModule mod_headers.c>
  <FilesMatch "\.(html|css|js)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/css
</IfModule>

Cache CSS

Storing the CSS files in the browser cache reduces the load on your web server. This results in fewer HTTP requests which reducing a page load time.

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType text/css "access plus 1 year"
</IfModule>

• Optimize cached images
• Prefetching Resources
• HTTP Caching Headers
• Cross Domain Fonts
• CSS Tables

If you have questions about optimization of CSS delivery, leave a question below. Share if you like. Thanks for reading!