Home » How to reduce css file size

How to reduce css file size

Problem

Wouldn’t it be great if SharePoint Designer or Adobe Dreamweaver could strip out redundant CSS… basically flatten the cascade of styles into a single stylesheet? After all, browsers do this every time they load a page, overwriting CSS selectors and keeping only the styles necessary to render your page. Here’s how to reduce css file size.

ScrapBook:

ScrapBook is a Firefox Add-on by haselnuss. It will download all of the images, CSS and background images (there’s an option to download javascript too). Just navigate to a page of your site and go to ScrapBook > Save Page:

Scrap Book
Then, click on the page from the list of saved pages. This pulls up a local version of the site on your computer. Navigate to that location — for example, to “/Users/myhomedir/Library/Application Support/Firefox/Profiles/9016ir67.default/Scrapbook/data/20110507134246/” — and you’ll find a complete list of all the images, styles, and whatnot in that folder. You can set it to download javascript too.
path

Next, open up the index.css file in that folder. Voila! It contains “interpreted” or “flattened” CSS, which is greatly reduced in size. Finally, replace your original CSS file with the contents of this page. Then check your document across other browsers.

One drawback is that it only does this one page at a time. So be prepared to save four or five of your pages and then merge the CSS files manually or by using something like MS Word’s “compare documents.”

Dust-Me Selectors:

Not as good as Scrapbook because it simply ‘tells’ you which selectors are repeated. It will spider through the entire site; Scrapbook will not.

Leave a Reply

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


*