I've always been a strong believer in lightweight, simple web pages that don't do more than necessary. That's not to say I want a plain text document with no styling at all, but rather a website that doesn't rely on a massive CSS or JavaScript framework to offer basic functionality. This line of reasoning is why I chose a static site generator in the first place - why on Earth would you need server side processing or a database for a website that never changes?

Wyam makes it really easy to start out. Choose a recipe, a theme, and you have good looking website. The only issue is that all of the stock themes are very heavy. For example, the theme I initially chose, CleanBlog, loaded 8 CSS files, 8 JS files, and 6 fonts, totalling 728.45 KB (328.73 KB gzipped) in resources. For comparison, the page itself was 9.72 KB (2.16 KB), meaning the resources to support the page where almost 75 (152 gzipped!) times bigger than the page itself. And keep in mind, almost all of these dependencies were minified.

And what are all of these dependencies used for? To be honest, I'm not really sure. After a cursory search, I couldn't find any use of the worst offender, d3.js (148 KB). Two RSS icons are displayed by Font Awesome (100 KB). Trianglify.js and Please.js (25 KB) are used to dynamically generate the background. Highlight.js (63 KB) could be useful if you have a lot of code examples. jQuery (84 KB) animates the hamburger menu. Then Bootstrap (156 KB) offers basic styles.

The dependence on these libraries means parts of the site will break without JavaScript. No backgrounds, no icons, and no navbar on mobile.

After seeing this, I decided to make my own theme from scratch. The result is PlainBlog, a simple blog theme designed to be slim and light.

Out of the box, it loads a single CSS file that's 1.75 KB minified. On ociaw.com, I've included an SVG background as well, adding an override.css and the SVG file itself. Additionally, I minify all HTML and CSS automatically. In total, 4 requests vs 23, and 7.39 KB vs 728.45 KB.

There's still improvements to be made. The minification is fairly basic, and can be improved. The CSS files can be bundled, and using HTTP2 Server Push can reduce the number of requests to 1 or 2. In the future, I might add syntax highlighting using highlight.js. Ideally, though I'd like to do that through Wyam instead, but that could require quite a bit of work.