0x74696d

Blog Diet

January 2, 2016

It's a new year and so why not take the opportunity to revisit my site and make a few improvements? I've had a few people mention in the past that they've had some readability issues with some of the design choices (particularly on Linux). And as I've added more content I've found a few little layout quirks that I'm not 100% happy with. Let's dive right in.

The Spec

The major design criteria are:

  1. Keep page weight low (or lower!).
  2. Make the page more mobile-friendly.
  3. Improve the font weights for better accessibility.

The Audit

Partially inspired by Maciej Cegowski's The Website Obesity Crisis, I first decided to look into reducing page weight. Fortunately the original design was pretty good in this respect. The home page weighed in at 101KB, most of which were the Google web fonts. My Analytics on the Cheap was 184KB, most of the extra load coming from loading the Twitter div. An image-heavy post like Falling In and Out of Love With DynamoDB, Part II was still only 315KB. So there is some room for improvement here but not a lot.

Homepage waterfall diagram, before

I took a pass with Google developer tool's Audit feature and it noted that because I was on an HTTP/1.1 connection that I might want to combine the multiple CSS files. This is optimized for free on HTTP2, but because I'm hosting the blog on Github pages I don't have control over the server. I also noted that pygments.css is being loaded even on pages where I'm never going to have code snippets. There are an awful lot of unused CSS rules on the page too, so we can trim some garbage there. The tool also mentioned that there are no far-future cache headers applied to the assets, but again that's going to be a function of hosting on Github pages (and/or their Fastly CDN configuration). Anything we can do here is going to be a micro-optimization, but what the hell let's do it anyways.

The font weights around the menu needed some work, as did the typography on the community page.

Menu, before List of talks, before

The Improvements

Although I'm a big fan of Skeleton it's way more than I actually need for this project. There are no forms, buttons, heroes, complex grids, etc. So instead I'm keeping the same basic CSS that I had but just tweaking it to remove cruft.

I've moved the mobile.css into the base.css and used a media query. I originally thought that link media="only screen and (max-device-width: 480px)" prevented the element from loading, but that turns out not to be true for what should have been obvious reasons -- if we had a max-width criteria it would force downloading new CSS if someone resized their browser! I checked the page on my older Android tablet and realized that I want to expand the media query to cover smaller tablets as well, so I've bumped that up to 768px.

I previously failed to notice that the CSS I stole from I-don't-remember-where caused the menu headers ("posts", "projects", "community", etc.) to be hidden on mobile, so that's a quick fix. I also noticed that it did that wretched thing where it intentionally broke zooming. Sorry, fixed now!

The biggest change stylistically was removing the Lato web font that I was loading from Google. Getting rid of that dropped most of the extraneous page weight. I'm not a professional designer and that's not the focus of the blog, so I don't really care that much about "pixel perfect" design. Rather the messing around trying to find the perfect font and doubling the size of the page, I'm just going to leave it up to the reader's machine and browser and use their system fonts. The results look good on the five different devices I was able to check. They're all a bit different of course, but better designers than me picked out those fonts on those platforms so let's trust them.

And... Done!

I'm pretty happy with the results of just a couple hours of work. There is only one third-party request left on the site (the Twitter bug), and the page is a quarter the size. More importantly, it's more legible on a wider range of devices.

Homepage waterfall diagram, after

Follow.
Collaborate.
Communicate.
RSS.