This page is a log of major improvements to this website.
Optimize Index Page Load Time
The time is 2024-04-17. I suddenly decided to improve the load time of this site.
I used the following settings when testing: Speed Throttling: GPRS. Cache Disabled.
Adding a single <link rel="preload"/> tag for the external link indicator brings the index page’s load time from 2.56s down to 1s! The order of tags inside <head> is actually important! Tip: put the most important CSS files first.
P.S. The emulated GPRS speed seems faster than I imagined.
Lume News
In case you haven’t visited the about page of this website, you now know that this website is made with Lume.
Lume now has a content-management system and a template-based file-creation system. Although I don’t need either of those features, you should check it out!
SVG Icons
I got this idea from staring at the nav bar of https://play.date/.
background-image is a thing of the past. (-webkit-)mask-image is better, which, along with background-color: currentColor, allows text-colored SVG icons to exist.
These are the icons: . You can find them on the table of contents page, with or without JS.
One caveat when using mask-image: url(image.svg#id): #id can only target a SVG shape such as <path>, not other elements like <g>.
Decreasing Build Time
2024-06-26
I got tired of waiting for my website to build, so I made it build faster.
I had to rerun all the measurements when the machine is under the same load with hyperfine to have a fair comparison. Time is really subjective…
Before, it takes 4.499 s ± 0.147 s to build.
Removing inline and esbuild cuts the build time down to 3.588 s ± 0.095 s.
Replacing remarked with markdown-it and rewriting articles with katex in Djot reduces the build time to 2.878 s ± 0.097 s
And the final build time is 2.790 s ± 0.089 s. I forgot what I did. Mostly cache busting, I think.
See the author of Lume teach me how to profile Lume.
Making /sitemap/ Javascript free
2024-07-14
There’s not much to talk about this, except that I can now claim my website can be view 100% Javascript-free!
Remove title="" from everything
Also 2024-07-14.
title="" is invisible inside mobile browsers, so I replaced all of them with plain text. e.g. from <abbr title="desc">what</abbr> to what (desc) or desc (what). In some rare cases, I opted for aria-label="desc".
I had to completely redesign (read: use text instead of symbolism) the whole nav bar.
I hope this makes my website more accessible to visual-only readers.