How to make your CSS smaller on your website

Posted on by Samy Coenen 3 mins read

Table of Contents

  1. Why should you make your CSS smaller?
  2. Guide: How to implement optimisations
    1. Step 1: Keeping CSS locally or externally
    2. Step 2: Combine CSS files
    3. Step 3 Compress CSS files
    4. Step 4: Styling above the fold

Why should you make your CSS smaller?

There are a few possible reasons for trying to make your CSS files as small as possible. The main reason is to get your website a higher ranking on search engines like Google, Bing, DuckDuckGo or others… . Those search engines rate websites based on a lot of factors, this includes the loading speed. If your website is bloated it can get very slow on devices with a slower internet connection.

If all your website assets are as small as possible, everyone wins. The users have a better experience, search engines get to link to faster websites and you as a website owner get a lower hosting bill as the data that needs to be transferred is less.

When using Google Chrome or Chromium you can simulate a slower device by doing the following steps:

  1. Go to your website.
  2. Open Page Inspect by right-clicking anywhere on a website and clicking “Inspect” or using the shortcut “Ctrl+Shift+i”. Chromium right-click
  3. Now open the Network tab Network tab
  4. Finally select how much you want to throttle your page and reload. Network throttle

Guide: How to implement optimisations

Step 1: Keeping CSS locally or externally

The first step when trying to optimise your CSS resources is to decide if you have external CSS files that you can keep internally.

Reasons for choosing to keep them externally are:

  • Users always obtain the most up-to-date version available.
  • Quicker access due to usage of faster servers or a content delivery network (CDN).
  • It’s cheaper or free to use than hosting it yourself.

Some of these reason might not apply to you, for example if you’re already hosting your website on a content delivery network (CDN). The biggest reason for keeping the CSS files internally is so that the amount of connection requests is lower because only 1 file needs to be retrieved.

In the network tab you can click on the CSS button so that you only see the downloaded stylesheets. Download the ones that you want to host yourself. network tab

Step 2: Combine CSS files

Now that you have your CSS files in the CSS directory, you can combine them with your terminal and a simple shell.

cd /css
cat * > main.css

Step 3 Compress CSS files

Use yuicompressor to remove redundant declarations in your single CSS file. Yuicompressor can be installed using the package manager for Python, Pip.

pip install yuicompressor
yuicompressor main.css > main.min.css

Step 4: Styling above the fold

Many CEO tools also recommend to only load a small part of the CSS when first opening a website so that low-speed mobile connections have a smooth experience on your website. There exists a tool that will examine a HTML webpage at a certain resolution and output the needed CSS. The only thing that you need to do is use a program called “Critical”.

You can install it with NPM.

npm install -g critical

And then go your site’s root folder and execute it with the following parameters for 1080p:

cd $WEBSITE_ROOT
critical index.html --minify true --width 1920 --height 1080

Because this CSS is relatively small, you can just put in the section of your HTML webpage so that there is only 1 download instead of 2.

Please don’t hesitate to ask questions below or to post suggestions and alternatives.