Optimising CSS For Improved Page Load Speed

Use Shorthand Properties

You may already be doing this, but just in case you are not, this is an important property that will take things to a new level. It may in fact be the easiest thing that you will be able to do that will cut down your code along with the time that it takes to put the code in. Doing this is efficient and it will make things a lot better for you.

For example, lets say you wanted a border at the top and bottom of one element, and on all sides of another element:

.border {
    border-bottom-color: black;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-color: black;
    border-top-style: solid;
    border-top-width: 1px;
}

We can save 154 bytes here (excluding whitespace) just by using shorthand properties:

.border {
    border-bottom: 1px solid black;
    border-top: 1px solid black;
}

There's a great tutorial on shorthand CSS properties on Sitepoint which goes into a lot more detail if you need it.

Use Tabs

While whitespace can be removed quite easily by a minifying tool, this isn't appropriate for everyone, especially on websites which aren't generated by a build tool. Whitespace is important for readability when it comes to your CSS code, but each character of whitespace is an extra byte. If you indent your code with spaces, consider replacing them for tabs. People that use spaces generally opt for 4 spaces, which is an additional 4 bytes for every indented line. Replacing each of these 4 spaces for 1 tab character will look the same while editing the file, but will save 3 characters for each indented line. In a large CSS file, this saving can be significant.

Clean Up Your Frameworks

If you are using a CSS framework for your website such as Bootstrap, then you've probably got loads of CSS rules that you're not actually using. Every extra rule that is in there takes time for the browser to download and parse. However, it's very cumbersome and time consuming to manually scrape through a CSS framework and decide if each of the rules are actually used or not. This becomes even more difficult when you're using the minified version of the framework (and if you're not using it, you should be!).

For example, the size of Bootstrap 4.0.0 (minified) is 142kb. We often find find websites are actually using less than half of the bootstrap library! Cutting this down could instantly save a good 70kb of CSS code that would otherwise need to be unnecessarily downloaded and parsed.

Fortunately we built a tool for doing this automatically. Feel free to sign up for a free account, and we'll scrape your website to find all your CSS files, and work out which rules are being used in your HTML and Javascript files. The free account is limited to scraping 100 pages, but this should be enough to find all the used rules on a small site. You will also need a paid account to download the optimized files, but the free account will at least show you which rules are being used and which ones aren't.

Enable Gzip

If your website doesn't already have Gzip enabled, it should. Gzipping is often handled automatically by your server software, and when a browser that supports Gzip encoding requests a text file (which includes all HTML, CSS and Javascript), it will compress the file automatically, usually cutting the file size by a whopping 70-80%!

How you enable Gzip depends on what type of webserver you're using:

For Apache servers, GTmetrix has a quick tutorial which only involves editing your .htaccess file.

For Nginx, most tutorials fail to properly enable Gzip for Javascript files by omitting the commonly used "application/javascript" content type. This snippet includes "application/javascript", and can be added to your server block in /etc/nginx/nginx.conf

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Remove Old Vendor Prefixes

You know those vendor prefixes which look like this:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

These are useful ways for browsers to introduce new CSS properties before they become mainstream. We often need to use them when new properties come out, but they tend to get left behind once the main property becomes mainstream. In this example, we can remove the "-xxx-" properties because the main "transition" property is now mainstream.

Can I Use is a great resource for checking if a property is available mainstream or not yet. We can see the global support for CSS3 transitions, along with the "unprefixed" support. The unprefixed support is currently only 0.1% lower than the prefixed support, which means only 0.1% of users won't see the transition. For this 0.1% of users who won't see the transition, they are most likely using an outdated browser and will be used to not seeing transitions across the whole internet. Our advice: don't make your 99.9% of users using an updated browser download code to serve the 0.1% that won't update their browser or switch to a more standards-compliant browser.

Defer Loading Your CSS

This one is a little more tricky but can have some great results. Unless your website has a build process that can automate this for you, it's best to leave it to your most important landing pages.

The idea is to work out exactly which CSS rules are required to render your above-the-fold content (the part of your page that can be seen without scrolling). This subset of your CSS is called the "critical path".

The next step is to inline your critical path CSS into a <style> tag inside the <head> tag in your HTML. This means the browser doesn't need to download any external CSS files before it can render what the user will initally see.

The last step is to make sure your main CSS file eventually gets loaded, so the rest of the page renders correctly. There isn't currently a well supported standard for doing this, but all browsers supporting HTML5 allow putting your <link> tag to your CSS file at the end of the body which will allow the rest of the page to load before downloading your non-critical CSS file.

Merge Your CSS Files

Some people recommend splitting your CSS into different files that might be used on different pages. However in our experience, most people use the same set of CSS files on all their pages. Having multiple files means the browser has to download lots of individual files.

This overhead of downloading lots of CSS files will mostly be solved by HTTP/2's connection multiplexing which can download multiple files in parallel, but this is still only supported by 80% of browsers at the moment which isn't quite high enough to rely on yet. Even with HTTP/2, there is still a small overhead of making an HTTP request for a different file, the server having to load the file either from disk or from it's cache and sending the response.

Thankfully, merging CSS files is pretty straightforward. Just copy/paste the contents of each of your CSS files into one big file, and just reference that one file everywhere.

Summary

Optimising CSS code can seem daunting at first, but with a few simple steps you can greatly improve your page load speed.

If you want to see what sort of percentage of CSS code our tool might be able to remove for you, go ahead and sign up for a free account and get started today.