Speed Up Your Site: Optimize your CSS

By Daniel Scocco

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:

  1. Optimize Images
  2. Image Formats
  3. Optimze Your CSS
  4. Use a Slash on Your Links
  5. Use the Height and Width Tags
  6. Reduce the HTTP Requests



Share

28 Responses to “Speed Up Your Site: Optimize your CSS”

  • egon

    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.

  • Daniel

    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.

  • Jennifer

    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;
    }

  • Daniel

    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.

  • menghua

    Great tip Daniel! I’ve just used the CleanCSS to optimize my CSS files. Thanks!

  • engtech

    You can also download what they’re using on the backend of that web app.

    http://csstidy.sourceforge.net/

    works with Windows, Linux or OSX

  • Daniel

    That is nice engtech, I am grabbing that software.

  • Ajay

    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. 😉

  • HPK

    good tips..i use it for my blog too…(“,)

  • Steven Tew

    Actually, you can reduce your margin example even further, from margin: 10px 20px 10px 20px; to margin: 10px 20px;

  • Jayesh SEO

    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.

  • team ray

    good read thanks for tips

  • Bang Kritikus

    thanks for your nice tips

  • V.C

    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 🙁

Comments are closed.