Speed up your web pages via the CSS file.

As a Web designer, there are some rules that you have been acquainted to. One of the first being: “store all layout and graphics in a separate CSS file”. Nothing bad in this one. Knowing that a CSS file is downloaded once or updated if needed in a browser’s cache, this speeds up pages and adds more semantic through the separation of layout and content. All the good basics of CSS.

It happens that the content of a CSS file can easily grow. On some large websites it’s no surprise to see CSS files running over a thousand or two and even more lines. At the end of the day, a CSS file might in itself reach some 80kB or go over that. In France, the recommended “accessible” page weight limit is 27kB. So with an 80kB CSS file you’re just shifting the data bloating problem to another file. Its still here. So, this is my little trick to reduce CSS file weight. This will have, as a consequence, a positive result on your page loading time.

The Tool

One of my favourite editors is PsPad, lightweight, easy to use and packed with a whole bunch of useful elements. One of these is the ability to reformat the CSS/HTML in structured or inline format. A lot of tools do that too but PsPad is just one of those but allows me to manage whole projects in one go making it really handy.

The Trick

The simple trick is to actually structure the data of the CSS file then throw it to the inline version before uploading it to the server. Structuring the data is useful to clean the file. The CSS parser in PsPad realigns the code and structures it with the relevant tabs as well as drops all empty lines and redundant spaces. This increases readability.

Afterwards just reformat the CSS file content into “inline”. Here the tool will reformat the whole content to have each node on one line only per node. The file loses a bit of readability but gets improved in terms of spacing, hence reducing the filesize. Take a look at the 2 screenshots below. The first shows the weight of the layout.css file with structured content and, the second, the same file with inline content. The file size change is rather surprising:

More ?

This small tutorial is but a mere trick to lighten up your file weight. Other solutions exist, solutions that would allow you to get those precious kB off your visitors’ shoulders with a view of proposing fast pages which would help them choose to convert on your site. On of them would be to use CSS shorthand and don’t forget precious tools like YUI. A good mix of those and techniques like the one presented here would surely help your pages load faster.

Tags: CSS, fast web pages, how to speed up a website, loading time

Category: CSS, Featured, Resource Depot, Resources, Tools, Tutorials