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.

Next post

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

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

Return to top.