Comments on: How to Optimize CSS Selectors for a Faster Website

By: Omer Greenwald

Omer Greenwald — Tue, 27 Jul 2010 16:04:19 +0000

Hi @None – when using h4.meta the browser search for all h4 tags (which is not necessary less time than searching for the meta class) and then, in addition, it will activate a second filter of class meta. This 2 actions will take longer to process than just looking for all meta class objects.

Regarding EMs vs Pixels. I’m not sure which resolution change you refer to in that example, but pixels are the native measurement unit in which the browser renders, so using EMs will always take a bit longer than using pixels because it adds a conversion task to the browser rendition.

By: None

None — Tue, 27 Jul 2010 15:02:22 +0000

By the way, ems are faster for development when you need to change all typography on a site. You just change your base font size definition. Pixels are not guaranteed. If you change the resolution settings in Windows from 92/inch to 126/inch, you will get a nasty surprise if everything you develop is pixel based.

By: None

None — Tue, 27 Jul 2010 15:00:16 +0000

How did you measure this to be “faster”?

Your conclusions are wrong. Using “.meta”, a browser will scour the DOM for EVERY element and then test the class for a match. Using “h4.meta”, the browser will only test the h4 elements.

By: Blogging Tips, DoFollow Debate, and Web Design Tips Weekly Round Up April 05, 2009 | Evolutionary Designs

Tue, 06 Apr 2010 04:40:30 +0000

[...] How to Optimize CSS Selectors for a Faster Website – CSS is one of my favorite languages to use while designing a site or optimizing it for better speed. There is so much you can do with it. One easiest thing you can do to speed up your site is change the way CSS selectors are code for a site. Omer wrote a great tutorial about CSS Selector optimization using Dreamweaver. [...]

By: element321

element321 — Mon, 05 Apr 2010 19:20:06 +0000

That good. When I am creating from scratch, I tend to use pixels.

By: Omer Greenwald

Omer Greenwald — Mon, 05 Apr 2010 18:59:08 +0000

Thanks man. Another thing I recently learned about CSS: EMs are no longer necessary for font-sizes and other elements as they were before, and it’s recommended to go back to pixels for better rendition.

By: element321

element321 — Mon, 05 Apr 2010 18:43:59 +0000

Omer great write up. I just recommend this to one of my clients to help speed up their site. I didn’t get the chance to work with the client on that project, but its about time to start cleaning my CSS and remove all the useless code.

By: Paul

Paul — Sat, 27 Mar 2010 18:45:08 +0000

Amazing suggestion! My website could use a revamp or two, but I wouldn’t have to worry about optimizing it. I got http://www.mroptimization.com to help me with that, but I also believe website design is a big thing

By: Elegant Themes | Paradox Equation

Elegant Themes | Paradox Equation — Fri, 19 Mar 2010 05:51:57 +0000

[...] How to Optimize CSS Selectors for a Faster Website | WebTechWise [...]

By: You are now listed on FAQPAL

You are now listed on FAQPAL — Tue, 16 Mar 2010 22:13:11 +0000

How to Optimize CSS Selectors for a Faster Website…

Browsers render optimized style sheets faster than messy ones. Therefore, making your CSS code as short and clean as possible is an efficient method to improve page loading time….