Thinking about CSS to speed up hluska.ca

Speeding up site performance by eliminating render blocking resources

Filed under: Projects, Web performance, Speeding up hluska.ca

Last post

Last post, I talked about critical resources on hluska.ca. A Siteimp performance audit revealed that unused CSS and render blcking resources were a problem on all my pages. And since CSS files are usually considered critical resources, I decided to start off with critical resources. Now I’m going to look into my CSS files and make some decisions.

CSS on hluska.ca

All pages are built with the following three css files:

https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.0/css/uikit.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css
https://hluska.ca/css/style.css

UI Kit is critical to all my pages - it’s my base CSS stylesheet and I use it extensively. Moreover, I use too much of it to justify putting part of it the head of my document and loading it asynchronously like I’m going to do with Font Awesome later on this post.

hluska.ca/css/style.css

My own stylesheet is extremely short. It has the following rules:

a.page-link {
    color: #999;
}

a.page-link:hover {
    color: #666;
}

#blog-post a {
    color: #999;
}

#blog-post a:hover {
    color: #666;
}

figure.hca-image img {
    padding: 20px 0px 20px 0px
}

I use them enough to warrant keeping, but do they need to be their own separate sheet? As I mentioned in the first post in the series, this site is hosted on DigitalOcean’s App Platform. One limitation of App Platform is that it tells browsers to only cache static resources for ten seconds. If I’m not caching resources, is it worth downloading one more file?

It doesn’t add anything so I’m going to get rid of style.css. I open up my website’s head.html document. It is currently (everything in {{ }} is a Hugo command):

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.0/js/uikit.min.js" as="script">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.0/css/uikit.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
    <!-- /CSS -->
    {{ $title := print .Site.Title " | " .Title }}
    {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
    <title>{{ $title }}</title>
    <meta name="description" content="{{ .Description }}">
    <link rel="canonical" href="{{ .Permalink }}" />
    <link rel="icon" href="/images/favicon.ico">
    <meta name="robots" content="index,follow" />
</head>

I change it to (again, everything in {{ }} is a Hugo command):

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.0/js/uikit.min.js" as="script">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.0/css/uikit.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
    <meta name="description" content="{{ .Description }}">
    <link rel="canonical" href="{{ .Permalink }}" />
    <link rel="icon" href="/images/favicon.ico">
    <meta name="robots" content="index,follow" />
    <style>
        a.page-link {
            color: #999;
        }

        a.page-link:hover {
            color: #666;
        }

        #blog-post a {
            color: #999;
        }

        #blog-post a:hover {
            color: #666;
        }

        figure.hca-image img {
            padding: 20px 0px 20px 0px
        }
    </style>
</head>

I removed the reference to my internal css stylesheet and replaced it by putting CSS right in the head. It won’t make much of a difference but I’m interested in making this site perform as quickly as possible.

Font Awesome

I use Font Awesome often enough to make it worth keeping, but I usually use it on the bottom of pages as part of “contact me” widgets. I’m highly unlikely to ever use it above the fold so I’m going to apply a pattern to remove it from the critical path. (Please note - this was a very very bad decision)

My head.html file has not changed since I last posted it. I am going to change it like this (everything in {{ }} is a Hugo command):

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.0/js/uikit.min.js" as="script">
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.4.0/css/uikit.min.css">
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" href="styles.css"></noscript>
    <!-- /CSS -->
    {{ $title := print .Site.Title " | " .Title }}
    {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
    <title>{{ $title }}</title>
    <meta name="description" content="{{ .Description }}">
    <link rel="canonical" href="{{ .Permalink }}" />
    <link rel="icon" href="/images/favicon.ico">
    <meta name="robots" content="index,follow" />
    <style>
        a.page-link {
            color: #999;
        }

        a.page-link:hover {
            color: #666;
        }

        #blog-post a {
            color: #999;
        }

        #blog-post a:hover {
            color: #666;
        }

        figure.hca-image img {
            padding: 20px 0px 20px 0px
        }
    </style>
</head>

I changed the way that I load Font Awesome and replaced it with the following pattern:

<link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" href="styles.css"></noscript>

People with Javascript enabled will preload it. They will only process it once it’s been downloaded. Since I never use Font Awesome above the fold, this is an acceptable way for me to speed up up website without sacrificing user experience. After the CSS file has finished downloading, I null the onload handler as per this page from Google.

Wrapping it up

I made two changes to how every page on my site loads CSS files. First, I decided to get rid of style.css and replace it with CSS rules in the head of my html document. And second, I decided to download Font Awesome outside of my critical request path and process it once it has been fully downloaded.

I have made some big changes and now I’m going to run another Siteimp report and write about the results of those changes.

The series

Improving hluska.ca’s performance with a Siteimp audit
Eliminating render blocking resources part 1 - rel preload - last post
Thinking through css on hluska.ca - this post
Checking in on those changes - next post
Investigating Font Awesome on my contact page
Minifying my site with Hugo on DigitalOcean App Platform
Writing a Hugo shortcode to optimize my images with UI Kit
Final results from my site improvement program

You just finished reading Thinking about CSS to speed up hluska.ca.

It was filed under: Projects, Web performance, Speeding up hluska.ca

You can see all of Greg's articles, send him a message with any feedback or follow him on Twitter.

↑
Top

Greg Hluska