Building More Sustainable Websites
Hi there! We’re Whitewall, a digital marketing company in Glasgow. While many businesses that focus on sustainability look to lower their carbon footprint via rethinking their manufacturing or distribution practices, their digital presence is often overlooked. Yet globally, the internet accounts for 2% of all greenhouse gas emissions. In short, by being online, we’re globally kicking out the same amount of pollution as an entire country like Germany burns through from fossil fuel-burning, cement production and gas flaring combined.
Yet if the last 18 months have taught us anything, it’s that being online is more important than ever. For many it has been the only way to see friends and family, so while users can do their part to reduce their screentime, it’s up to builders of websites to make increasingly longer visits use less energy. You can build a greener website just by making a few small changes.
1. High-contrast colour schemes
Using high-contrast colour schemes means lower display brightness is necessary for users, so they can browse your site whilst using less electricity. As a digital marketing company in Glasgow, we look to industry leaders globally for inspiration and find that no agency has nailed this better than Anyways Creative, whose self-initiated project Thanks in Advance is – quite literally – a shining example of high-contrast design.
The illustrations are delivered as Scalable Vector Graphics (SVGS), removing the need to host additional files since they are written and animated via data points in code. As a result, their website is 97% greener than your average site. We’ve taken inspiration from this kind of practice for our own website, opting for a purple-on-white, SVG-led design.
To learn more about how we can help you design your website, click here.
2. Use an eco-friendly web host
Every website needs a host, and these hosts’ datacentres are big energy consumers. Whilst it’s easy to think of the internet as this ethereal concept, The backbone of the internet is millions of very real servers, stacked on top of each other in racks, running all day every day.
Thankfully, people are starting to wake up to this- not least Tesla CEO and BitCoin advocate Elon Musk, who recently changed his mind on the company’s use of cryptocurrency due to concerns over their coal-powered datacentres. According to Professor Brian Lucey at Dublin Trinity College (speaking to the Financial Times), Bitcoin alone consumes as much electricity as a medium-sized European country.
“Cryptocurrency is a good idea on many levels,” said Musk in a statement on Twitter, “But this cannot come at great cost to the environment.”
3. Optimise images to reduce file size
A high-res image may look great but can be the biggest factor on load time and energy consumption. Use editing software or in-browser compressors like TinyPng to resize the image without compromising on quality. Plus, improving page speed is great for SEO.
Others are returning to techniques previously considered to be obsolete, such as a process known as image dithering; a technique used to simulate colours or shading. The basic concept to add ‘noise’ (additional pixels) to a digital file. In its earlier uses in newspapers, comic books, and other printed media, dithering would be applied to images in the form of half-tone dots. This would give a smooth image with grey shades even though printing presses only supported black ink.
The technique may not work for a lot of sites due to its distinctive effect on photography, but LowTech Magazine use it to great effect on their website thanks to a throwback aesthetic which sits perfectly in line with the fact that their site is 100% solar-powered and less than 20% of the size of an average website.
4. Use lazy-loading
Lazy-loading means loading images and other media only as it’s required. So if a user doesn’t scroll all the way to the bottom, not all the images need to load. For a complete guide, visit CSS tricks.
The above video shows the result in practice, which can be achieved via various plug-ins.
5. Clean up unused code
Once you’ve finished writing your code, read back through it and clean up where you can. Every additional character adds to the file size. This might not reduce the size of your file by a massive amount, but over thousands of visits it will have a difference.
We recently discovered an enthralling blog post by a programming veteran of 15 years who puts into perspective the impact of ignoring efficiency which our ever-increasing technology has allowed. For example, the entirety of Windows 95 took up 130MB. Today, Windows 10 is 133 times as big.
Granted, this is getting right in to the nitty gritty. For the most part, this isn’t something most people are expected to be able to identify and fix unaided. A great place to start is with Google Page Speed Insights, which can at the very least help you identify which parts of your code may be superfluous. However, sometimes you just need to talk to somebody face-to-face. If that’s the case, please don’t hesitate to get in touch with us.
To learn more about us, a digital marketing company in Glasgow, visit our ‘What We Do’ webpage.