“I’m horrified,” says Valentina Karellas. “I know grams because I work with them every day and I know how much 10g weighs. And that’s just one side.”
She just found out that every visit to her website’s home page causes up to 9.89g of CO2 emissions. That’s nearly 10 times the 1g target recommended by the Eco-Friendly Web Alliance, an organization that offers accreditations for eco-friendly websites.
This revelation is at odds with the rest of their business, which was designed to be sustainable. Karellas designs and makes knitwear in her London workshop, which she describes as wearable art.
For her raw materials, she sources surplus yarns that would otherwise be thrown away. Everything is made to order on a hand-operated knitting machine, so there is no over-manufacturing and very little electricity is used.
The website is both an online portfolio and a shop front. Nice, large images are used to showcase the designs and make the website look professional. “I don’t want to make any compromises,” she says, “but my priority is the environment. That has to be settled.”
When their site was built, Karellas had no way of knowing the environmental impact. Now there are several tools that expose this data and inspire companies to reduce their carbon emissions. For example, Website Carbon Calculator and Ecograder both estimate your website’s carbon emissions.
So how do websites reduce their carbon footprint? Switching to renewable energy based hosting is a good start. The Green Web Foundation has a tool for looking up web hosts and their green credentials.
Then it’s about reducing the amount of data that is stored and sent over the network by going through all the machines that consume power. According to httparchive.org, it’s a challenge when the average size of a web page has grown from 468 KB in 2010 to over 2,000 KB today.
Due to faster internet connections, web developers didn’t have to think about their file size as much. Many websites have large images and background videos. These are the main culprits that increase the size of websites.
Tom Greenwood is the CEO of Wholegrain Digital, which creates low-carbon websites. He checked out Karellas’ website and shared a few tips.
The video, which autoplays, could be set to play only when the viewer looks at it or scrolls to it, he says.
When you hover over a product, a new image of it will appear. “I would encourage them to use a simpler interaction, like a zoom effect,” he says. That would avoid the need to download the second image.
The homepage has five full-screen photos that you can scroll through. “That would be a consideration,” he says, “whether that’s absolutely necessary or whether there could be a static image or a smaller image.”
Images can be optimized to make their file size smaller while maintaining good quality. The modern WebP format is also more efficient than the older JPEG.
More technology of business:
- The tiny diamond sphere at the center of a fusion breakthrough
- Can technology clean up the shrimp farm?
- How ASML became Europe’s most valuable technology company
- The remote Swedish town leads the Green Steel Race
- Can power-hungry data centers be stopped?
Karellas is encouraged that getting started is easy and that changes are unlikely to affect her business. “I’m sure it won’t cost a sale just because I change things up a bit,” she says.
Tim Frick is the founder of Mightybytes, which designs and builds websites. In addition to reducing the file size, he recommends optimizing user guidance through the website.
“It’s easy to calculate emissions based on data transmission,” he says. “It’s less easy to calculate emissions based on things that cause a user to spend more time, ie more energy, interacting with the page. Some pages get millions of views every day. This tiny frustrating thing that costs every user an extra 10 seconds ends up amplified.”
Product design studio Quarterre worked with agency Future Selves to reduce their website’s carbon emissions by 96%. They went from nearly 7g of carbon to 0.3g per home page visit.
“When you talk about 7g, you run the risk of thinking that’s not that much, but that has a cumulative effect,” says Clive Hartley, director at Quarterre. “You want as many people as possible to visit your website and come to your store. An energy saving of more than 90% elsewhere would result in people partying in the streets.”
They rebuilt the website with a small number of simple pages. Instead of using large hero images, the new site uses smaller images arranged to create a composite design.
Colored stripes define the identity of the site. They are created with text instructions and reduce the need for large image files.
Animations and interaction effects were added behind the scenes using HTML and CSS, two basic web languages. This meant that there was no need to download large JavaScript files, which are often used for this on other websites.
Although Quarterre works in a very visual industry, Hartley didn’t compromise on the site’s design. “We didn’t feel like we were missing out,” he says. “The studio was satisfied with the simple graphics and clear corporate imagery. It looks expressive and alive.”
Along with rethinking images, user journeys, and page structure, website owners may wonder if visits can be avoided at all.
BioteCH4 turns food waste into energy and works with local authorities and businesses. With a new site design, it has reduced its CO2 emissions by an estimated 520 kg year over year. That corresponds to 2,500 miles of air travel.
But the company was also trying to reduce its bounce rate, the number of people who visited and quickly left the site.
“We had a lot of traffic on the website,” says Sharon Foster, Marketing and Brand Manager at BioteCH4. “In retrospect, that was a vanity metric. The bounce rate showed that they didn’t find what they wanted. We were driving people to the site unnecessarily and creating that carbon impact.”
BioteCH4 reviewed all of its content, deleting old news articles and merging everything that was still useful into more content-rich pages.
More granular search engine keywords were used to drive potential customers – rather than general browsers – to landing pages designed to give them exactly what they wanted.
As a result, the bounce rate dropped by about 21% and web search bounce rates dropped by more than 13%.
“Although the number of websites has decreased, the people we drive to the site through organic searches or paid advertising now want to talk to us,” says Foster.
In a sustainable website design project, companies need to decide where to draw the line. The most efficient page would be text only, but nobody wants to visit that in 2023.
“We want richer online experiences,” says Wholegrain Digital’s Tom Greenwood. “For me, the motto is: do what you have to do to achieve your goals, but do it efficiently.”
Add Comment