This Article IsCreated at 2024-04-18Last Modified at 2024-04-18Referenced as ia.www.b50

Various Improvements To This Website

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>.