Cascading Style Sheets make websites much more efficient because they allow the browsers to cache style-related information from the .css file directly, removing the need to read that information every time a single page is loaded. Even if Style Sheets are naturally more efficient than HTML tables you can still optimize the CSS code to make your website cleaner and faster.
First of all try to locate dispersed code and aggregate it together. For instance instead of:
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
you should use:
margin: 10px 20px 10px 20px;
Instead of:
<p class="decorated">A paragraph of decorated text</p>
<p class="decorated">Second paragraph</p>
<p class="decorated">Third paragraph</p>
<p class="decorated">Forth paragraph</p>
you should use:
<div class="decorated">
<p>A paragraph of decorated text</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
<p>Forth paragraph</p>
</div>
Secondly you can also try a CSS optimizer tool like CleanCSS. Those tools are supposed to merge similar selectors, remove useless properties, remove whitespace and so on.
Speed Up Your Site Series:
- Optimize Images
- Image Formats
- Optimze Your CSS
- Use a Slash on Your Links
- Use the Height and Width Tags
- Reduce the HTTP Requests
About Daniel
Daniel Scocco is a programmer and entrepreneur located in São Paulo, Brazil. His first company, Online Profits, builds and manages websites in different niches. His second company, Kubic, specializes in developing mobile apps for the iOS and Android platforms.
I found your topic when I was looking for way to optimize CSS in order to increase speed of website.
Some tool optimize CSS online is not work and it make my website down 🙁
thanks for your nice tips
good read thanks for tips
dailyblogtips.com is best resource for CSS learning cetre.
Most websites are looking for CSS optimization.
why need CSS Optimization ?
Well for two reasons mainly. It helps you get smaller CSS file sizes and better written code. The way the optimizer works actually lets you decide how much compression you want. From super compressed (virtually unreadable and editable by a human being) to visually pleasing. I prefer the standard setting because it gives you a little of both.
Actually, you can reduce your margin example even further, from margin: 10px 20px 10px 20px; to margin: 10px 20px;
good tips..i use it for my blog too…(“,)
regarding your example of putting the class in the div is debatable.
It would work only if you have basic styling in the class e.g. just color and background it would be ok, but the moment you’re talking margins and padding and other specific styles, putting the class in the div would be a mistake, unless you specifically tune your stylesheet as .decorate p {
Actually, then you are increasing the size of your stylesheet, though you are optimizing your HTML. 😉
That is nice engtech, I am grabbing that software.
Great tip Daniel! I’ve just used the CleanCSS to optimize my CSS files. Thanks!
Jennifer, yeah its true. I invented the div “decorated” just to clarify what the div would do on the text, and that is decorate it hehe.
Good tip. Your premise is true. I need to nitpick though, but the point I am making does not make your words ring any less true. divs should not be superfluous and should be semantically named. That text probably is decorated for a reason – maybe it is an introductory set of paragraphs, or a guest author’s point of view, or a set of code.
The problem lies in if you use .decorated in both instances of a guest author or introduction. Then, you decide to change only the introduction. Major problem!
In such a case, you should use a class or id (depending on appropriateness) and name it .guest-author, .introduction, or .code. Then, group the styles of they are the same:
.introduction p, .guest-author p, .code p{
margin:10px;
}
egon, I agree 100%. After you optimize the CSS with the online tool you are going to have an unreadable piece of text, so conserving the normal CSS file is a good idea to make changes on it.
Another great tip. One additional thing I would like to add is it’s always a good idea to have the optimized version serving your page, but it’s also a good idea to have a version without the whitespace removed stored on your computer so if you need to edit it, it’s much easier to read. Then you can run it through the optimizer again and serve it up.