CSS Tips to Improve Page Loading Times

Page loading times is an important factor in ranking well in a variety of search engines, plus is also extremely important for the end user of a website. These days we all want everything straight away and we do not want to wait too long for webpages to load, if sites are too slow, there is a good chance that your clients will decide to go elsewhere for the information that they are looking for.

As this site is dedicated to CSS, we are going to cover a few options that you could do with your CSS files that will speed up the load times of your website. We will not be looking at other possibilities to speed up your site, such as: Using a CDN, optimizing images, HTTP caching etc.

Tip 1 – Convert Images to Data URI

One way to improve your page load times is to convert all of your small images to data uri, by doing this you’ll be loading the images when you load your CSS files thus preventing making separate requests for each image. Since your CSS file is cached by the browser, there will only be one HTTP request instead of all individual HTTP request for each image.

Tip 2 – Use Image Sprite Sheets

Another tip, again dealing with images, you can add all of your images to a single sprite sheet. Basically what we are doing is joining all images into a single file, by doing this we will only be making one HTTP request instead of the numerous requests for each image. An easy way to create the image sprite is to use a sprite sheet generator, as luck would have it, we have one on this site!

Tip 3 – Use Shorthand Properties

By using shorthand properties, what we are achieving is using less properties in our CSS files. A few popular properties that you can use shorthand values are: padding property, margin property, font property and border property. An example of the padding shorthand property can be seen below.

/* Declaring individual properties */
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

/* Padding shorthand property */
padding: 10px 20px 30px 40px;

/* By using the above shorthand, we reduce the code by over 50% */

You can check out an early post we wrote about CSS shorthand properties.

Tip 4 – Convert Colors to 3 Digit Hex

A small saving of code can be achieved by converting certain color codes to 3 digit hex code, such as #000000 (black) can be reduced to #000. I believe there are 48 different 6 digit hex codes that you can convert to 3 digit hex codes. Now obviously this is not going to make a huge difference, but every bit counts towards speeding up your site.

Tip 5 – Format CSS Code

The final way that we can speed up our site is to format your CSS code. We all code our CSS they way we like, I for one prefer to use the following approach:

.class {
   property: value;
   property: value;
   property: value;
}

By coding this way, I find it clean and easy to find code if it needs to be changed. However, if we change our code to the following:

.class {property:value;property:value;property:value;}

We will be able to make our CSS code more compact and therefore will be making the CSS file smaller in size. Similar to Tip 4, we don’t save a huge amount of space, but it is quite surprising how much smaller some files can be made, generally you could make the file smaller by anywhere between 10 – 30%, just by placing the properties on one line. Check out our format css code generator to help with this tip.

Well that’s all that I can think of at the moment, but if I can think of other ways that we can increase webpage load times with CSS, I will update this blog post.