File Size Optimizing

From CSS Standards FAQ

By using CSS and semantic HTML, you've probably optimized your file size much already compared to using just HTML, but even now there is probably a few methods you can use to lower your file size even more.

Contents 1 HTTP compression 2 HTML Optimizing 3 CSS Optimizing 4 Further Reading

HTTP compression

HTTP compression, eg. content encoding using gzip and content neogation will let you send a compressed version of your document over HTTP which is then extracted by the client, if the client supports this technology. http://leknor.com/code/gziped.php is a tool that tells you wether your document is using HTTP compression or not and if not it tells you how much you would save on using HTTP compression.

HTML Optimizing

1. Remove all comments.
2. Use unobtrusive javascript in external javascript files. This will let the user-agent cache the javascript.

CSS Optimizing

Here are some good tips on how to lower your CSS filesize.

1. Use shorthand properties. In CSS 2 there is the following shorthand properties:
   • background: [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit
   • border: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
   • font: [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
   • list-style: [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit
   • margin: <margin-width>{1,4} | inherit
   • padding: <padding-width>{1,4} | inherit
2. Don't use quotes inside url() declarations (eg. background:url(myimage.png) instead of background:url('myimage.png')).
3. Group selectors with a comma, eg. .gallery, .hentry, .hcard {<properties>}.
4. When you use the value 0, don't set the unit, because 0 is 0, no matter what unit that CSS supports.
5. If your CSS file is really big (>30kb) consider making copy of it where you remove all whitespace and comments.
6. If your pages design vary a lot from page to page, or a group of pages, you should make a default style sheet and a page/group of pages specified sheet. This is only nessecery if the page specified CSS is considerably much.
7. For color codes, use the hex code syntax rather than rgb(red, green, blue) alternative. If your hex code value looks like #aabbcc you can also use #abc instead.
8. If you use a decimal value in a 1 to -1 interval, you can omit the "0" prefix. Eg. 0.99 becomes .99.
9. The cascading feature of CSS will let your HTML elements inherit style from its parent, which inherits from its parent etc. An example of this is how the color property value you use in your body rule will set the text color for all text in your document regardless of which element it residence in with the exception of anchore elements.

Further Reading

• Automatic CSS optimizer
• mod_gzip - serving compressed content by the Apache webserver
• The Behaviour Layer: Using JavaScript for good, not evil