Last post

Last post, I talked about a second Siteimp report that showed a pretty good performance increase, but indicated that my contact page was much bigger and slower than average. It was the third biggest individual page on my entire site and that’s pretty pathetic for a page with one form and two links.

Rethinking Font Awesome

A few posts ago, I wrote:

“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.”

Maybe not. I’m adding 10 kilobytes to every single page and only using it on my contact page. Looking through all my acquisition data, my contact page doesn’t acquire many new users. My blog posts do. Using Font Awesome on one page doesn’t provide any really savings because my users have to download the entire font before they even load anything. It’s time to make some changes.

Revisiting head.html

In the third post, I made some changes to how browsers download and process the CSS on hluska.ca. At the end of that post, my head.html contained (Everything in {{ }} is a Hugo command. I’ll eventually write more about Hugo):

<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>

When I dug into the listing of all the pages, I saw that Font Awesome was a little more expensive than I’m willing to pay. So let’s get rid of it entirely and fix some commenting:

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

I’m going to use images instead.

Next post

I’m going to minify my front end code. Get set for some YAML!

The series

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

Return to top.