Website Performance Tips: CSS Improvement

It is weird to hear the CSS can also impact on website performance. But it is true, badly written CSS or unorganized CSS selectors can impact the site performance.

This post will help you to reduce CSS file size so that it can get downloaded faster by browser and also help browser to render HTML element effectively to reduce page load time.

Selector Usage

The organization and usage of selector impact the performance. 

The order of CSS selector by their usage efficiency is

• ID, e.g. #cp-r
• Class, e.g. .sel
• Type, e.g. div
• Adjacent sibling, e.g.  div + span
• Child, e.g. li > ul
• Descendant, e.g. li a
• Attribute, e.g. [type="input"]
• Pseudo-classes/-elements, e.g. a:hover

By this order ID is more efficient selector then class, but practically there is not much difference between ID and class selector but organization and usage of selectors is important.

Suppose you have a webpage with number of paragraphs

and there is one div with ID as "cp-r” for a Article and this Article div has two paragraphs now we want to apply style to Article’s paragraphs. therefor we can write CSS style as

#cp-r p{...} 

This works fine but this kind of selector spent more time on rendering the style for Article's paragraphs.

Problem is that the browser reads selector from right to left. Therefore it reads the paragraph first rather than ID, that is why it access all paragraph first then look for its parent.

To get complete usage of selector we will add common class name to Article’s paragraphs

Like 

<div id='cp-r'>

  <p class='cp-p'> ... </p>

  <p class='cp-p'> ... </p>

</div>

And in CSS we will write selector as

#cp-r .cp-p{...}

What will it do? Browser will search only ".cp-p" class selector first, in this case it is only two times.

Over qualifying selectors also impact the performance and always try to reduce over qualifying selectors. The over qualifying selectors look like this

body div #cp-r p{…}

Here there is no use of body and div selector because all of the work end at ID “cp-r”, this kind of style force browser to find all div elements of body.

Always try to find selector which won’t force browser to do unnecessary work.

Put CSS inside HEAD

Adding CSS inside HEAD will improve the webpage performance. This allow browser to render page progressively .browser renders contents as soon as it fetch it from network. it gives user a feedback that contents are appearing in browser.

If CSS is at bottom of HTML then browser wont render the html with given style until it fetch all contents and user see the plan HTML and after browser downloads the CSS it flashes the HTML with style which would create a bad impression for user.

Selector Names

There is much difference between server side programming and client side programming. such as variable names, for server side programming I can write a variable name for a customer profile object as

$customer_profile_record 

but for client side like in CSS I would like to write variable name as

.cp-r {} (in css)

<div class=”cp-r”> (in HTML)

The reason behind this kind of naming convention is that the variable name at server side should be descriptive so that other team members can understand it when they refer it.

But on client side (CSS, HTML) it should not be as such descriptive because a long and descriptive variable (CSS selector) name can increase the CSS file size.

Therefore CSS selector name should be short. For reference you can inspect Google website for CSS selectors name.

Reduce redundancy

There will many cases you will find style is getting repeated. 

Consider following style

.parent { width: 200px; height: 100px}

.child-1 { width: 200px; height: 100px}

.child-2 { width: 200px; height: 100px}

Here parent and child elements are having same style.

It can be reduced by adding a common class 

 .wrapper{ width: 200px; height: 100px}

and can use it in HTML as

<div class='wrapper'> <!-- parent -->

  <div class='wrapper'><!-- child -->

  </div>

  <div class='wrapper'><!-- child -->

  </div>

</div>

In one more case you can find the redundancy, when image sprite is used for different HTML element.

in this case same background image is used to different HTML elements 

.element-1 { background-image: url('image-sprite') ... }

.element-2 { background-image: url('image-sprite') ... }

.element-3 { background-image: url('image-sprite') ... }

.element-4 { background-image: url('image-sprite') ... }

.element-5 { background-image: url('image-sprite') ... }

it is unnecessarily increasing the CSS file size , it can be reduced by having common background image stlye and use it in each required HTML elements. 

like

.sprite { background-image: url('image-sprite') ... }

In HTML

<div class='sprite '>

</div>

....

<div class='sprite '>

</div>

....

<div class='sprite '>

</div>

There would be much other case where you will find the redundancy. Therefore try to minimize redundancy and decrees the CSS file size.

Remove unnecessary CSS code

Remove unnecessary CSS code which is not going to use for requested webpage.

Some time we keep a common CSS file to whole website like 'main.css' and add each style in it. Problem with this is, it increases the CSS file size. Homepage does not need whole website style, it needs only required style.

Or sometime we create different CSS files for each module of a website, but include them inside homepage. Which will increase the page load time because browser try to download the unused CSS files.

Avoid CSS expression

CSS expression is useful for adding style dynamically but they are evaluated more often as we expect. Expression can evaluate on page re-size, scroll or mouse move event.

It is better to use jQuery to add dynamic CSS style rather than CSS expression.

Minified CSS

Always try to minify the CSS file. it will help to remove unnecessary CSS code and improve the page load time.

There are many tools available online to minify the CSS file. like  YUI compressor.

Try to reduce the CSS file size and use selector effectively.

Hope this post would help to increase website performance.