- 8 min to read
Building a Sustainable Website for Dodonut Using Astro JS
Discover how Bejamas used the Astro framework to create Dodonut's low carbon footprint website. Explore its unique features for sustainable web design and learn about its benefits for your own projects.
Dodonut is all about sustainability. We aimed to reflect this ethos in the Dodonut website, ensuring that not only does it look great, but it also has a low carbon footprint. After carefully evaluating various web frameworks, our team at Bejamas chose Astro to build Dodo’s website. In this case study, we'll explore why we picked the Astro framework and how its unique features make it the right fit for eco-friendly web design.
As part of Bejamas, Dodonut is a web design agency with a mission to create stunning and impactful digital products that promote environmental sustainability. Dodonut takes a personalized approach to web design, catering to the unique needs of each client. They prioritize eco-friendly design and have a thorough understanding of the complexities involved in delivering successful web design projects.
Dodonut needed a website that would showcase their approach to sustainable web design and highlight their portfolio of work, plus a blog to write case studies and other articles on the topic of UI and UX design, accessibility and sustainability. This website had to be fast and mindful of its impact on the environment.
Why We Picked Astro
At Bejamas, we care about sustainable web development and are committed to using technology that has minimal impact on the environment. That's why we used the Astro JS framework in our Jamstack architecture to create Dodonut's website.
Shall we take a closer look at the important elements that played a part in our decision?
Astro Islands Architecture
In addition to performance benefits, the Astro Islands architecture also provides better code organization and increased maintainability. By treating each component like an independent app, it makes it easier to maintain, test, and deploy. Overall, we believe that Astro's islands architecture is a game-changer when it comes to building efficient and maintainable web projects.
Low CO2 Emissions
The use of the Internet has grown rapidly in recent years and has become an essential tool for communication, information exchange, and commerce. However, the increase in online activity has resulted in a significant rise in carbon dioxide emissions from data centers, which are responsible for storing, processing, and transmitting online data.
At Dodonut, sustainability is at the heart of everything they do. So, we needed to choose a web framework that would have a minimal impact on the environment.
The Astro JS framework focuses on performance optimization. This means that websites built with Astro are faster, more efficient, and have a smaller impact on the environment compared to other solutions.
Perfect Lighthouse Score
Lighthouse is a tool used to evaluate the performance of web pages and provide recommendations for improvement. A perfect Lighthouse score means that a website is optimized for speed, accessibility, and best practices.
So, this is why having a perfect Lighthouse score was another factor that led us to pick Astro to create Dodonut's website. By using the Astro.js framework, we were able to ensure that the website would perform well and provide a seamless experience for users.
If you want to get started with Astro, check out our practical guide to Astro framework.
Our Stack and Architecture
To build the website, Bejamas used a stack that, apart from Astro, included Svelte, Tailwind CSS, Sanity, and Cloudflare Pages.
Astro is simple, fast, and lightweight. Its seamless integration with the rest of our tech stack, including Svelte and Tailwind CSS, allows us to work with ease and efficiency.
Its global fetch function makes it very easy for us to fetch the data from Sanity during build time.
We use Astro islands to manage loading page areas and increase page speed. The low-priority elements load when needed — for instance, when the user scrolls down to the element and it becomes visible on the page.
As an example, let's take a look at the Slider component on the About page. Check out the following video to see it in action:
In addition, if you need to share state between components, you'll need to look for a solution outside of Astro. For us, we found that Svelte's built-in store provided a simple solution for managing state.
Tailwind is a frequently-used tool in our development process at Bejamas, making it simple and fast to add CSS styles to our projects.
We rely on Sanity to manage the website's content, thanks to its high flexibility and ease of customization. With Sanity, creating custom documents and block types is a breeze, and we have full control over the dashboard layout and views. This allows us to adjust the data structure to our needs.
We use Cloudflare Pages to host the website, ensuring that it is fast and reliable. We also utilize middleware functions to handle form submissions, among other tasks.
Other important tools that we use in our stack include:
- @portabletext/svelte: To handle rich text content in Sanity, we use Portable Text renderer for Svelte that allows us to render this content on the website.
- @astrojs/sitemap: Our website's sitemap is generated using Astro Sitemap, which makes it easy to include all of our pages in the sitemap.
- @11ty/eleventy-img: For handling images in our project, we use Eleventy-img. This tool allows us to perform image transformations at build time and generate images in different formats, such as WebP, optimizing their loading time on the website.
Our project is built using the standard Astro project architecture.
The src directory contains all of the source code for the project, including pages and components organized using the Atomic Design pattern. The pages directory contains all of our Astro pages. The components directory consists of the various UI components that make up our application, split into atoms, molecules, organisms, and templates.
In addition, we have a lib directory where we store our API, utility functions, stores, and other shared code. The constants directory contains any global constants used throughout the project.
We also use presets, such as the Tailwind preset file, to streamline the development process and ensure consistency across the project. Lastly, our project utilizes Cloudflare functions, which are stored in the functions directory, to handle various server-side functionalities.
Join Bejamas newsletter!
Get the exclusive Jamstack web dev case studies (and more) in your mailbox!
To ensure Dodonut's website was performing optimally, we used Google's Core Web Vitals as a benchmark to measure its loading speed, interactivity, and visual stability. These metrics are crucial to providing an optimal user experience. We are pleased to report that Dodonut achieved an excellent score on all Core Web Vitals metrics. The website loaded quickly, provided a smooth user experience, and had top-notch visual stability.
Here are the current results for all Core Web Vitals metrics:
Core Web Vitals
Check if your website passes the Core Web Vitals assessment.
dodonut.com passes Core Web Vitals assessment.
First Input Delay
Largest Contentful Paint
Cumulative Layout Shift
Time to First Byte
Based on the previous 28-day collection fetched from Google's Chrome UX Report.
And here is the perfect Lighthouse score we mentioned earlier:
Eco-Friendly Performance: Minimizing CO2 Emission
By using the Astro framework, we were able to create a fast and performant website that consumes fewer resources, leading to lower CO2 emissions.
We can also talk about the specific CO2 savings achieved as a result of our efforts. This can include the total amount of CO2 emissions prevented, as well as the equivalent number of trees planted or cars have taken off the road. By highlighting these numbers, we can demonstrate the tangible impact of Dodonut's sustainable approach to web design.
Let’s see how our website performed in terms of sustainability according to Digital Beacon's analysis:
We believe every little bit counts, and by setting an example with the Dodonut website, we hope to inspire others in the industry to follow suit.
In conclusion, the Astro framework proved to be a sustainable solution for Dodonut's carbon-conscious web design needs.
We hope this case study has provided valuable insights into the benefits of using the Astro JS framework for sustainable web design. We encourage businesses and organizations to consider the impact of their online presence on the environment and to explore the use of sustainable technology like Astro in their own projects.
If you're interested in sustainable web design solutions, we'd love to hear from you! Please don't hesitate to get in touch with us to discuss your needs and explore how we can help.