Andrew Howden

This Site

This site is where I undertake a lot of my web experiments. You can see it on GitHub, however if you're curious, a brief summary of the various technologies used is below. It's not an exhaustive list, however, it's some of the things I think are most interesting at the minute.

TL, DR

Page speeds fetch from Google Analytics on 1/6/16 for "/"

Metric Average
Document Interactive 1.14s
Content Loaded 1.13
Page Load 2.06

I'm quite unhappy with the above. Looks like the service worker has been broken for a while - haven't set up JS error log pushback just yet. I've since fixed the service worker, and anticipate those to drop to around 300 - 400ms on average.

Testing Score
PageSpeed Insights (desktop) 89/100
PageSpeed Insights (mobile) 73/100
Qualys SSL Report A+
Lighthouse PWA 84/100

ServiceWorker

This site has a service worker sitting between the browser and the network, and is configured to serve most content from the cache if it's available. This has a number of interesting benefits:

  • The site is extremely fast, after the first page load DOMContentLoaded in 74ms, and Load in 142ms.
  • The site is available offline.

However, this comes at the cost of not having the most up to date content on the first refresh. This is solved by deploying a new version of the service worker when content is update. While this doesn't in and of itself show the new content instantly, it'll display a toast notification to the user indicating new content is available.

This is also only available in Firefox and Chrome. IE is getting support soon, and Safari might do it eventually. You can learn more here:

Is service worker ready

Try visiting this site on mobile, and then switching it to aeroplane mode. If then visit this random link, it'll show a "network error" page as opposed to a 404.

Web App Manifest

The web app manifest is a requirement to be prompted for the Chrome on Android "add to home screen". It shows a nice splash screen while the site is loading, a nice icon on the homescreen and a title on the homescreen of my choosing.

As an aside, I'm quite excited about the future of progressive web apps, and feel confident that investing in the related technologies now will pay dividends in future.

Kubernetes / Docker

Kubernetes is a cluster management system, loosely based on the Borg container system used to run infrastructure at Google. Kubernetes provides APIs to manage the lifecycle and deployment of applications, as well as introspection about your application.

Kubernetes runs Docker containers as its simplest managed unit. In particular, This site runs on NGINX and Picfit.

Picfit

A golang image server. The favicons required for the manifest.json are generated; they never exist client side.

CSS Variables + PostCSS

Trying to move away from meta tools around web technologies such as jQuery, SCSS and other niceties and work directly with the browser APIs. They're pretty damned good these days!

HTTP/2

The site both runs and is optimised for H/2. If you don't have a H/2 connection you're going to have a bad time; generally, most people will have one, though.

If you're curious whether you're on a H/2 connection and you're using the Chrome browser, you can visit the following URL:

chrome://net-internals

TLS, Backed by Lets Encrypt

All connections to this site should be either encrypted over TLS, or a redirect to the encrypted version of content. Further, andrewhowden.com uses HSTS including subdomains. This makes the requirements for TLS stricter, and does not allow the site to be served any longer over an insecure connection for browsers that support HSTS.

The site is part of the HSTS preload list for most modern browsers, meaning browsers with more modern lists will never connect to it over an insecure connection. This saves a few valuable round trips!

The certificates are generated by Lets Encrypt, and automatically renewed by other software running on the cluster.

Bower

Bower is a nice framework for handling frontend dependencies.

Google Cloud

The site runs on Google Cloud infrastructure. More particularly, the site runs on a Google Container Engine (Kubernetes) cluster, and is sitting behind Google Cloud CDN.

Others

  • NGINX
  • Hugo
  • ReST
Written On
26 Jul 16 20:50 +1100

© Andrew Howden, 2017
Curious about how this site works? See the article