I'm really into optimizing my web projects, and the idea of creating a lightweight site led me to develop one that fits on a floppy disk. Currently, my site is only 0.55MB, which means I could technically save two copies on a single floppy disk! I've made several optimizations like using Rive-Lite (which saved me about 375k), tree-shaking ChartJS (about 60k), trimming my favicon in Gimp (around 14k), and optimizing my SVG logo with a tool I found (4k saved). I'm looking for more suggestions on how to optimize further without abandoning React entirely. And yes, I know referencing floppy disks ages me a bit!
4 Answers
Floppy disks really were the original save icon, right? It's awesome to see your dedication to size optimization. It's definitely something clients appreciate since size can add to costs. Keep up the good work!
You've done a great job so far! If you're looking for even lighter options, consider switching to Preact. It's a slimmed-down version of React that could help you reduce size even more!
Thanks for the tip! I'm definitely going to check out Preact. I'm currently using Rive for animating my avatar, which is kind of like a modern-day Flash, so finding a lightweight solution would be fantastic!
You might find inspiration from an older challenge where developers created web apps under 10kb. Check out the site a-k-apart.com for some solid ideas!
Keep pushing those boundaries! Imagine getting it to fit on a 5.25" floppy disk—now that would be legendary!
LOL yes! The good old days when floppies were actually floppy. Challenge accepted!
Haha, exactly! I spent a ton of time trying to use my SVG as a favicon too, but it ended up being just as much extra JavaScript as the size I saved by cutting down my favicon. Crazy how that works!