Speed Up Your Site: Optimize your CSS

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

1. egon on March 15th, 2007 5:12 am

   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.

2. Daniel on March 15th, 2007 5:16 am

   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.

3. Jennifer on March 15th, 2007 6:33 am

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

4. Daniel on March 15th, 2007 6:43 am

   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.

5. menghua on March 15th, 2007 9:00 am

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

6. engtech on March 15th, 2007 12:06 pm

   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

7. Daniel on March 15th, 2007 12:16 pm

   That is nice engtech, I am grabbing that software.

8. Ajay on March 16th, 2007 2:13 am

   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.

9. HPK on April 1st, 2007 9:52 pm

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

10. Steven Tew on July 26th, 2007 5:45 am

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

11. Jayesh SEO on November 30th, 2007 4:11 am

    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.

12. team ray on May 3rd, 2008 5:30 pm

    good read thanks for tips

13. Bang Kritikus on January 28th, 2009 4:25 am

    thanks for your nice tips

14. V.C on May 22nd, 2009 11:15 pm

    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

Got something to say?