Personal site: hayes.software
📱 Website URL: https://hayes.software
⚡ Speedlify performance stats: https://web-perf.netlify.app
📦 11ty template: 11st-Starter-Kit
11ty - Vite - Tailwind CSS - Alpine.js
yarnyarn devyarn buildThis site already uses Speculation rules to prefetch pages, but it also has custom js to prefetch html as well as images on those pages to more aggressively prefetch pages.
This site uses a service worker navigate between internal pages to reduce load time when navigating.
This strategy may be removed at some point since it disables bfcache.
Fonts are minified to only send a subset of the font characters, only the ones that are required. This is done with fonttools.
Subsetting and using modern font compression formats achieves ~90% font file size reduction.
Previously, I preferred websafe fonts like Verdana to avoid needing to ship any fonts. This can totally eliminate layout shifts due to the font loading. However, having an interesting font is too important to the design of my site.
Using SVG for logos both reduces file size and allows logos to be as high-fidelty as possible.
All SVG logos are defined in the HTML of the page with <symbol>, they are then referenced anywhere they're used with <svg><use></svg>. This also allows the site to have light mode, dark mode, and hover states for svg icons with a single svg image.
SVG logos are compressed with svgo to get 60-80% file size reduction.
Images are used in blog / projects posts, as they are necessary. But, outside article pages, this site was designed to avoid relying on images. This significantly decreases total page size.
In some blog posts I use svg images. This is not done for load performance. Unless the SVG image is very basic, the WebP version would probably still be less heavy. This is only done because SVGs look better due to the lack of raster compression.