For Earth Day this year I thought I’d bring up a few green-web issues that have been on my mind. I’m not advocating that we shut down the Internet and go live in caves, but there are things that can be done (or not done) to use less energy.
Computers Need Electricity
Over the past few years there have been some interesting articles on the carbon footprint of Internet usage. Our rapidly increasing streaming video habits, as well as the rise in blockchain calculations, are usually the focus of these discussions, and rightfully so.
Netflix’s high quality setting can push up to 7 GB/hour. This is roughly the equivalent of viewing 35,000 photos on Instagram in an hour. How much would that drain your phone’s battery?
Blockchain calculations like Bitcoin are spectacularly power intensive. If you’ve ever looked into “mining” Bitcoin, it takes powerful computers (high-end graphics cards usually do the heavy lifting) running at full force for a long time to crank out anything of value. All that processing takes a massive amount of electricity. So much so that despite a reasonable effort put forth by Bitcoin operators to use renewables (notably hydroelectric power) -- the Bitcoin economy has the same carbon emissions of a small developing country like Jordan.
But what about websites? Don’t they get delivered by those big data centers with monstrous racks of computers running in super air-conditioned warehouses? Thankfully most data centers operate in a more tolerant temperature range than they did a decade ago. It’s typically 65° to 80° F these days. But warmer room temperatures mean the fans in the racks have to work harder. In these data centers, it's a monitoring game to find the sweet spot of air temperature that keeps electric bills low without overloading parts to the point where they fail.
Green Hosting
I recently looked into this for some clients and for Version2. The company that always comes up first in a search is GreenGeeks. They talk a good game and have nifty “eco-friendly” badges you can put on your website. Their website claims that they’ve been recognized by the EPA, and a statement in the footer of their website says “Powered by Renewable Energy.” Unfortunately that isn’t strictly true. Dig deeper and nothing that they do is physically powered by renewable energy…but “matched” by buying Renewable Energy Certificates.
I suppose it’s better than not doing anything, but learning that they only write a check instead of doing the work to be green makes their company feel like a gimmick.
I then discovered Aiso.net. This company is the real deal. I chatted with a rep and not only are they 100% on-site solar powered, they are expanding. They also have a 23 year track record in the hosting business and are planning an expansion of their solar grid this summer. You can see their solar array here:
https://www.aiso.net/technology/live-cam
And learn more about their tech here:
https://www.aiso.net/technology
If you’d like to learn more about how to have a legit green website, contact Version2 and we can add your site to our own migration plan.
Green Web Design
Beyond the electricity used by a web host, there’s a second factor that contributes to the environmental impact of the Internet: bad web design.
While there are many, many examples of bad web design, let’s focus on the design decisions that have an environmental impact. The upside of green web design is that these efforts almost always lead to a site that is better performing.
Inefficiency occurs in two ways: data size and processing requirements. Data size refers to the amount of stuff that must be downloaded to view a web page. This is usually measured in megabytes and is the amount of stuff the Internet has to move through its tubes to get a web page to you.
The concept of processing requirements is a bit more foggy. Basically we’re talking about how much the browser has to chew on all the instructions it's been given in order to render a webpage. The more work that has to be done by the rendering computer, the more electricity it takes to view a page.
To green-up a website we need to be aware of how much data we’re sending to visitors and what we’re asking them to do with it.
The Bigness of Images, Videos, and Code
With big monitors, high-speed Internet and high-res mobile devices, you need to have big images. But you don’t need to overdo it. Other than giant backgrounds, images don’t need to be more than 1200 pixels wide. My phone takes images about 4000 pixels wide. That’s 12 times the amount of pixels (and file size) than can reasonably be viewed on a webpage.
The solution is basic resizing and choosing the correct format for compression. Photos should be jpegs 99% of the time. Illustrations, logos, icons, and clip art should be in png, gif, or ideally svg format. SVG is a vector file format that is pretty much universally usable on the web. If you don’t know what that means, look for an upcoming article about image formats, or reach out and I’ll talk your ear off about it. :)
Video backgrounds can really make a site feel energetic, modern, and sophisticated. But before you add something as big as a video you need to ask, does this really help my business? Is forcing site visitors to download this a good thing? It could be. Video is remarkably good at conveying information. But if it's just to be trendy without substance, maybe pass on it.
Some alternatives to video backgrounds are CSS animations and cinemagraphs. See the moving bars at the top of this site? (If you’re reading this in the future, in 2021 the design of this website had animating bars at the top.) That’s not a video. There aren’t even any images in it. It’s pure CSS. About 20 lines of CSS code make it all happen.
Cinemagraphs are animated gifs where most of the image is a still photograph. They were trendy a few years back and are still super fun and subtle if you get creative in how you use them.
Avoid Multiple Trips
Remember the launch of HealthCare.gov? The site just didn’t work. I remember trying to bring the site up and I looked at what was going on in the background. The page I was on requested more than 40 JavaScript files for support. Even if the server was working flawlessly, I doubt the page could run. It was just a mess of conflicting instructions.
Many developers believe in combining files wherever possible. It's more efficient to deliver one big file than a bunch of little ones. Especially when they may interact poorly with each other. I find the best practice is to use standard framework libraries, a global customization file, and then feature-centric files that can be loaded as needed. For example, if you only have a slider on your homepage, you don't need to load those capabilities on every page of a site.
Also, you just don’t need 40 JavaScript files. If you think you do, then you should rethink your business model, as well as your website. For example, ver-two.com loads four JavaScript files: the bootstrap framework, jQuery (an incredibly popular support library), the engine for my homepage slider, and Google Analytics.
Maybe you have an elaborate app? As I draft this on Google Docs I see that it’s only loading about 25 scripts. The Amazon.com homepage loads 19 scripts. I regularly see small business websites that load 20+ different JavaScripts. This is usually the result of an enormous pile of WordPress plugins that all have their own job to do and require their own scripts and styles. It’s good compartmentalization, but it's bad for site performance and efficiency.
Avoid Heavy JavaScript Tools
No-code solutions like Wix use JavaScript (and lots of it*) to arrange elements to match the specified layout. The result is often a massive website that has to calculate, rearrange, and redraw the content of a page. While this can be an intuitive way for a novice to make a website, it flies in the face of all the hard work that has been done by many smart and dedicated people to create the HTML and CSS specifications. HTML and CSS were designed to work simply and elegantly to render content. JavaScript layouts throw all that away and use their own instructions. These pages that take a lot of power to view, have lots of duplicated instructions, and often have strange overlapping sections.
*Looking at a colleague’s Wix site, their homepage loads a staggering 65 JavaScript files. 
Dark Mode
A final interesting note on “dark mode” design. Dark mode is a recent trend of reversing the typical black-on-white design standard by opting for white text on a black or a very dark background. The claim is that it reduces eye strain by not having to squint into a bright light. I remember the reverse argument being made in the late 90s, but that’s not what I want to bring up. Dark mode designs literally require less light than a standard design. This means a viewer’s device has to generate less light and push less electricity to the LEDs in the screen/monitor. Dark is the new green.
Conclusions
Green hosting is awesome if you can find it, but it's just one part of the equation. Version2 was built on the concept of clean web design. It turns out that clean code isn’t just good for performance and SEO, but it's good for the environment too.
The thing to keep in mind is that every pixel you design is paid for in electricity. Every calculation, animation, and feature is just a bit more electrical power that’s required to view your site. Your design choices have an impact beyond how cool they look. Make sure those choices are justified.