Why we don’t have a parent selector

With work, I’ve had to do quite a bit of examination of performance. We run a number of tools over an application to determine where the bottlenecks are. One such application is Google Page Speed which provides a number of recommendations to improve JavaScript and rendering performance. Before I get into its recommendations, we need to understand a little better about how browsers evaulate CSS…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

How to Micro-Optimize Your CSS

In this article you’ll learn how to write leaner, cleaner CSS using 10+ micro-optimization techniques. The basic idea behind micro-optimizing your CSS involves writing clean code, eliminating extraneous characters, and reducing overall file size. And you don’t have to rely on an automated script to do everything for you. Instead of writing lazy, sloppy, bloated code and then just dumping your hideous CSS into an automated minifier, it’s better to understand and practice as many micro-optimization tips as possible, given your particular coding style and specific project requirements…

VN:F [1.9.22_1171]
Rating: +1 (from 1 vote)

Efficiently Rendering CSS

I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it?

This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an article about best practices. Google is also always on a crusade to make the web faster. They also have an article about it.

Let’s cover some of the big ideas they present, and then discuss the practicalities of it all…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

15 Ways to Optimize CSS and Reduce CSS File Size

I have gathered a long list of CSS optimization and file size reduction techniques that have been using by most designers/developers. Depend on the complexity of your CSS code, these techniques might greatly reduce your CSS file size, or maybe just a few kilobytes…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Best Practices to optimize CSS – an academic exercise

Many of the tips in this article are tiny micro-optimizations, one thing to keep in mind when going overboard with optimizing. You should never sacrifice maintainability or extensibility for optimization experiments. Consider this article more like an academic exercise rather than real-life optimization tips.

It should also be noted that if you need to speed up your web site, don’t bother with CSS optimization. There are much better places to focus your attention to. The point of this and all optimization articles is to consider an optimization in context, not in isolation…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

To Sprite Or Not To Sprite

The basic idea of CSS Sprites is to combine a number of images used on your site into a single image, thus reducing the number of HTTP requests that need to be made to your site. The image is rendered using a CSS background and background-position (which, incidentally, means that your markup becomes more complex; the image to use is specified in CSS, not in a plain tag).

The biggest problem with CSS sprites is memory usage. Unless the sprite image is carefully constructed, you end up with incredible amounts of wasted space…

VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)