Debunking CSS Performance Myths

Certain CSS Selectors are no longer as much of a performance concern as many developers may have once thought. With the ever-changing browser landscape we know that browsers are now faster and smarter than ever before.

Here is a list of the common CSS Selectors in order from lightest to heaviest and as we can see at one point it would have been recommended to avoid such selectors.

 

Rank Selector
1. ID
2. Class
3. Tag
4. General and adjacent sibling
5. Child and descendant
6. Universal
7. Attribute
8. Pseudo-classes and elements

 

Now, however, we don’t really have to worry about selector performance. As mentioned above browsers have evolved. Actually, Google doesn’t even worry about it anymore. A good tool to measure website performance is Google’s Page Speed Insights. In 2013 Google actually removed the common “Use efficient CSS selectors” rule. Keeping optimized images, leveraging browser caching, and minifying internal and external files is much more important when it comes to performance boosts on a website.