How to make your websites download and run fast [part two]

This is part two of  how to make your website run fast,  part one can be found here. In this post I will focus on rules related to CSS in your site.  I recommend using Page Speed   to help optimize the performance of web pages.

Include External CSS files first

Your CSS files are used by the browser to render the layout of the page, so make sure you always include external CSS files before external JavaScript files. This will ensure the CSS files are downloaded quickly, without having to wait for JS files, which usually are not needed during layout rendering, to download. See example below and read more here.

<!-- external css first -->
<link rel="stylesheet" href="mystyle.css" type="text/css" />
<script type="text/javascript" src="myjavascript.js"></script>

Minify CSS

As I mentioned before when talking about JavaScript,  Minifying  CSS resources could reduce their size noticeably, You can use  YUI Compressor to do this.

Avoid CSS @import

This is going to prevent parallel downloading of the CSS files, therefore increasing loading time, more can be found here.

Put CSS in the document head

Again, because CSS styles are used during the layout rendering, it’s better to load them as soon as possible. The browser usually block page rendering until all external CSS files have been downloaded. read more here.

Combine images using CSS sprites

Using CSS sprites you can reduce he number of HTTP requests, by combining multiple images into as few images as possible. learn more here.

Advertisement