Optimize your CSS and Speed Up Your Site - EDUCATION FOR ALL

Random Posts

test banner

Breaking

Home Top Ad

Responsive Ads Here

Post Top Ad

Responsive Ads Here

Wednesday, February 29, 2012

Optimize your CSS and Speed Up Your Site

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

No comments:

Post a Comment

Post Bottom Ad

Responsive Ads Here

Pages