Although some things can still be improved, I am very happy with these results. These high speed scores show that you can really achieve good performing sites using lightweight systems such as Jekyll. In the remainder of this post I give a small overview of some of the changes and the techniques that are used to build this site.

No more jQuery / less JS

The old website used jQuery on every page for some basic functionality. Now only the interactive posts load jQuery as some of the scripts and libraries depend on it. These scripts are of course loaded asynchronously. All other/regular pages only use vanillajs for some basic functionality. Removing jQuery has greatly improved the overall page load/rendering time.

New design, better CSS loading

I discarded all the old CSS and started from scratch using the Bootstrap 4 reboot and grid builder mixins. All styles are written in Sass and compiled using node-ass and PostCSS. loadCSS is used to asynchronously load the css and critical for generating the above-the-fold inline css.

In three steps all css is generated from my base files:

# Convert sass to css
node-sass <input> --output-style compressed --output <css output>
# Add necessary vendor prefixes
postcss --no-map.inline --use autoprefixer postcss-flexbugs-fixes -o <input> <css output>
# Compute the inline css (for above the fold)
node inline-css.js

The inline-css.js file is a small node script that uses critical for generating the above-the-fold CSS. The generated css is included in the head by Jekyll automatically. In fact, different versions of the above-the-fold css are generated depending on the page type.

var critical = require('critical');

// Example of generating above the fold css
critical.generate({
    base: '../',
    src: '_site/index.html',
    dest: '_includes/critical-css.css',
    minify: true,
    width: 1300,
    height: 900
});

Privacy-aware analytics

While I used Google Analytics to register traffic on my website, I do not mind people blocking this. To still get some sense of traffic a small script registers whenever someone visits a page. This script discards the IP address of the visitor (and other user info) and only logs the page and (if possible) the country of origin.

Blog software

The blog and all of the pages are powered by Jekyll (now using version 3). I use some small tweaks to further optimize the build, such as minimzing all html output at build time. Posts are annotated using Schema.org to structure the data for search engines.

Hosting

The site is (still) hosted using GitHub Pages and CloudFlare is used to optimize the delivery (and cache as much as possible in one of their edge nodes).

Feedback?

So far for the updates! As the site is still new and actively developed, any feedback is welcome. Please add a comment below if you have any tips or found a bug. You can also use the contact form. Thanks :)

Today we kick-off with SVG icons!

The problem

Font Awesome is a great free icon font which doesn’t require an introduction. The list of included icons is large and the ease of use makes it a great choice for web applications.

However, on a blog like this most users will only visit a few pages at most. Most traffic comes from search engines and visitors are probably looking for an answer to a specific question. So, to cater for these users we need to optimize the performance as if every users stats with an empty cache. This is in contrast to more high-feature web applications that engage users for a longer amount of time.

To improve performance the first strategy is to improve loading of the website. This includes the amount of requests, the total size of the page and the rendering.

After a small search I found out that my theme used Font Awesome for the staggering amount of four icons. In other words, to display 5 icons a user needs to load the Font Awesome css and the font itself. We can do better right?

Icon definition list

A few of the simple icons (such as a downward facing arrow) I replaced with HTML entities (such as ↓). The more complex icons (Github/LinkedIn icons as an example) were a bit harder to replace. My solution was to create a small SVG icon library in the Jekyll theme.

Using a tool such as IcoMoon you can easily generate SVG symbols for common-used icons. The Github and LinkedIn icons for example give the following definition:

<symbol id="icon-linkedin" viewBox="0 0 1024 1024">
  <title>linkedin</title>
  <path class="path1" d="M384 384h177.106v90.782h2.532c24.64-44.194 84.958-90.782 174.842-90.782 186.946 0 221.52 116.376 221.52 267.734v308.266h-184.61v-273.278c0-65.184-1.334-149.026-96.028-149.026-96.148 0-110.82 70.986-110.82 144.292v278.012h-184.542v-576z"></path>
  <path class="path2" d="M64 384h192v576h-192v-576z"></path>
  <path class="path3" d="M256 224c0 53.019-42.981 96-96 96s-96-42.981-96-96c0-53.019 42.981-96 96-96s96 42.981 96 96z"></path>
</symbol>
<symbol id="icon-github" viewBox="0 0 1024 1024">
  <title>github</title>
  <path class="path1" d="M512.008 12.642c-282.738 0-512.008 229.218-512.008 511.998 0 226.214 146.704 418.132 350.136 485.836 25.586 4.738 34.992-11.11 34.992-24.632 0-12.204-0.48-52.542-0.696-95.324-142.448 30.976-172.504-60.41-172.504-60.41-23.282-59.176-56.848-74.916-56.848-74.916-46.452-31.778 3.51-31.124 3.51-31.124 51.4 3.61 78.476 52.766 78.476 52.766 45.672 78.27 119.776 55.64 149.004 42.558 4.588-33.086 17.852-55.68 32.506-68.464-113.73-12.942-233.276-56.85-233.276-253.032 0-55.898 20.004-101.574 52.76-137.428-5.316-12.9-22.854-64.972 4.952-135.5 0 0 43.006-13.752 140.84 52.49 40.836-11.348 84.636-17.036 128.154-17.234 43.502 0.198 87.336 5.886 128.256 17.234 97.734-66.244 140.656-52.49 140.656-52.49 27.872 70.528 10.35 122.6 5.036 135.5 32.82 35.856 52.694 81.532 52.694 137.428 0 196.654-119.778 239.95-233.79 252.624 18.364 15.89 34.724 47.046 34.724 94.812 0 68.508-0.596 123.644-0.596 140.508 0 13.628 9.222 29.594 35.172 24.566 203.322-67.776 349.842-259.626 349.842-485.768 0-282.78-229.234-511.998-511.992-511.998z"></path>
</symbol>

Note that each symbol has a unique id, we will use this later to include the icon on any page. We can place these icons at the top of every page, just below the body tag:

<body>
<svg style="display: none">
  <defs>
  <!-- all your icon definitions -->
  </defs>
</svg>

<!-- remainder of page -->

Last we need some CSS to make sure the icons display correctly. Don’t change the width and height values, by setting them both to 1em we can later scale the icons properly using font-size.

.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor
}

Using the icons

The only drawback of this method is that including an icon is a bit more work than the Font Awesome approach. But, when you’ll get used to it you won’t see the difference. Instead of the convenient fa fa-icon classes we use an inline svg element:

<svg class="svg-icon">
  <use xlink:href="#icon-github"></use>
</svg>

<!-- Examples showing larger font sizes: -->
<span style="font-size: 1em;"><svg class="svg-icon"><use xlink:href="#icon-github"></use></svg></span>
<span style="font-size: 2em;"><svg class="svg-icon"><use xlink:href="#icon-github"></use></svg></span>
<span style="font-size: 3em;"><svg class="svg-icon"><use xlink:href="#icon-github"></use></svg></span>

<!-- Example with color: -->
<span style="color: darkred"><svg class="svg-icon"><use xlink:href="#icon-github"></use></svg></span>

If you added everything the snippet above will show the following:

Additionally, you can apply many of the same CSS effects to these SVG icons as you would with normal text. Only text-specific things such as text-decoration or font-style won’t work.

Conclusion

I really loved working with FontAwesome in previous projects. But, for this blog, replacing the icons with their SVG counterpart made a large difference in performance. For (small) blogs such a change can be done very quickly as the set of used icons is often limited. For larger applications this could result in a larger rewrite of your codebase. But, given all the benefits I wouldn’t be surprised if more websites would do the same. To quote Github :

By switching from icon fonts, we can serve our icons more easily, more quickly, and more accessibly. And they look better. Enjoy.