Sustainable websites tips, how to put it into action
How you can implement best practices to reduce your website’s carbon footprint.
Sustainable website tips, what does it entail?
In our sustainable website tips blog series, we’ve provided expertise and guidance on the importance of making reducing your websites carbon footprint, as well as some of our top recommendations and things to consider. Written over a period of time, the content is still relevant today and is regularly reviewed and updated.
Here’s what we’ve covered:
- Sustainable Websites – It’s time for action
- Sustainable websites tips – use images efficiently
- Sustainable website tips – carefully consider your choice of fonts
- Sustainable website tips – choose green hosting
- Sustainable website tips – get rid of autoplaying videos
- Sustainable websites tips – staying up to date
Each blog has provided actionable tips for marketers and sustainability experts to understand and put into place. By implementing the changes covered in this series into your website design and setup, your servers would be using renewable energy, and you’d be reducing data transfers and the energy used by your users’ devices.
What you can do with your internal teams
In addition to the tips in this series, it’s important to ensure that your web editors/site admins buy into and understand these tips and guidelines. Here’s some things to do with your internal teams:
- Train your team on image editing, digital housekeeping, content best practices
- Emphasise the benefits to your site’s performance
- Make a dashboard with five KPIs to see measurable and meaningful improvements and impacts
- Review your brand guidelines for accessibility and sustainability.
Getting technical website development best practice and sustainable website tips
The changes we have discussed focus on those you can implement when using your brand and creating and managing your content. However, there are also more technical things that you can discuss with your current website provider and ask them to consider sustainable web best practices as per those outlined in the W3C WSG (Web Sustainability Guidelines).
Check on a few things with your developer
- Use caching
- Minify code
- Reduce server requests
- Reduce the memory usage of your web pages
- Lazy load content
- Implement AMP (Accelerated Mobile Pages)
Explore and audit your UX and content
Streamline navigation, user experience (UX) and content so people find what they need quickly. Exploring a website is a good thing for some sites, but in most cases, getting users to the information they need quickly and efficiently is the best user experience and minimises energy consumption, ensuring your site is used effectively. In addition, if you look at most heatmap reports, there is a fold and people don’t scroll. So don’t create unnecessarily long pages with loads of content.
There are lots of agencies now where this is on their agenda, and they’re all trying to think about how to make the best possible sites that are lighter weight and perform better. Pick one of those guys, and that will start to drive a systematic change.
Sepas Seraj, CEO and Founder at Pixeled Eggs
Purpose-driven digital solutions a need for systematic change
Changes are needed by the design and development industry: At Pixeled Eggs, we’re part of several communities, from the B Corp movement, to Design Declares, Marketing Declares and The Better Business Act. These communities all strive to use business as a force for good, organisations and people who are acting in socially and environmentally responsible ways.
Pixeled Eggs seeks to champion good practices and advocate for our industry to do the right thing. We regularly engage with our peers and friends to amplify and learn from each other. We consider purpose-driven solutions in the sustainable and accessible websites we create, this ensures we support both people and planet in our website design and website development. However, only some agencies operate like this, those that don’t need to learn and care about the impact they make.
How to drive that change
As clients and marketers, you have the power to change that. You can question the choices of your designers and developers and demand sites that are built to last, are more accessible, perform better and don’t cost the earth. We’re seeing an increase in environmental considerations in the briefs we receive, which is fantastic to see this change continuing.
“In the context of our work, marketers can drive change by demanding it. Agencies will not change behaviour until their clients demand it, this needs to be driven by clients, and that’s the power they have to make it happen.”
Sepas Seraj, CEO and Founder at Pixeled Eggs. Quote taken from Can Marketing Save the Planet Sustainability Podcast Series.
We’ve combined all our content and information into our Pixeled Eggs Sustainable Websites Practical Tips, if you’d like a copy get in touch.
You can also listen to Sepas on the Can Marketing Save the Planet sustainability Podcast Series.
Sustainable website tips – auto-playing videos
Why autoplaying videos create concerns for sustainable website practices.
Sustainable website tips – the impact (good and bad) of videos.
Videos are amazing! Since Dialymotion and YouTube were introduced to the world in 2005 (and we all got broadband), video has revolutionised how we consume content and share nonsense with each other on the internet.
Videos are a powerful way to convey your message and your culture and values to your audience in a way that text and images just can’t. A picture is worth a thousand words… and a video is worth a thousand pictures.
They’re perfect for educational and instructional purposes. They’re one of the best marketing tools you can use. There’s so much research and stats on how brand and product videos can significantly increase sales regardless of whether you’re buying a pair of shoes, a washing machine or a house. And of course videos are entertaining. I don’t need to say more. We all know videos are amazing and they enhance our online experiences.
So when it comes to sustainability, the problem isn’t videos as such, it’s the use of autoplaying videos, specifically in the hero area of your homepage.
Usability and accessibility
I’ve tried to find proper research to see what the users think when they arrive at a homepage and a video starts autoplaying. Do they generally speaking get annoyed and leave immediately or do they somehow connect with your brand better because of it? However, most of what I’ve found are opinion pieces with a few articles pointing to performance issues and a few (usually from marketing and web design companies) arguing that they help your website appear more dynamic and help connect with users.
Where there is concrete evidence is that autoplaying videos are bad for usability and accessibility. This article from Neilsen Norman Group dates back to 2014 but I think the sentence below still holds true:
“When users arrive at a webpage, they don’t appreciate being surprised by video or audio content that begins playing without their consent. Video, and the accompanying audio, can confuse or distract users, and can interfere with their consumption of content on the page.”
Neilson Norman Group article, video usability
Autoplaying videos create a cognitive load (the amount of mental effort required to do something) and any decent UX person will tell you this bad for usability. I’m sure TikTok and Facebook will disagree with this statement on some level but we’re talking about a website experience and the other thing to bear in mind is that by taking control away from the user to pause and play a video, you are failing on basic accessibility as well.
There’s also some evidence from Wistia where removing the autoplaying video from their homepage actually improved conversions on the website (and remember Wistia’s business is to provide video streaming services):
Sustainable website tips – videos and performance issues
Autoplaying videos cause performance issues for your website. Videos are bandwidth intensive and slow down your webpage and in a world where Page Speed is king, this is a big problem. Using an asynchronously embedded video through a service like Vimeo or YouTube means that the core elements of your webpage are not affected by loading issues but you’re still making the user download data and on a slow connection, this has a negative impact on the user experience.
You’re also forcing the user to download data they might not want to be downloading and you’re basically making the assumption that all your users have unlimited data packages and a fast connection. We work with a lot of charities and I look at a lot of charity websites on any given day and I’m always amazed when I see a charity that’s helping vulnerable people or people living in poverty with an autoplaying video on their homepage.
Sustainable website tips – videos and the sustainability impact
I’m not a huge fan of carbon calculators although some context is always useful when you’re highlighting issues of CO2 emissions. There are always contradicting views and calculations which are at best estimated and probably hugely exaggerated so I’m not going to offer any numbers here (although I can see the dramatic impact removing a video or animated gif makes on our server stats). I watch Netflix and rewatch Ian Wright goals when I need a pick-me-up and I don’t want to get into pros and cons of video conferencing. But videos are definitely energy consuming both from the streaming side and for your device and they definitely result in CO2 emissions and have a climate impact.
As always, I’m advocating for a balanced point of view and I see autoplaying homepage videos like the unnecessary plastic packaging that some fruit and vegetables come in. You just don’t need them so it’s an easy win to ditch them. Plus, as I’ve highlighted above, they cause issues with usability, accessibility and performance so all in all, your website is better off without them.
If you’d like to talk to us about your website or our sustainability journey in general, please get in touch!
Image credits:
Photo by Benjamin Brunner on Unsplash
Wistia Photo Wistia Learning Centre
Sustainable website design – it’s time for action
What actions are we taking to improve our future sustainable website design work.
Inspired by our work with The Royal Foundation on The Earthshot Prize, which supports ground-breaking environmental projects across the globe, we’ve asked ourselves how we, in an industry that has always been at the forefront of innovation and creativity, can make a difference and create engaging websites that don’t cost the earth. This is why all of us at Pixeled Eggs have agreed to double down on our sustainability efforts and take action now.
How the internet contributes to the worlds carbon footprint
The internet is responsible for producing around 1 billion tonnes of greenhouse gas emissions per year. This is double what it was 10 years ago and around 2% of the overall emissions. To put it in context, it’s equivalent to the entire aviation industry or the net emissions of carbon dioxide from changes in forestry cover due to deforestation.
Depending on the source you look at, the numbers can vary but on average a single web page on a typical website with 10,000 views per month produces 816kg of CO2 per year. That’s the same as driving your car for over 2,000 miles or charging your phone 100,000 times, that’s a single page! Put your whole website together and suddenly the numbers are pretty significant.
According to some sources, the overall emissions, including gadgets, emails etc, it is closer to 4% of global emissions. These sources have calculated that if every adult in the UK alone sent one less “thank you” email, it could save 16,433 tonnes of carbon a year – the equivalent of taking 3,334 diesel cars off the road. In fact, if the internet were a country, it would be the seventh most polluting country.
Susatainable website design – Pixeled Eggs way
At Pixeled Eggs, we design and build smart and modern websites with three main considerations – Usable, Findable and Trackable. We believe action now is better than a pledge for 2030. and we’ve added another ingredient into the mix. We’re considering sustainability as part of our standard process for everything we do, creating Robust, Desirable and Sustainable websites.
We already minimise our code to ensure our pages are as lightweight as possible, use caching effectively. We switched to a green hosting solution a few years ago, and we consider sustainability throughout our design and build process, with the view to creating better-performing websites with a lower carbon footprint.
Our Creative team considers how we simplify site designs with a clear structure that would increase engagement while retaining visually impactful layouts. Our Technical team regularly explores new ways to improve the efficiency of our code and reduce server requests. Client Services and Operations work with our clients to help review and optimise websites for overall performance to ensure lighter weight and, therefore, more sustainable websites are maintained.
We want to help people understand the environmental impact of their digital presence, which is why we’ll share all that we can on our sustainability journey and I really hope you’ll join in the conversation too.
A zero-carbon world
When it comes to a zero-carbon world, it is clear that we need significant action, strong legislation, and the collaboration of world leaders to bring about the profound change necessary to make a difference. However, we cannot wait for change to happen. We also need a systematic change within the design and development industry to create a more environmentally friendly web. At Pixeled Eggs, we collaborate through industry groups and the B Corp community to promote awareness and advocate a better way for the industry to operate. As clients and site administrators, you can question the choices of your designers and developers and create websites that are more accessible, perform better and are environmentally sustainable.
Updated: August 2024
The Earthshot Prize case study
The Earthshot Prize is designed to incentivise change and to help repair our planet over the next ten years. For this project we needed to create a standout website that would bring the campaign to life and communicate the different phases of the award process.
