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)

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.

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.

PRAYAGA

SHYAMALA

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.