How to Build a More Sustainable Website
Published by James Gallagher on .
This article takes approximately 9 minutes to read.
I have been thinking a lot about web sustainability. In all honesty, I have considered what it would be like to live in a cabin away from technology. Realizing that technology is my “trade” of sorts, I believe that I can have a greater impact if I stay connected to the internet and instead use it more consciously. While it may be impractical to completely disassociate myself from tech, there are ways I can use it more sustainably.
What got me started on this journey to thinking about sustainability was reading about Low Tech Magazine’s efforts to create a solar-powered website. Intrigued by this premise, I have done extensive reading on the topic. I have even written about it in prior blog posts. I am interested in how we can do more with less on the internet; how we can create experiences that are both accessible and sustainable.
Arguably my greatest learning is that technology is part of our lives and the solution is not just to stop using tech if we want to combat its environmental impact. That is an option. One day the world could stop using the internet and that would solve all of the issues with the future impact of the internet on the environment. That is not likely. So, I would like to discuss practical ways in which I can use the internet more sustainability.
As a webmaster, I have a responsibility to my users. That responsibility is to provide an accessible experience to my users. You come here for a reason. I don’t know that exact reason but I assume that you are either: (a) interested in learning more about me or; (b) you want to find out more about a topic that I have covered on my blog. All my work is in service to the people that come here for those reasons.
Building a sustainable website cannot tread on this otherwise I would be betraying my users. Luckily, I do not have to offer a subpar experience to users in order to offer a more sustainable web experience. Sustainability and usability do not only co-exist well. Both principles go hand in hand. I hope I can prove this in saying that this site was designed to be sustainable. Have you encountered any usability concerns? If so, please let me know; otherwise, consider this website a testament to what you can do with sustainable web design.
What I Have Done
Making this website more sustainable has been an iterative process. A few days ago, I did somewhat drive myself away from the principle of sustainability in favor of presenting quantified self data on this site. That was merely a distraction. After re-evaluating my principles, I realize that sustinability is too important. This brings me to a crucial learning on the topic of sustainability: it is not a one-time thing.
I am actively considering how I can do more with less on this website. I have removed the whitespaces on my CSS file, for example. Many of the changes I have made are small. Some of them have removed cool features that took me time to think about and create. I do not regret paring down this site. I prefer to offer a more sustainable experience than to have features that users do not need.
Let me discuss some of the main changes I have made to my site over the last few months to make this internet home of mine more sustainable.
Moving to a Static Site
Transitioning from a dynamic to a static site has had a greater impact than any of the other changes I have made. Earlier this year, I built a personal website using Next.js and React. I started to wonder whether those technologies were too verbose for a blog. My reading about how far you could go with HTML encouraged me to take a step back and think about what a static website would look like.
I chose Jekyll as the engine upon which my site would be powered. This is because I did not want to have to manually create HTML files for each web page that I wanted on my site. I write blog posts daily and so I would have to write a lot of HTML files by hand. This would take up time that I could be using for other activities, like creating more content or just living my life.
I use Jekyll to generate the code for this site. I then upload the static version of my site generated by Jekyll to my DigitalOcean server.
Using Less CSS
To give this site some personality, I need to use CSS. I don’t want my site to just be plain text. Again, I want my site to be both usable and sustainable.
When I choose to add a style to this site, I ask myself: will this style enhance the user’s experience? All styles, like the background color and the borders on my navigation bars, are just to make the site look a bit more lively.
I have been careful not to add in styles that I do not think will make the site any better. I tried, for instance, to add in print styles to the site. This would make it easy to print out my website. I removed this feature for two reasons.
First, I was encouraging printing my site which is not necessarily good for the environment. The fewer trees we can chop down, the better. Second, adding in print styles to my stylesheet meant that every user had to load them to view my site. Most people, maybe every person, who visits this site does not need to print it out. Why was I making them load styles that they did not need to view the content on my site?
Choosing a Deliberate Structure
This site has been structured to maximize every page. The home page is a feed of my posts because I think that’s why most people come to my site. I do not know this for sure because I refuse to use tracking software on this site. I also do not ask users to give feedback, although maybe I should. I write a lot and so I think most people will come here to see my blog posts.
Because my most recent posts are on my home page, new visitors don’t need to go anywhere to see the content that I create. I consider my content to be the heart of my site. I want it to be as accessible as possible. In the same vein, I have an archives page that lists all of my posts. This is only on a single page so that you don’t have to load multiple different pages to find the page for which you are looking. There is no search bar on the page because you already have one in your browser. Press Control + F (on Windows) or Command + F (on Mac) and you have a search bar you can use.
Moving to a static site, using less CSS, and thinking more about the structure of my site have had the most impact on the sustainability of this website. I have not, and refuse to, stop there. I know that this website will never be perfect. It will always have an environmental impact. I do recognize that the small things do add up. That’s why I am looking to actively make enhancements to this site where and when I can.
To that end, here are a few of the smaller enhancements I have made to reduce the size of this site and thereby make this site more sustainable:
- I only use images when they will add significant context to a web page.
- Any images I use are run through ImageOptim, a tool that compresses images. I also scale images down using GIMP so that images are the right size. It’s better to scale images to the right size than to just resize them in CSS. Scaling images in GIMP reduces the file size; scaling images in CSS does not have any impact on the size of an image file.
- I do not load a favicon on my pages.
- I use semantic HTML where possible so that I don’t need to create additional styles to support functions that HTML already has built-in.
I plan on documenting these enhancements in more detail as I continue to explore ways to make my website sustainable.
If you are a web designer or developer, I would like you to consider how you can make your web experiences more sustainable. It is hard to quantify the impact of a website on the environment. With that said, tools like Website Carbon do try, and the statistics they generate can give you at least somewhat of an indication about the environmental impact of your creations.
Servers may exist in the abstract; the cloud may be a utility. That does not mean that it has no tangible impact on the environment. The fewer resources I ask my visitors to load, the fewer images I use, the more conscious I am about what goes on each page, the better. One website may not make a massive difference on the environment but collectively the internet does. This may all have taken me a lot of time to think about but I have had fun doing it.
I believe that the internet is a great invention. But it does have a real impact on the environment. There are ways to reduce that impact. I’m actively looking into these methods.