5 tips for super-fast CSS

[Rss Bot 1]

Have you thought about the size of your site's CSS? If your style sheet is ballooning, it could be delaying page rendering. 

• 3 top tools for testing web performance

Though CSS isn't the largest asset type you'll serve, it's one of the first that the browser discovers. Because the browser is blocked from rendering the page until CSS is downloaded and parsed, it must be as lean as possible. 

Here are five tips to help you get there.

01. Use shallow selectors

Your parents told you that shallowness isn't a virtue, but when it comes to CSS, they're wrong. Used consistently, shallow selectors can trim kilobytes off big style sheets. Take this selector:

This could be expressed more succinctly:

As well as helping to keep your CSS svelte, the browser will also render the elements targeted by shallow selectors faster. Browsers read selectors from right to left. The deeper the selectors are, the longer it takes for the browser to render and re-render the elements those selectors are applied to. For complex DOMs that reflow often, short selectors can also cut down on jank.

Ideally, you want selectors to be as shallow as possible, but this doesn't mean you should cut everything down to the bone. Sometimes you need additional specificity to extend components. Strike the right balance, but be pragmatic, too.

02. Use shorthand properties

Using shorthand CSS will speed up your site

This seems like common sense, but you'll be surprised at how often longhand properties are used needlessly. Here's an example of some longhand properties in use:

That's a lot of CSS! Let's tidy that up:

The font shorthand property condenses several declarations into a handy one-liner that takes up much less space.

In the example shown above, the shorthand uses about 40 per cent less space than its longhand equivalent. It's not as readable at first glance, but the syntax becomes second nature after you've spent some time using it.

Of course, font isn't the only shorthand available to you. For example, margin can be used in place of longer properties such as margin-top, margin-right and so on. 

The padding property works the same way. For more ways to clean up your CSS, Mozilla Developer Network offers a helpful list of shorthand property references.

What if you need to override a value further down in the cascade? For example, let's say you have a heading element that needs to change its font size for larger displays. 

In this case, you should use the more specific font-size property instead:

This isn't only convenient, it also increases component flexibility. If any other part of the underlying font property is modified, those changes will percolate up to larger displays. This works great for component overrides where a new context requires a different treatment.

03. Use the preload resource hint

The preload resource hint can give the browser a head start on loading your site's CSS. The preload resource hint tells the browser to initiate an early fetch for an asset.

You can set it as a <link> tag in HTML:

Or as an HTTP header in your server configuration:

In both of these scenarios, preload gives the browser a head start on loading /css/styles.css. Using preload in an HTTP header is preferable, since this means the browser will discover the hint earlier in the response headers, instead of later on in the response body.

Another reason to use preload in an HTTP header is that it will initiate a server push event on most HTTP/2 implementations. Server push is a mechanism by which assets are preemptively pushed to the client when requests for content are made, and it offers performance benefits similar to inlining CSS.

Server push isn't available on HTTP/1. However, using preload in an HTTP/1 environment can still improve performance.

04. Cull redundancies with csscss

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations

It can pay to check your CSS for duplicate rules with a redundancy checker. Take the Ruby-based tool csscss, for example.

Ruby users can install it with:

Once installed, you can examine your CSS for redundancies like so: 

This command lists which selectors share rules that you can de-duplicate to save space:

You can move duplicate rules under one selector: 

You'd be surprised at how much space this process can save in large projects. Use the --help option to see more commands you can use to tweak things further.

05. Go the extra mile with cssnano

cssnano takes your nicely formatted CSS and runs it through many focused optimisations

For the cherry on top, you can use cssnano – a node and PostCSS-dependent tool. cssnano not only minifies CSS, it makes many focused optimisations that can reduce your CSS even further.

Install it on your system with npm like so:

Then use it to optimise your CSS:

If running commands ad hoc isn't your style, you can automate cssnano with a build system. Here's how to use cssnano in a gulpfile:

The buildCSS task reads the CSS you write in css/styles.css, then pipes the optimised output to the css/optimized directory. The watch task kicks off buildCSS whenever changes occur in css/styles.css.

The watch task can then be invoked in the terminal like so:

With some tweaking, you can build a workflow that performs this specific optimisation in addition to other CSS-related tasks, such as building Sass/Less files, autoprefixing and more.

This article originally appeared in net magazine issue 292; buy it here!

Related articles:

• Understanding the CSS display property
• How to create a pyramid layout with CSS Shapes
• 5 of the best resources for learning HTML and CSS

View the full article