• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
Daily Blog Tips

Daily Blog Tips

How to make money from your blog

  • Home
  • Popular
  • Contributors
  • About
  • Contact / Advertise
  • Blogging
  • Marketing
  • Design
  • Money
  • Reviews
  • Productivity
  • Software
  • Technology

Speed Up Your Site: Optimize your CSS

By Daniel 13 Comments Reading Time: < 1 minute

background image

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
Speed Up Your Site: Optimize your CSS Photo

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.

Reader Interactions

Comments

  1. Avatar of V.CV.C says

    at

    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 🙁

    Reply
  2. Avatar of Bang KritikusBang Kritikus says

    at

    thanks for your nice tips

    Reply
  3. Avatar of team rayteam ray says

    at

    good read thanks for tips

    Reply
  4. Avatar of Jayesh SEOJayesh SEO says

    at

    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.

    Reply
  5. Avatar of Steven TewSteven Tew says

    at

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

    Reply
  6. Avatar of HPKHPK says

    at

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

    Reply
  7. Avatar of AjayAjay says

    at

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

    Reply
  8. Avatar of DanielDaniel says

    at

    That is nice engtech, I am grabbing that software.

    Reply
  9. Avatar of menghuamenghua says

    at

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

    Reply
  10. Avatar of DanielDaniel says

    at

    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.

    Reply
  11. Avatar of JenniferJennifer says

    at

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

    Reply
  12. Avatar of DanielDaniel says

    at

    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.

    Reply
  13. Avatar of egonegon says

    at

    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.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Trending Today

Popular

  • 28 Ways to Make Money with Your Website 514 Comments
  • 43 Web Design Mistakes You Should Avoid 474 Comments
  • 4 Steps to Increase Your Blog Traffic 188 Comments
  • How to Find Advertisers for Your Website 126 Comments
  • Top 25 SEO Blogs 243 Comments
  • 101 Blog Tips I learned 177 Comments
  • 30 Traffic Generation Tips 351 Comments
  • 6 Ways to Speed Up Your Site 51 Comments
  • 9 Hacks to Show Readers Your Best Stuff 21 Comments
  • 50 Simple Ways to Gain RSS Subscribers 145 Comments
  • The Best Website Taglines 127 Comments
  • What Is Success? 57 Comments
  • How to setup a 301 Redirect 52 Comments
  • The 7 Characteristics of Good Domains 76 Comments
  • 7 Ways to Promote your Site 133 Comments
  • Top 25 Celebrity Blogs 44 Comments
  • What Is A Blog? 81 Comments
  • Blog Setup: 40 Practical Tips 57 Comments
  • 10 Tips To Write Your Most Popular Post 79 Comments
  • The Blog Post Checklist 75 Comments
  • Interview: 12 Top Online Entrepreneurs 98 Comments
  • What Is Bounce Rate? 42 Comments
  • 20 SEO Terms You Should Know 28 Comments
  • How To Choose A Blog Name 15 Comments
  • 10 Tips to Sell Your Website on Flippa 37 Comments
  • Top 25 Web Design Blogs 80 Comments

Online business done right. Take your marketing efforts to the next level with tips and resources to get visitors to your website.
As featured
CNBC copyblogger problogger Entrepreneur Lifehacker Hubspot Business Insider Wordpress Showcase
Privacy Policy| Terms of Service | About | Contact

777 Brickell Ave #500-14648, Miami, FL, 33131, US
DBT Logo
DBT is an independent website. The views expressed on this site may come from individual contributors and do not necessarily reflect the view of DBT or any other organization. All Content Copyright ©2006-2023. Daily Blog Tips unless otherwise noted or credited.