How to use css to make your pages load faster

Css (cascading style sheets) are handy to seperate yout page markup (html) from your page layout (css). Css is incredebly powerfull and can turn your website into a feast for the eye. However bad or excessive use of style sheets can make your page render slowly in browsers. The following example may look simple but the hard reality is that the majority of websites suffers from this kind of bloated css.

Avoid complicated css

Condider the following html:

How to use css

The slowest way to style the link text would be:

#content.paragraph{ line-height:1.2em; } #content.paragraph.link{ color:red; }

The fastest way would be use a style for each element, in this case:

p{ line-height:1.2em; } a{ color:red; }

Use css to create a consistent look without classes and identiefiers

In the second css example you might also have noticed that every paragrapt within the site will get a line height of 1.2 em and every link will be colored red. This has the advantage that you do not need to write complicated html to have a nice looking layout

You might even have noticed that the html code in the second example could be slimmed down to

How to use css

Analyse your website !

Please enter your domain name