CSS performance optimization in 5 easy steps

1. Use inline styles

If a given style is used only on a single, specific page element -- such as an image slider or carousel -- and that component is used on only a few pages in the site, use an inline style instead of a universally-loaded CSS file. This will not only reduce the size of the external stylesheet, but also the number of CSS selector evaluations that happen on pages that do not use the component.

2. Use specific styles

Don't apply styles to universal selectors, descendent selectors and top-level HTML elements. Doing so can trigger many Boolean evaluations. Instead, optimize CSS performance with selections on a more fine-grained element, such as a single class style.

3. Optimize CSS with WebComponents

The WebComponents framework is a relatively new, standards-based approach to create reusable components where JavaScript and styles are self-contained and isolated. When you keep the styles required by a component outside of a globally shared CSS file, you won't see any performance effect on other areas of the site where unused style applications would needlessly consume clock cycles.

4. Split up your CSS files

If many of your CSS files are tailored to a specific browser or device, break those styles into multiple CSS files. At runtime, load only the ones that are necessary.

This CSS performance optimization tip will require either some client-side JavaScript or server-side processing to accomplish, but the benefits to users will be worth the extra effort.

For example, if mobile and desktop renderings are significantly different, this can potentially reduce the number of document object model (DOM) evaluations by 50% on each device type.

5. Reduce the size of your DOM

The tricks used to split up your CSS file can also be used to reduce the size of your DOM.

Another CSS performance optimization tip is similar to splitting a CSS file into multiple, device-specific files. Instead, you can also shrink the size of the webpage itself, reduce the number of DOM elements in the HTML and subsequently speed up client-side rendering.

However, the problem with processing CSS is not only the number of styles that need to be applied to a page, but also the number of DOM elements on the actual page. Many modern webpages that employ a responsive design load the HTML source for both the mobile and the desktop experience on every page request. Instead, use a client-side JavaScript or even a server-side technology to ensure that superfluous HTML isn't loaded onto a page that would never use it. This can significantly reduce the DOM size along with the number of style sheet evaluations the page needs to go through.

Style sheets are the modern website developer's best friend, but they often come with a hidden performance cost. Follow these five CSS performance optimization suggestions and reduce the possibility that your CSS selectors will be the performance bottleneck on your website.