commit 26ca239ce05d3e54239990cb5afff5ab4daaf263
parent e6cd05efa5d9a563431198a81ac013dcc74961ee
Author: Jack Mordaunt <jackmordaunt.dev@gmail.com>
Date: Thu, 24 Sep 2026 16:49:01 -0300
site: make the front page ask for less, and for things that exist
The page weighed 888 KB and made five requests that 404'd. 530 KB of it
was a 1196 px avatar drawn in a 320 px slot, 277 KB was the whole of
FontAwesome's solid and brands families for the two dozen glyphs the site
uses, and 41 KB was a traced SVG standing in for a 32 px favicon. It is
now 100 KB. Over the 265 ms round trip from the far side of the world,
that was most of the wait.
The 404s were the theme's absolute asset paths, which are only correct
for a site served at the root: /fonts/ for the three preloaded families,
/site.webmanifest and /images/apple-touch-icon.png for files nobody ever
made. Three of them were rel=preload, so they took the highest priority
the browser has, and the fonts that do exist were then discovered from
the stylesheet a round trip later. relURL does not fix them, because it
prefixes baseURL's path onto a relative argument and leaves an absolute
one alone - so the overrides pass relative paths.
fa-regular is preloaded by the theme and used by nothing here, so it is
no longer asked for. bin/subset-fonts and bin/resize-images regenerate
what is committed; the originals stay in the tree as their input.
Diffstat:
16 files changed, 328 insertions(+), 4 deletions(-)
diff --git a/bin/resize-images b/bin/resize-images
@@ -0,0 +1,31 @@
+#!/bin/sh
+# resize-images - regenerate the derived images from their originals.
+#
+# The avatar is displayed in a 20rem (320 px) slot and the favicons at 32
+# and 16 px; the originals are 1196 px and 880 px square. Serving the
+# originals cost 530 KB and 127 KB a page, which was most of the front
+# page's weight.
+#
+# Originals stay in the repository: static/images/self.jpg is the source
+# for the avatar and static/images/self-tiny-white.png for the icons.
+# Neither is referenced by any page.
+set -eu
+
+cd "$(dirname "$0")/.."
+command -v magick >/dev/null || { echo "resize-images: need ImageMagick" >&2; exit 1; }
+
+# 2x the display size, which covers the retina screens this is likely
+# to be read on without paying for a denser one.
+magick static/images/self.jpg -resize 640x640 -strip -quality 75 \
+ -define webp:method=6 static/images/self.webp
+
+for size in 32 16; do
+ magick static/images/self-tiny-white.png -resize ${size}x${size} -strip \
+ static/images/favicon-$size.png
+done
+magick static/images/self-tiny-white.png -resize 180x180 -strip \
+ static/images/apple-touch-icon.png
+
+for f in self.webp favicon-32.png favicon-16.png apple-touch-icon.png; do
+ printf ' %-24s %7s bytes\n' "$f" "$(stat -c%s "static/images/$f")"
+done
diff --git a/bin/subset-fonts b/bin/subset-fonts
@@ -0,0 +1,71 @@
+#!/bin/sh
+# subset-fonts - cut FontAwesome down to the icons this site actually uses.
+#
+# The theme ships the whole families: 158 KB of fa-solid and 119 KB of
+# fa-brands, as woff2, for the two dozen glyphs on the site. Both are on
+# the critical path of every page, so they cost more than everything else
+# put together. Subsetted they are about 2 KB each.
+#
+# The full families in themes/hugo-coder/static/fonts are the input and
+# are never modified. The output goes to this project's static/fonts,
+# which Hugo serves in preference to the theme's copy at the same path.
+#
+# TRAP: the subset holds the icons that were in use when this last ran.
+# Use an icon that was not and the glyph is simply absent from the font.
+# Hugo does not read fonts, so nothing fails at build time. Run this
+# after adding an icon.
+set -eu
+
+cd "$(dirname "$0")/.."
+
+for t in hugo pyftsubset woff2_compress; do
+ command -v "$t" >/dev/null || { echo "subset-fonts: need $t" >&2; exit 1; }
+done
+
+full=themes/hugo-coder/static/fonts
+out=static/fonts
+work=$(mktemp -d)
+trap 'rm -rf "$work"' EXIT
+
+# Class names are resolved to codepoints through the built stylesheet
+# rather than the theme's SCSS, because the SCSS keeps them in one file
+# and the v4 aliases the site uses - fa-file-text, fa-question - in
+# another, and only the compiled CSS has applied the second to the first.
+hugo --quiet --destination "$work/public" --cleanDestinationDir
+css=$(find "$work/public/css" -name 'coder.min.*.css' | head -1)
+[ -n "$css" ] || { echo "subset-fonts: no built stylesheet to read codepoints from" >&2; exit 1; }
+
+# Everything the site can name an icon in. A class assembled at runtime
+# from parts would not be found here; nothing does that today.
+icons=$(grep -rhoE 'fa-[a-z0-9-]+' content layouts hugo.toml themes/hugo-coder/layouts 2>/dev/null |
+ sort -u |
+ grep -vE '^fa-(solid|brands|regular|fw|ul|li|stack|[1-9]x|spin|pull-left|pull-right|border|inverse|rotate|flip|lg|sm|xs|[a-z-]+-400|[a-z-]+-900)$')
+
+unicodes=""
+for icon in $icons; do
+ point=$(grep -oE "\.$icon\{--fa:\"\\\\[0-9a-f]+\"" "$css" | head -1 | grep -oE '\\[0-9a-f]+' | tr -d '\\')
+ [ -n "$point" ] || continue
+ unicodes="$unicodes,U+$point"
+done
+unicodes=${unicodes#,}
+[ -n "$unicodes" ] || { echo "subset-fonts: no icons found" >&2; exit 1; }
+
+echo "subset-fonts: keeping $(printf '%s' "$unicodes" | tr ',' '\n' | wc -l) codepoints"
+
+mkdir -p "$out"
+for f in fa-solid-900 fa-brands-400 fa-regular-400; do
+ # Subsetting writes ttf and woff2_compress makes the woff2 from it.
+ # The direct route, pyftsubset --flavor=woff2, wants a brotli module
+ # that this machine's fonttools did not have; woff2_compress ships
+ # with the reference implementation and is one package either way.
+ pyftsubset "$full/$f.ttf" --unicodes="$unicodes" \
+ --layout-features='' --no-hinting --desubroutinize \
+ --output-file="$work/$f.ttf"
+ woff2_compress "$work/$f.ttf" >/dev/null
+ cp "$work/$f.ttf" "$out/$f.ttf"
+ cp "$work/$f.woff2" "$out/$f.woff2"
+ printf ' %-15s %7s -> %6s bytes\n' "$f.woff2" \
+ "$(stat -c%s "$full/$f.woff2")" "$(stat -c%s "$out/$f.woff2")"
+done
+
+cp "$full/LICENSE.txt" "$out/LICENSE.txt"
diff --git a/hugo.toml b/hugo.toml
@@ -24,12 +24,18 @@ style = "github-dark"
info = "Coffee developer, software brewer."
description = "Coffee developer, software brewer."
keywords = "blog,developer,personal,software,robust,performance,sovereign"
- avatarurl = "images/self.jpg"
+ # 640px for a 20rem (320px) slot, so it is sharp at 2x and no larger.
+ # The 1196px JPEG it replaced was 530 KB, over half the weight of the
+ # front page. bin/resize-images regenerates it.
+ avatarurl = "images/self.webp"
# gravatar = "gravatar@sovereignlife.anonaddy.com"
- faviconSVG = "/site/images/self-tiny-white.svg"
- favicon_32 = "/site/images/self-tiny-white.png"
- favicon_16 = "/site/images/self-tiny-white.png"
+ # Relative, so relURL resolves them against baseURL: this site is served
+ # under /site/ on mordaunt.dev and at the root on jackmordaunt.com. An
+ # absolute path would be right in exactly one of those places.
+ favicon_32 = "images/favicon-32.png"
+ favicon_16 = "images/favicon-16.png"
+ touchicon = "images/apple-touch-icon.png"
since = 2025
diff --git a/layouts/partials/head/custom-icons.html b/layouts/partials/head/custom-icons.html
@@ -0,0 +1,13 @@
+{{/*
+ Overrides the theme's copy, which falls back to /site.webmanifest,
+ /images/apple-touch-icon.png and /images/safari-pinned-tab.svg - three
+ files this site does not have, so every page asked for three 404s.
+
+ The theme's SVG favicon is gone with them: the only image to hand is a
+ traced silhouette that weighs 119 KB, which is not a price worth paying
+ for a 32-pixel icon. Paths are relative so relURL follows baseURL, which
+ differs between mordaunt.dev/site/ and the jackmordaunt.com build.
+*/}}
+<link rel="icon" type="image/png" href="{{ .Site.Params.favicon_32 | relURL }}" sizes="32x32">
+<link rel="icon" type="image/png" href="{{ .Site.Params.favicon_16 | relURL }}" sizes="16x16">
+<link rel="apple-touch-icon" sizes="180x180" href="{{ .Site.Params.touchicon | relURL }}">
diff --git a/layouts/partials/head/theme-styles.html b/layouts/partials/head/theme-styles.html
@@ -0,0 +1,38 @@
+{{/*
+ Overrides the theme's copy for two reasons.
+
+ The theme preloads its fonts from /fonts/, an absolute path that is only
+ correct when the site is served at the root. This site is served under
+ /site/ on mordaunt.dev, so those three hints fetched the 404 page at the
+ highest priority the browser has, and the real fonts were then discovered
+ from the stylesheet one round trip later. relURL on a *relative* path is
+ what follows baseURL; on a path starting with "/" it is a no-op.
+
+ Only the two families that are actually used are preloaded. fa-regular is
+ referenced by @font-face and by no icon on the site, so it is never
+ fetched unless something asks for it.
+*/}}
+<link rel="preload" href="{{ "fonts/fa-solid-900.woff2" | relURL }}" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="{{ "fonts/fa-brands-400.woff2" | relURL }}" as="font" type="font/woff2" crossorigin>
+
+{{ if hugo.IsServer }}
+ {{ $cssOpts := (dict "targetPath" "css/coder.css" "enableSourceMap" true ) }}
+ {{ $styles := resources.Get "scss/coder.scss" | resources.ExecuteAsTemplate "style.coder.css" . | toCSS $cssOpts }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+{{ else }}
+ {{ $cssOpts := (dict "targetPath" "css/coder.css" ) }}
+ {{ $styles := resources.Get "scss/coder.scss" | resources.ExecuteAsTemplate "style.coder.css" . | toCSS $cssOpts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
+{{ end }}
+
+{{ if .Site.Params.rtl }}
+ {{ if hugo.IsServer }}
+ {{ $cssOpts := (dict "targetPath" "css/coder-rtl.css" "enableSourceMap" true ) }}
+ {{ $styles := resources.Get "scss/coder-rtl.scss" | resources.ExecuteAsTemplate "style.coder-rtl.css" . | toCSS $cssOpts }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" media="screen">
+ {{ else }}
+ {{ $cssOpts := (dict "targetPath" "css/coder-rtl.css" ) }}
+ {{ $styles := resources.Get "scss/coder-rtl.scss" | resources.ExecuteAsTemplate "style.coder-rtl.css" . | toCSS $cssOpts | minify | fingerprint }}
+ <link rel="stylesheet" href="{{ $styles.RelPermalink }}" integrity="{{ $styles.Data.Integrity }}" crossorigin="anonymous" media="screen" />
+ {{ end }}
+{{ end }}
diff --git a/static/fonts/LICENSE.txt b/static/fonts/LICENSE.txt
@@ -0,0 +1,165 @@
+Fonticons, Inc. (https://fontawesome.com)
+
+--------------------------------------------------------------------------------
+
+Font Awesome Free License
+
+Font Awesome Free is free, open source, and GPL friendly. You can use it for
+commercial projects, open source projects, or really almost whatever you want.
+Full Font Awesome Free license: https://fontawesome.com/license/free.
+
+--------------------------------------------------------------------------------
+
+# Icons: CC BY 4.0 License (https://creativecommons.org/licenses/by/4.0/)
+
+The Font Awesome Free download is licensed under a Creative Commons
+Attribution 4.0 International License and applies to all icons packaged
+as SVG and JS file types.
+
+--------------------------------------------------------------------------------
+
+# Fonts: SIL OFL 1.1 License
+
+In the Font Awesome Free download, the SIL OFL license applies to all icons
+packaged as web and desktop font files.
+
+Copyright (c) 2024 Fonticons, Inc. (https://fontawesome.com)
+with Reserved Font Name: "Font Awesome".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE
+Version 1.1 - 26 February 2007
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting — in part or in whole — any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Code: MIT License (https://opensource.org/licenses/MIT)
+
+In the Font Awesome Free download, the MIT license applies to all non-font and
+non-icon files.
+
+Copyright 2024 Fonticons, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in the
+Software without restriction, including without limitation the rights to use, copy,
+modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the
+following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+
+# Attribution
+
+Attribution is required by MIT, SIL OFL, and CC BY licenses. Downloaded Font
+Awesome Free files already contain embedded comments with sufficient
+attribution, so you shouldn't need to do anything additional when using these
+files normally.
+
+We've kept attribution comments terse, so we ask that you do not actively work
+to remove them from files, especially code. They're a great way for folks to
+learn about Font Awesome.
+
+--------------------------------------------------------------------------------
+
+# Brand Icons
+
+All brand icons are trademarks of their respective owners. The use of these
+trademarks does not indicate endorsement of the trademark holder by Font
+Awesome, nor vice versa. **Please do not use brand logos for any purpose except
+to represent the company, product, or service to which they refer.**
diff --git a/static/fonts/fa-brands-400.ttf b/static/fonts/fa-brands-400.ttf
Binary files differ.
diff --git a/static/fonts/fa-brands-400.woff2 b/static/fonts/fa-brands-400.woff2
Binary files differ.
diff --git a/static/fonts/fa-regular-400.ttf b/static/fonts/fa-regular-400.ttf
Binary files differ.
diff --git a/static/fonts/fa-regular-400.woff2 b/static/fonts/fa-regular-400.woff2
Binary files differ.
diff --git a/static/fonts/fa-solid-900.ttf b/static/fonts/fa-solid-900.ttf
Binary files differ.
diff --git a/static/fonts/fa-solid-900.woff2 b/static/fonts/fa-solid-900.woff2
Binary files differ.
diff --git a/static/images/apple-touch-icon.png b/static/images/apple-touch-icon.png
Binary files differ.
diff --git a/static/images/favicon-16.png b/static/images/favicon-16.png
Binary files differ.
diff --git a/static/images/favicon-32.png b/static/images/favicon-32.png
Binary files differ.
diff --git a/static/images/self.webp b/static/images/self.webp
Binary files differ.
