• Shyamala Prayaga

Tips of optimizing CSS for better performance

For creating a better user interface, CSS plays very important role in terms of presentation. Here are some tips to optimize the CSS for better performance.

Tip #1: Reduce the number of HTTP requests made for image resources. Reducing the number of HTTP requests has the biggest impact on reducing response time and is the easiest way to improve performance.

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coordinates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image.

This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used.

Tip #2: Use shorthand properties to optimize your CSS (including font, background, margin, and border). Rather than declaring all CSS properties and increasing the size of CSS file, it’s good practice to use shorthand properties to group properties of a common set eg (font, padding, margin)

Like instead of writing margin-left:5px; margin-top:3px; margin-right:4px; margin-bottom:5px;

We can write margin:3px 4px 5px 5px;

Tip #3: Use shorthand hexadecimal colors or names, whichever is shorter.

Rather than writing #ffffff we can write #fff Similarly #ff3366 can be written as #f36

Tip #4: Group selectors with the same declarations CSS allows you to group multiple selectors that share the same declaration. This optimization technique allows you to apply the same style to multiple elements to save space.

So div#main {border:1px solid #ece;} div#sidebar {border:1px solid #ece;}

Becomes this:

dive#main, div#sidebar { border:1px solid #ece; }

Tip #5: Group declaration with the same selectors CSS allows you to group multiple declarations for the same selector into one rule set, separated by semicolons. This allows you to apply multiple declarations to one selector to save space.

So

body {font-size: 1em;} #mainContainer {font-family: arial, helvetica, sans-serif;} #mainContainer {color:#000000;} #mainContainer {background:#ffffff;}

Can be written as

#mainContainer { font-size: 1em; font-family: arial, helvetica, sans-serif; color: #000000; background: #ffffff; }

#css

PRAYAGA
SHYAMALA
  • LinkedIn Social Icon
  • Twitter Social Icon

A little something about me!

 

My name is Shyamala pronounced as shaa-ma-la and I am a UX evangelist with 19 years of experience as a UX designer with hybrid skills of UI and UX. I have experience in UX and UI designing on both mobile and desktop applications and have been part of designing some award-winning mobile applications. 

I am a civil engineer by education and before moving into user experience I worked as an architect with a construction firm for 2 years. My passion for design and building great things for users pushed me into the UX domain. I am a self-made UX designer with no formal educational background into UX, but my passion helped me enter and succeed in user experience.