Introduction
CSS – Cascading Style Sheets play a vital role in helping you achieve professional and pleasing user interfaces on the web, which makes the first impression long lasting. However, as with every other technique, CSS can also slow down your site if used in the wrong manner.
Look below for ten such techniques that allow you to fine tune your website.
1. CSS Optimizers
CSS Optimization does not refer to minimizing the size of the css file. It involves a systematic procedure of creating an syntactical, organized and clutter-free file. This can be achieved with the use of utilities that are available on the web that can compress and optimize the css files and reduce them to a considerable smaller size.
Applications like CssTidy and YUI Compressor not only compress the css files by removing the whitespace; they also do additional actions like creation of shorthand syntaxes, correct css properties and their errors.
There are quite a few online websites that help you to optimize your css files based on predefine rules. Do not hesitate to try them.
Below is a screenshot of the CSS validation service offered by W3C.
Figure 1
2. Shorthand Notation in CSS?
The Shorthand notation in CSS saves a lot of effort and improves your code. Margin, padding, and font are primary candidates for shorthand notations. Note that there are many more. The following sample shows you how to create a shorthand property.
Old fashioned:
margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px
Shorthand notation:
margin: 2px 1px 3px 4px (the order is – top, right, bottom, left)
The rule of writing shorthand notation is very simple. Look below for a simple example.
CSS notation | Top | Right | Bottom | Left |
margin: 1px; | 1px | 1px | 1px | 1px |
margin: 2px 3px; | 2px | 3px | 2px | 3px |
margin: 2px 3px 4px; | 2px | 3px | 4px | 3px |
margin: 1px 2px 3px 4px; | 1px | 2px | 3px | 4px |
Note that if you do not specify any values for the property, the properties would retain their default values. The shorthand notation not only keeps our code clean, but makes the file size considerably less.
3. Use Conditional Comments
Some applications have browser specific style sheets. In such cases, load the css files conditionally. This applies very well to version-specific browsers too. The following line would load only if the browser is Internet Explorer 8.
<!--[if IE 8]> <link rel="stylesheet" type="text/css" href="ie8.css"> <![endif]-->
4. Remove Extra Line Breaks
The extra line breaks added in CSS files add humongous size to the css file. So make sure you eliminate all those unnecessary extra line breaks. But ensure that you make it readable for you and others who may use the CSS file.
5. Use CSS Versus Images
Do not use images to display text. Instead use CSS attributes and apply style to them.
5. Profile CSS Using Browser Developer Tools
At this technological era, your browser is your first test tool for profiling the performance and style of your rendered ASP.NET pages.
Google’s Chrome provides us with a richer profiling tool. It can be invoked by pressing “CTRL+ SHIFT + I”. Select the “Audit” tab, and the audits. And click on the run button. You will be presented with some results. The results are impressive as they tell you what you need to do to improve performance of your page with precise details. This involves CSS findings too.
A snapshot of Google Chrome audit results is shown below:
Figure 2