First we need to do some level-setting.
The web, by its very nature, is a net-negative for the environment. It exponentially grows at a near-inconceivable scale, and with that comes an ever-growing demand for power. This isn’t even factoring in web-adjacent technologies of questionable utility that have titanic power demands.
Sit with this for a bit. Maybe walk away from it all and get a job herding goats. Goats are great.
Still here? That’s cool too. We can’t talk about making green websites. Instead, we need to think in terms of harm reduction.
So, how do you make a website or web app not-awful?
The questionable benefits of dark mode
I bet you’re thinking, “Well, black means the display is off, which means less power draw.” And you know what? You’re right. Sorta. The thing is, only OLED displays can do this. LED displays still use light to show the color black.
It’s also worth mentioning that most dark mode themes aren’t pure black, preferring instead to use a suite of darker gray colors. This is intentional, as it’s a gentler treatment intended to reduce eye strain.
Don’t blame the victim
We really shouldn’t be looking for ways to offset (get it?) our issues on the user. Most of our crimes occur before the last mile, and it’s up to us as responsible designers and developers to do the hard work.
I should also say that a lot of the following advice is also good advice for building the web, period. It translates to faster, more reliable, more robust output, all which make for a great end user experience.
Audit the state of things
Run your site through the Website Carbon Calculator and understand you might not like what you see.
Learn to love servers
Modern servers are hyper-optimized powerhouses purpose built to do one thing and one thing only: send markup to devices. They’ll gleefully chew through your convoluted business logic and spit out results.
The companies who own servers also have an extreme amount of motivation to make their servers as efficient as possible. This means that their energy use is going to be a lot more optimized than anything you can cobble together in a sprint or two. If you want to research this, it’s a quantified metric called a Power Usage Efficiency (PUE) rating.
This is all to say that you should take a moment any time you find yourself reaching for a solution that makes the user’s device do the work. Check to see if there’s a way for a server to do it instead.
Better yet, run some user tests to see if it’s even a thing that needs doing. Zero server processing is a lot more environmentally friendly than any, after all.
Prefer static sites
A dirty little secret: most things that are Single Page Applications don’t need to be. A restaurant website doesn’t need an overwrought, state-managing library to show the user what times its open, what the menu is, what the curbside pickup policy is, or how to contact them.
The state of the web reflects this as well. It’s not to say that SPA architecture has its time and place, it’s just that FOMO is very real and the approach’s popularity is vastly overrepresented on social media.
From an environmental perspective, a well-built static site is far kinder to the end device it is rendered on. The server has to do far less work to serve up your average static site. Devices with rechargeable batteries (laptops, tablets, smartphones, etc.) will use more energy to render resource-intensive websites, as they require more work to stitch everything together. Less energy expenditure means less frequent recharge times.
This might seem a little absurd. However, think about the sites you visit multiple times a day, and the cumulative effects that causes. Now extend that thinking to every other user doing the same exact thing, and the infrastructure set up to support it.
Don’t overcomplicate your JavaScript
In all fairness, static sites can also be JavaScript nightmares. The thing here is to be mindful of what you’re writing, and importantly how it behaves when it decompresses on the client.
Minified JavaScript might make for smaller downloads, but the browser does decompress anything it parses in order to process it. A small compressed file can potentially be computationally massive, an experience a lot like deploying an instant inflating emergency raft inside of a microhome.
More processing time means—you guessed it—more energy expenditure.
Remove dependencies
If I was a better programmer, I’d write a script that shows you the cumulative
CO₂ you’ve generated every time you type npm install.
This is to say that the less code you have to serve up, the better it gets. Take a long, hard look at your tracking scripts, your analytics, your A/B tests, your cookied content, heck even your fonts. Create—and importantly stick to—a performance budget.
You might also want to see what features can be replaced with native functionality. The web’s done a lot of growing up lately, if you haven’t been paying attention.
Minify your assets
Uglify your HTML, CSS, and JavaScript. Get friendly with gzip, brotil, zopfli, and other compression techniques (and be wary of dynamic compression’s side effects).
Images need some love, too. Squash your raster images down, and introduce your
SVG to SVGO. Convert your 30 MB gifs into a more suitable format. Take
advantage of the picture element and its ability to show
AVIF images to browsers that can support them.
Aggressively cache
Don’t make me re-download content I don’t need to. Set your
cache lifetimes to the heat death of the universe,
or even immutable if you’re feeling zesty.
Add a service worker and instruct it to shove all the
content I read into offline storage. If you’re going to cachebust,
do so with the solemnity of a nuclear launch.
Use a CDN datacenter located near your users
The further your data has to travel, the more energy it uses. A Content Delivery Network (CDN) can help you efficiently send data to your users using the shortest possible route, provided they have servers located nearby. This also helps with latency, which is nice.
If you really want to optimize this, check out edge computing.
Be wary of greenwashing
A hosting company can obfuscate their environmental impact the same way a gasoline-powered alarm clock can be Energy Star certified. Yikes. Looking for a good place to start? The Green Web Foundation might be worth checking out.
Get weird
The web was built to be resilient. Its continuing homogenization may work against its own best interests, in that it constrains what our expectations for what it should do and how it should do it. Do you need to be online 24/7? Do you need images? Heck, do you need to use HTTP?
If you’re targeting a niche audience, maybe even consider that a physical artifact might be more compelling. Since a splashy marketing page is now the norm, this little trick might help you stand out in a sea of identical experiences.
Delete your website
Servers burn oil. Cull sites that no longer serve a need, but remember that the Space Jam website is both critical infrastructure and a UNESCO World Heritage site.
Take carbon credits out of play
The sad and sorry truth is all these optimizations are a drop in the (acidifying) ocean.
Perhaps the most effective thing you can do is to purchase carbon credits that preempt future greenhouse gas emission. Removing credits this way means that other players can’t purchase them, and therefore may have to retrofit their emissions technology to be less damaging to the environment.
There are organizations out there that help you do this, as carbon credits are expensive. I like NativeEnergy. If you’re a web worker, there’s a decent chance you’re paid well. Maybe consider this a tithe on the destruction you’re indirectly wreaking. Better yet, see if your organization will pitch in.
