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

December 14, 2011 § Leave a comment

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.

Advertisements

Tagged: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

What’s this?

You are currently reading How to make your websites download and run fast [part two] at Mohamed Elbou.

meta

%d bloggers like this: