CSS Tuning

Whenever you are using Joomla! to construct a large page that will have many visitors, it can become important to keep the page loading time as short as possible. In the Beez template, I integrate several CSS files: one for positioning, one for the distances, one for the colors, and one for the different Internet Explorer versions. These files make it easier for designers to handle and understand. But for each file, you need to send a request to the servers, which affects the performance.

Sometimes it can make sense to combine the contents of the files (not the one for Internet Explorer) into a big file, which invariably leads to a large file that is not very clear.

Here are some other tips.

Avoid redundancies in your CSS rules.
Remove the semicolon after each final statement in a statement block.
Combine value statements:
{
margin:0 10px;
}

instead of:
{
margin-top:0;
margin-right:10px;
margin-bottom:0px;
margin-left:10px
}
Avoid too many indents and spaces.
Remove comments if necessary.
You can also use the free tool CSSTidy to automatically optimize your CSS file: http://csstidy.sourceforge.net/

Published in Hacks

Tagged under

More in this category: « Virtuemart Customisation Navigation Menus to the Full Width of a Layout »