How slimmed-down websites can cut their carbon emissions
- Published
Valentina Karellas's knitwear website features large pictures and video - both use a lot of data
"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 page."
She's just learned that every visit to her website's homepage generates up to 9.89g of carbon emissions. It's nearly 10 times the 1g target recommended by the Eco-Friendly Web Alliance, external, an organisation that offers accreditation for environmentally friendly websites.
This revelation is at odds with the rest of her business, which was set up to be sustainable. Karellas designs and makes knitwear, which she describes as wearable art, in her London workshop.
For her raw materials, she sources surplus yarns that would otherwise be thrown away. Everything is made to order on a hand-powered knitting machine, so there's no excess manufacturing and very little power is used.
The website is both an online portfolio and a shopfront. Beautiful, large images are used to showcase the designs and make the site look professional. "I don't want to compromise on that," she says, "but my priority is the environment. This needs to be sorted."
When her site was built, Karellas had no way of knowing its environmental impact. Now, there are several tools that expose this data and are inspiring businesses to drive down their carbon emissions. For instance, Website Carbon Calculator, external and Ecograder, external both estimate your home page's carbon emissions.
So how are websites reducing their carbon footprint? Switching to hosting based on renewable energy is a good start. The Green Web Foundation has a tool for looking up web hosts and their green credentials.
Then it's a question of reducing the amount of data that is stored and sent across the network, passing through all those machines that use electricity. It's a challenge when the average size of a web page has increased from 468KB in 2010 to more than 2,000KB today, according to httparchive.org, external.
As a result of faster internet connections, web developers haven't had to think so much about their file sizes. Many sites have big images and background videos. These are the leading culprits driving the size of web pages up.
Valentina Karellas was shocked to find out the CO2 emissions generated by her website
Tom Greenwood is the managing director of agency Wholegrain Digital, which builds low-carbon websites. He took a look at Karellas's website and shared a few tips.
The video that plays automatically could be set to play only when the viewer chooses to watch it or scrolls to it, he says.
When you roll the mouse over a product a new image of it appears. "I'd encourage her to have a simpler interaction, such as a zoom effect," he says. That would avoid the need to download the second image.
The homepage has five full-screen photos to cycle through. "That would be something to think about," he says, "whether that is essential or whether there could be a static image, or a smaller image."
Pictures can be optimised so that their file sizes are smaller while the quality remains good. The modern WebP format is more efficient than the older JPEG, too.
Karellas is encouraged that it's easy to take the first steps, and that any tweaks are unlikely to affect her business. "I'm sure it won't cost a sale just because I change things around a bit," she says.
Tim Frick is the founder of Mightybytes, which designs and builds websites. As well as driving down file sizes, he recommends streamlining the user journey through the site.
"It's easy to calculate emissions based on data transfer," he says. "It's less easy to calculate emissions based on things that cause a user to spend more time, i.e. more energy, on interacting with the page. Some pages get millions of views every day. That tiny frustrating thing that takes each user an additional 10 seconds ends up amplified."
Product design studio Quarterre worked with agency Future Selves to cut its website carbon emissions by 96%. They went from nearly 7g of carbon to 0.3g per homepage visit.
"There's a danger when you talk about 7g that you think that's not that much, but there's a cumulative effect to that," says Clive Hartley, director at Quarterre. "You want as many people as possible to be looking at your website and to come to your business. A more than 90% reduction in energy anywhere else would have people partying in the streets."
They rebuilt the website with a small number of simple pages. Rather than using large hero images, the new site uses smaller images, arranged to create a composite design.
Coloured stripes define the site's identity. They are created with text instructions and reduce the need for bulky image files.
Behind the scenes, animation and interaction effects were added using HTML and CSS, two fundamental web languages. That meant there was no need to download large JavaScript files often used to do this on other sites.
Although Quarterre works in a highly visual industry, Hartley didn't experience any compromise in the site design. "We didn't feel we were missing out on anything," he says. "The simple graphics and the clean corporate imagery for the studio were satisfying. It looks punchy and vibrant."
As well as rethinking images, user journeys and site structure, website owners can ask themselves whether any visits can be avoided altogether.
Sharon Foster's company reviewed all the content on its website
BioteCH4 turns food waste into energy, working with local authorities and companies. With a new site design, it was able to reduce its carbon emissions by an estimated 520kg, year on year. That's equivalent to 2,500 miles of air travel.
But the company also looked at reducing its bounce rate, the number of people who came to the site and quickly left.
"We had a lot of traffic arriving at the website," says Sharon Foster, marketing and brand manager at BioteCH4. "Looking back, that was a vanity metric. The bounce rate showed they didn't find what they wanted. We were unnecessarily driving people to the website and creating that carbon impact."
BioteCH4 reviewed all its content, deleted old news stories, and merged what was still useful into richer content pages.
More detailed search engine keywords were used to drive prospective customers - rather than general browsers - to destination pages, which were designed to give them exactly what they wanted.
As a result, the bounce rate was cut by about 21%, and bounces from web searches fell by more than 13%.
"Now, although website numbers have dropped, the people we are driving to the website, through organic searches or paid-for advertising, want to talk to us," says Foster.
With a sustainable website design project, companies need to decide where they draw the line. The most efficient site would be text only, but nobody wants to visit that in 2023.
"We want richer online experiences," Wholegrain Digital's Tom Greenwood says. "For me, the line is: do what you need to do to achieve your goals but do that in an efficient way."