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.
