Why I'm leaving Astro for 11ty

#webdev #astro #11ty #performance #ssg

Astro is a great tool and currently exploding in popularity. But I'm leaving it for 11ty, which is much older and less shiny. Here's why.

What I used on my website in the past

Originally, I used Next.js for my website. Then I switched to Astro. After I learned more about Vue, I switched to Nuxt.js. Because Nuxt.js was too slow, I switched back to Astro.

Why I'm leaving Astro

Build time & package size

Astro's build time is quite fast, but it's still slower than 11ty. 11ty makes the time from commit to seeing the changes on the website much shorter. Astro takes 35-50 seconds, while 11ty takes 12-17 seconds. This is not only because of the faster build time but also because of the smaller package size.

Control

11ty lets me control everything. I can use any template engine I want & I can structure everything the way I want. While Astro integrates with many component libraries, it's still opinionated about the structure of the project, the way you write layouts and injects code into the site. For example, Astro adds generator meta tags to the site and bundles the JS and CSS files. Astro also bundles JS for view transitions by default. I want a more minimalistic approach.

Performance

Astro is made to be used with component libraries and makes it harder to add script tags wherever you want. As I want maximum performance, I want to stick to vanilla HTML, JS and CSS as much as possible. 11ty is better for this. (Check out my update at the end of the post to see the performance improvements.)

Other changes to my website

Less styling

I try to keep as close to the default browser styles as possible without making the website look ugly. My style.css is only 77 lines long now and only does these things:

Tags

While I still tag my posts and you can still see all posts with a certain tag, I removed the tag list and the explanation texts on the tag pages.

Less featured posts

I now feature less posts on the homepage so that the website is less cluttered.

Webmentions everywhere

I added webmentions to all pages so that everyone can interact with all my content.

No more Giscus comments

Giscus was a good comment system, but it doesn't fit the style of my website and is a whole Next.js app that I don't want to load on every page. Therefore, I removed it.

Conclusion

I'm happy with my decision to switch to 11ty. It's faster, more minimalistic and gives me more control. I also simplified my website in other ways.

Update: Performance improvements

My privacy friendly analytics report that the time to load the page has decreased from 1-4 second to 0.5 seconds. So the switch to 11ty was worth it.

Thanks for reading! If you have any questions or comments, comment below. I'd love to hear from you! You may also fix errors or suggest changes in the GitHub repo.

Jak2k