Going Green With Astro

Plenty of websites on the internet use large uncompressed images, big heavy frameworks and countless bulky scripts and plugins. The problem with using expensive resources like these is when downloading the content of the website, which occurs on both the client-side and the server-side. Downloading content requires electricity, using larger amounts of electricity increases your carbon footprint, you can kind of get the picture. 

This wouldn’t be too much of a problem if your user base is small, but if you want to scale up and increase your website hits, having that needlessly monolithic website is a cause for concern for the sake of the environment.

At code and create, we try to set an example by designing, creating and maintaining websites which minimise the carbon footprint of website traffic and hope the other website creators out there will follow suit. Luckily Google condones this sort of behaviour, usually ranking greener websites higher in terms of search results. And it’s not just for the good of the environment. Greener websites are generally the more performant ones. The trimmed fat makes them faster, having a quicker load time and a greater user experience.

So how do we make a website more green?

Just ship less.

A new technology that helps us do this is called Astro.

Astro works like a static site generator but it goes one step further, it allows you to remove all the Javascript from your website so you can just ship static HTML/CSS. This is pretty much as lean as you can get.

For your website you may want components that have some user interactivity e.g. image carousels, search bars and card filters. Having functionality like this will make the need for client-side Javascript inevitable. To allow for this, Astro uses an “islands architecture”, which allows the developer to individually select the components of the website that will use Javascript. The idea being that each Javascript containing component is an island in a sea of static content.

What makes this great is similar to how images can be lazy loaded. An island component’s Javascript can be lazy loaded. This gives a quicker initial page load, and until the island comes into view, the Javascript won’t be downloaded.

Astro provides a great developer experience too, developers can pick and choose from a range of their favourite big heavy frameworks, including React, Svelte, Vue etc. When developers get to create a website in the language and framework of their choice, you can count on the fact that it’ll be developed to a higher standard and at a quicker pace. 

As a Junior Web Developer, having the ability to use React is great because it’s familiar, we’ve done previous projects in it, and the documentation is well maintained with a large developer user base to get support from.

End result, a green website with happy developers.