November 18, 2009 0

Make Your Website More Efficient By Splitting CSS

Telepathy
By John Botica

css_organizedA while back I wrote a post on prepackaged CSS and I thought it time to do another one on Cascading Style Sheet (CSS) organization. Essentially what I want to drive home in this post is that, splitting your CSS code helps keep things organized for you, your client and future developers. As an added bonus to this, it also helps decrease page load time. So you get more organized code and it helps your page load faster! Awesome sauce.

I used to write all my CSS code in 1 very large file, always adding more lines for new pages or rewriting styles due to variation. This can lead to a very bloated and heavy file, not something you really want to deliver to a client, nor very efficient. You want to give them clean code that is light, and easy to edit in the future. Hopefully you retain your client and are the one to do the work, but honestly that does not always happen. You want to give them the cleanest most organized code that you can give them. It makes it easier to edit in the future and is your mark as a good developer.

Say you have 1 large file with all your CSS code in it for your site. Each time you make a change to it you have line upon line to scroll through, some text editors will even halt up a bit after you get to a few thousand lines of code. When the file loads, styles that are not used are still parsed through. Why load styles you are not using?

If you split your CSS code up into multiple files, organized by site section or feature type, it will be easier to manage in the future. Imagine using an accordion folder to organize your files. Only the CSS code needed for each section is placed in the appropriate slot. Each section would have CSS code unique to it in it’s own file. You won’t be loading unneeded CSS code on every page and you will save load time. Of course, you will want to have a general file that has any CSS code that is globally used on every page. In the future, if you, your client or any future developer needs to edit the layout of the website, the CSS code is now in a very organized in a partitioned format that is easy to find and edit.

Now to that time saving bit I mentioned. I ran a little test before writing this blog post to see how and if splitting CSS code improves a pages load time – it does. I setup a test on a sub-directory of our site and pushed some files up to see what the results would be. I then used FireBug to test the file load times. Below are posted the averages of 20 tests each. You can see that when you split your CSS code into chunks it saves on load time.

I had 1 normal CSS file (77kb – pretty hefty) loading on the page at an average of 1.66 seconds. When I split that file into 3 smaller chunks they loaded in an average of 0.95 seconds. Simulating the need to not load all the CSS code, I removed 1 file from the group of 3. The average load time for 2 files was 0.91 seconds. Web servers typically maintain 2 HTTP requests at a time, so loading 2 files of equal size of 1 will take less time.

I increased the single file size to 305kb, this would be in the circumstance of an extremely large project, and the average single file load time was 2.1 seconds. When split into 3 chunks, load time decreased to 1.53 seconds and with 2 of 3 files 1.46 seconds. You can see that when you split the file you are taking advantage of the 2 simultaneous HTTP requests and reducing load time.

You may be thinking, the load time is negligible, but when you take into account mobile devices where bandwidth is much slower and limited, this makes a difference.

So as you can see, splitting your CSS code up not only helps keep things more organized, but saves load time. You only load what you need for that page, and your files are in an easy to identify and organized format. This makes the code easier to update, it minimizes the time spent searching and takes less time to adjust – less time spent updating saves you money.

Some resources you might find valuable for CSS organization:

Comments 0

There are no comments for this post so far.

Leave a Comment