Astro for My Portfolio: A Simpler Path to Speed and Performance

Image provided from Astro.

Let’s be honest, every web developer has a website – right? It often feels like a must-have, and if you’ve built one, you might have created it to help land a job and then… well, let’s just say you haven’t touched it in ages! I get it. I’ve been there too – getting bogged down with a full-time job or other projects and not having the time to keep my portfolio up-to-date. That’s where Astro came in for me.

Astro is a JavaScript web framework optimized for displaying static content and reducing JavaScript overhead sent to the client. It’s perfect for content-driven websites like blogs, marketing, and e-commerce.

Astro’s content-driven optimization, flexibility, smooth development experience, and website performance made it the ideal solution for creating a fast, maintainable portfolio that truly represents my work.

My Portfolio

The first version of my portfolio was built with Next.js, another modern framework built on React. I haven’t touched it since I built it. It no longer accurately reflected my skills and experience, and it desperately needed an upgrade.

When planning my portfolio’s update, Next.js would require a major version upgrade and continued use of the current framework was a consideration. However, the way I built it wasn’t easily maintainable and would require significant refactoring. I figured it was time to consider a new framework centered around static content – pretty much all the content on my site.

There are several frameworks out there that easily perform static site generation. I looked at Hugo, 11ty, Astro, and even a similar framework to Next.js, SvelteKit. SvelteKit matches many of the capabilities, but it too is primarily a single page application full-stack framework. Out of the many options, Astro looked like the framework of choice.

Why Astro?

Features and Flexibility

The main reason I chose Astro was the amount of features it provided and its flexibility. During research, a key criterion was ease of refactoring. All of my components and pages were written in React, and although it wouldn’t be difficult to replicate with another UI library like Svelte, it would just be time-consuming. Astro is UI-agnostic, meaning it can support React, Svelte, and several other UI libraries with its integrations. This makes Astro extremely flexible and easy for potential future upgrades and refactoring.

Astro’s integrations are plentiful, including support for numerous UI libraries, official Markdown support, and adapters for various backend services for server-side rendering. With official Markdown support, it will make my portfolio easy to update with new info and I shouldn’t have to worry much about the integration not being maintained. Yes, Astro isn’t just a static site generator; it’s a full-stack framework that can also perform server-side rendering based on its Islands architecture.

Performance

Since Astro is optimized to produce static files and reduce JavaScript sent to the client, pages load fast. The payload sizes of the pages should be smaller, which in turn leads to faster loading and is even better for mobile clients on cellular data.

I compared the updated and the first version of my site to see how much Astro increased loading speed. This test wasn’t an accurate framework-vs-framework test, but the initial loading time of the home page increased by 679%.

Comparison Table: Displays stats for each version. V2 lazy-loads images, so there’s another row for a closer comparison. Measurements for each are displayed as (total size / transfer size).

Developer Experience

Getting started with Astro was easy. There are many templates or themes, free and paid versions, displayed on their site to choose from. Astro comes with its own CLI to help build and preview the website. Here are some of the features that made building with Astro a joy and easy for me:

• Astro has an official language-server
• Content Collections: Built-in Markdown parsing that uses “zod” for type-safety
• Built-in image optimization
• File-based routing: Very intuitive and easy to understand your sitemap
• Astro pages and components: Astro looks very much like Svelte, except build code is in front-matter tags and script tags are truly for client-side scripts.

Conclusion

After rebuilding my portfolio website with Astro, I haven’t been disappointed. I feel the framework has all the features to be flexible for the project’s foreseeable future and be easily maintainable with Markdown content. If your site is content-driven, I would highly recommend giving Astro a try.