The illusion of a zero load time
Last summer, I started learning web development through an online course called The Odin Project. As I got more comfortable with web standards and user interface design, I decided to build something personal: my own website.
As a content creator with over 1 million followers across Instagram, YouTube, TikTok, and Snapchat, and over 10 million monthly views, I wanted a site that truly reflected who I am. The result is a 4-page website featuring a homepage, about me, portfolio, and sponsor info.
One of my favorite parts is the portfolio page, where I showcase my artwork using a parallax effect. But early on, I ran into a major performance problem: the page took ~30 seconds to fully load. Lighthouse was giving me a performance score of ~20%.
After some digging, I realized the issue—too many large PNG files. I converted them to WebP, a modern image format that uses better compression with minimal quality loss. This brought my score up to ~50%, but load times were still noticeable.
So I optimized further. I used the “useEffects” hook in React to pre-load all WebP image objects after the homepage loads. Since most traffic enters through the homepage (linked in my social bios), this optimization ensured that images would be ready by the time users reached the portfolio.
The result? Lighthouse score over 90%, and near-instant image rendering
Check it out here: https://artbyaalice.netlify.app/