What I've done in my attempts to make split.pet as small as possible, and what you can probably do too
Published 2024-11-26 (UTC)
Don’t be stupid, embrace formats like webp, avif, and jxl. If you want to keep compatibility with older browsers and devices which don’t support these formats, use the <picture> element.
Astro’s <Picture> component is what I use on this site and will do all the conversion, optimization and setup shit for you.
Stop loading a 1920x1080 image only to resize it to 300px wide in CSS. Post thumbnails on split.pet are resized to a maximum of 750px wide. If they’re “toppers”, a 10x3 image is used as a pseudo-blur.
This only applies if you have a background that isn’t just a static color.
I did not need a 14MiB Lagtrain background video. You don’t either.
If you do use a background video, make sure to strip the audio from it instead of just muting it in HTML.
Save some space by optimizing any massive background asset you may have. If it’s adaptive based on device theme, you can use the <picture> element to load a different background based on media queries.
The word “load” in the last sentence is in bold for a reason. Using media queries in CSS would only show a different image and waste bandwidth downloading an image that will never be shown to the user reading your site.
Something I also did which is extremely stupid and that probably won’t apply to you was split my background into 2 parts - a static background image, which also has an avif version, and a heavily compressed transparent webm.
This helped me shave off about 150KiB more off my website, and as a bonus, I get a static background image on browsers that don’t have support for webm/etc.
Jack helped me optimize my buttons. He has a guide on optimizing 88x31 GIFs published on his blog, which you should probably follow.
I scrapped together a basic little script for passing all of the PNGs through ffmpeg with a ton of help from Google, which helped shave off ~10KiB or so.
Fonts are fat as fuck. Use as little as possible. Removing Pinyon Script from my quotes section, though it ruined a bit of the humor, saved me ~50KiB.
If you really want to keep that font, subset it. Jack does this for the script font on his site with the subset-font package and a build script. subfont is a tool which automates font subsetting, which is what Jack uses on Etcetera’s website.
Or if you really want to conserve space, don’t download a font at all. Use a web font like sans-serif or system-ui instead.
Favicons are pretty damn big too. I don’t remember how much I saved, but resizing my .ico and .png to 32x32 and 64x64 helped to reduce my page size.
If you write TypeScript, remember to use type imports in your code wherever possible. This helped shave off ~80KiB from an enum import on my Lanyard widget.
This won’t make your site smaller, but it might feel faster. split.pet uses a background Web Worker to preload pages on hover, acting as an SPA. Notice how navigation is unnaturally quick? Yeah.
