Performance and You: Course Correct CSS Complications

Avoid @import

Never use the @import directive to include external style sheets because it blocks parallel downloads. This is an archaic practice. Instead, always use the link tag.

Concat & Minify Stylesheets

Concatenating your style sheets into one file and sending out a minified version can drastically reduce the size of your CSS.

Select Selectors Selectively

Using the descendant selector forces browsers to check all of your descendant elements for a match, so they can create more problems than they revolve. Universal selectors can also be rather costly, so steer clear of them too. Use shallow selectors when possible.

Use Discretion When You Inline

Don't bother inlining everything within your HTML file as this will cause the initial HTML doc to increase in size and thus take longer for the TTFB.

Reduce the Size of your Stylesheets

The smaller your style sheets are, and the fewer selectors they contain, the less work browsers will have to perform when rendering your webpage. Therefore, you should do your best to remove unneeded selectors, leverage utility classes and avoid duplicate CSS code. You can use a tool such as uncss to make sure your style sheet contains only the requisite CSS code.

Avoid Expensive Properties

Certain CSS properties are significantly more expensive than other ones, so they should be used conservatively. These are a few properties to watch out for:

It's not a problem to use the above properties here and there, but if they appear hundreds of times per page, then your overall CSS performance may suffer.

Preload or HTTP/2 Push Files

The preload resource hint tells browsers to fetch resources earlier than they would otherwise. To give your CSS a head start, set it as a link tag in your HTML document like this:

<link rel="preload" href="/css/someStyleSheet.css" as="style">

Alternatively, you can include preload as an HTTP header in your server configuration:

Link: </css/someStyleSheet.css>; rel=preload; as=style

If your server is configured for HTTP/2 (which it should be) preload will be interpreted as a server push. KeyCDN also supports server push which will help even further accelerate the delivery oh high-priority CSS files.