My Part in a More Sustainable Web
Despite its digital nature, the internet physically affects the environment. Its 24/7/365 nature must be powered by servers running non-stop to ensure constant availability. The energy these servers consume translates into substantial carbon emissions, exacerbating climate change.
As internet (and AI-platform) usage escalates, the environmental cost must be addressed. Efforts to mitigate these effects, such as opting for renewable energy sources and optimizing website efficiency, are imperative to curb the environmental repercussions of digital design.
By implementing sustainable design practices, brands and the designers who support them decrease the energy consumption associated with data processing and transfer and improve user experiences through faster loading speeds, increased accessibility, and smoother browsing.
To better understand my part, recently, I put bpennington.com to the test to understand my site’s carbon footprint. The results were…shocking. It was a big, fat F.
A shocking realization about this site’s carbon rating inspired change
Over a year, even only averaging 10 page views per month, my little corner of the internet produces 0.46kg of CO2, equivalent to as much CO2 as boiling water for 62 cups of tea. It produces 1kWh of energy, enough electricity to drive an electric car 4.3 miles.
While it may seem like nothing, I wasn’t comfortable with this. I knew I had to do something to better those results. Here are a few things I’ve started to address to reduce my website’s carbon footprint.
✅ Embraced the Dark Side
Darker color palettes mean less of a user’s screen is illuminated. (Simply put, fewer LEDs illuminated require less power.)
The benefits of dark mode don’t stop with energy savings. Dark mode also reduces eye strain, especially in low-light environments. Lowering the brightness of objects on the screen minimizes the contrast, resulting in less strain on the eyes. This feature is particularly beneficial for users engaging with screens for extended periods.
As most modern operating systems now offer the ability to automatically or manually engage dark mode, I took advantage of this by updating my site’s CSS and using a media query to detect if the user has the dark mode enabled in their settings. Those who have it enabled will see my site in dark mode. (In system settings, change your appearance to light mode to see the alternate version of the site.)
Squarespace doesn’t make adding dark mode easily, so I spent time reviewing and inspecting the site to understand what elements needed to change and making those updates one at a time in the CSS. As I’m not a front-end developer by trade, I was thankful for a starter bit of code from Michael Henry.
Additional related updates included:
Updated logos on the About page to work on light and dark modes, reducing the need for two sets of logos.
Additionally, I paused any autoplay videos, reducing unnecessary data transfer.
✅ Get to the Point
Once the dark mode was addressed, it was time to focus on another area: the content. With a better content strategy, I was able to reduce the amount of pages and make the content clearer. If people aren’t searching, they’re using less energy.
My site isn’t that large or complex, but I consciously tried to reduce clicks where possible, including
Editing the Thoughts section to feature more posts per page reduces the number of clicks a user might take to find specific content.
Tightening copy across all pages.
Refining/adding call-to-action buttons to prevent unnecessary clicks and help users get to their destination faster.
Deleting old/irrelevant pages from the index. If I’m not proud enough of them to have them live today, I’m don’t need to keep them.
What’s Next?
These were the first small steps. I plan to revisit this list soon with updates, including:
Images & Videos
I plan to update all the images across the site from PNGs or JPGs to a more efficient image format, like SVG or WEBP. Unfortunately, Squarespace only supports GIF, JPG, or PNG. I hope they’ll update this soon. Otherwise, it may be time to find another provider who will.
Additionally, I’d like to ensure any videos are hosted on platforms that value sustainability and renewable energy policies, like YouTube.
Green Hosting
When I launched my site in 2011, I chose Network Solutions as the host. Since then, more sustainable options, like Viridio, have emerged.
While my actions are but a tiny drop in a giant ocean, if we all recognize the need for change personally and professionally, maybe we can shift the needle a little bit. How are you or your company supporting a more sustainable web?