Tag: Performance

My website wasn’t slow. At least, it didn’t feel slow. But after moving it to Netlify and taking a closer look at the numbers, I realised I was asking browsers to do more work than they needed to, and I was serving far more data than I thought.

I’ve been on a mission to improve performance since I migrated this site to Eleventy, especially after I realised I was burning through bandwidth once I moved to Netlify. Some of the biggest offenders were the animated illustrations I use across the site. They look great, but they ain’t cheap.

I mentioned earlier that I’ve been replacing the WebP images on my website with AVIF to reduce file sizes and decrease bandwidth usage. But when I started converting my portfolio images, I noticed something odd. Some weren’t smaller—they were bigger. Sometimes much bigger.

The images on my website have changed formats several times over the decades. JPEG, PNG, and GIF were designed in a very different era of computing, and their compression methods reflect the technology available at the time. Formats such as AVIF, HEIC, and WebP use newer techniques which can preserve more apparent detail while storing less information.

Most days, my website sits there quietly, publishing writing, showing off my work, selling a few products, and generally behaving itself. But today, I got an email from Netlify telling me that, although my migrated website was only days old, I had already burned through 50% of my allocated monthly bandwidth.

I’ve been making a load of small changes to this website recently, and I knew that it needed a proper tune-up, especially on mobile, where performance really matters.

This week I’ve been diving deeply into how I approach projects, using a recent design for Zombie Hunt as an example. Yesterday, I wrote about catering for small screens. Today’s all about performance and accessibility considerations when coding my designs.