Code along with me as I upgrade my website to Astro 3.0! It’s 30% faster and more powerful than ever. We’ll explore new features like view transitions, image optimization, JSX Fast Refresh, and so much more.

Here are the highlights of what we’ll cover:

• Upgrade packages: We’ll upgrade all our Astro dependencies to the latest version of 3.0. We’ll also make sure the site still builds, runs locally, and deploys successfully. This update includes a 30-75% performance boost for Astro components and a 30% build time reduction.
• Image Optimization: Astro now supports image optimization out of the box. We’ll update the site to use the new built-in <Image> component and explore the new image optimization features. I ended up reducing the size of some of my images by over 90%!
• View Transitions: We’ll experiment with the new web platform API that unlocks native browser transition effects between pages, without any JavaScript required. The goal is to morph the post thumbnails between page routes.

Overall it was a fun stream! I had some hiccups with the new View Transitions API but once we figured it out it turned out great! You can view all of the work in the pull request.

View pull request