Categories
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>
If you have questions about optimization of CSS delivery, leave a question below. Share if you like. Thanks for reading!
Subscribe to our newsletter
Join our mailing list and stay tuned! Never miss out news about Zino UI, new releases, or even blog post.
0 Comments
Comments are closed