The Slog A development blog by Liam Siira

State of the Slog

- Posted in misc

Anyone who knows me knows that I'll go to insanely extreme lengths in order to optimize my server/code base without complicating my build system or compromising my source code's readability. This post is an overview of how I have this website set up. Starting with the basics, I have a pretty bog standard LAMP server set up and that server delivers quite a few different websites.

For Apache, I configure all my virtual hosts to import a generic 000-include.conf file that contains my htaccess protection, all my compression/caching rules, and most importantly, a few redirects. I hate having multiple copies of the same file to maintain, like every single one of my sites uses the Synthetic hexagonal background. I don't want to have multiple copies of that library in each of my document roots. Most people would set up a CDN or something, but that requiries the client's browser to negotiate a new connection. That's a delay. So instead, my apache installation redirects ALL requets that start with /cdn/* to a specific shared document root on my server with a few interesting points I'll talk about later. I also have Apache redirect all error requests to a specifc PHP document that checks if the request is a sitemap, robots.txt, or something similar. If it is, it will deliver a default copy of that document, or if not, a cool stylized error page.

Utilizing some super tiny PHP scripts, I've also enabled a type of JS, CSS, and webfont compression. In fact, if you look at the sources for this site, the file nocturnal.js doesn't exist on my server; it was generated upon request (or a cached version is servered) from a number of other smaller JS scripts. The webfont is similar, it combines a number of webfont.css files together. However that webfont script allows me to decide by the URL request which font families I need, much like google fonts does. On other sites, you can see a core.js in my sources. That is a PHP file that does the exact same thing but for my javascript files.

The webfont files are also an insane decision I made. For each one of those files, I actually opened the woff(2) files and removed all the glyphs that I as an english speaker will never type on my own website. Some of those files with from 80-90kB down to about 26kB.

I only use JS libaries that I can handle modifying to only contain the features that I need. The github activity feed utilized mustache.js and while mustache is cool, it's a few hundred lines too big. Instead I found a tiny library called T.js to accomplish the exact same thing. I also use BarbaV1 as it's a much smaller library and I cut a lot of it's code out in order to make it even smaller as well. I accomplish the syntax highlighting in the code documentation pages via a modified and optimized (imo) version of Lolight.

Back to List