Building sustainable websites that use the least amount of CO2
[blockquote]T[/blockquote]he carbon footprint of our gadgets, the internet and the systems supporting them account for about 3.7% of global greenhouse emissions– these emissions are predicted to double by 2025. Source: BBC. As WordPress website development specialists, We must do what we can to help mitigate the energy usage and subsequent pollutants by building sustainable websites. Below is a list of techniques that can be used:
Design & content
- SEO
Improving SEO and the user experience can significantly reduce bounce rates and enable users to find what they are looking for in fewer steps, meaning the website can deliver the same value with fewer page views and thereby reducing website emissions. - Findability
The more findable web content is, the fewer page downloads are required to find the content which helps reduce carbon emissions and your website’s carbon footprint. Keyword optimisation, quality content, clever link building, no broken links and 301 redirects are a few tools to make the website and its content more easily findable on the net. - Copywriting
Write short and concise copy that reduces page download time and results in low carbon emissions. - User experience (UX)
Intelligent navigation and searching ability on websites with a large amount of content can streamline the user experience – the necessity to visit multiple web pages is reduced and aids in the site becoming more environmentally friendly.
- Reduce video
Watching online videos accounts for 60% of the world’s internet traffic a year, which is roughly 1% of global emissions, according to French think tank, The Shift Project. Reduce video content on the website unless its 100% required e.g. product launch or instructional video. - Responsive design (mobile friendliness)
As of February 2021, Statscounter.com has the global website traffic breakdown as follows; Mobile – 54.33%, Desktop – 42.77% and Tablet – 2.9%. It goes without saying that attention needs to be given to making sure the website is responsive (mobile friendly) and delivers a great user experience. - Shared Resources
Using shared resources like Google’s javascript library, and a CDN network like Cloudflare helps speed up the website through sophisticated caching techniques. This results in faster download speeds which will lighten the impact on the environment. - HTTP requests
Reducing the amount of HTTP requests has a big impact on the site’s carbon footprint. By enabling browser caching and using techniques like embedding images in css will assist in decreasing the HTTP overhead and assist with improved download times and decrease the processing required on the web server.
Website development
- Write clean code
Optimise the code, and avoid unnecessary plugins and choose plugins that minimise server load and don’t add unnecessary weight on the front end. - Caching
Caching is the process of storing frequently-accessed data temporarily in a cache so you can reuse it for subsequent requests. There are different types of caching: - Browser caching
This is where the browser stores static web page content so the next time someone visits your site, the page is pulled from the cache on their computer instead of being downloaded again. - Object caching
Object caching involves storing database queries so that the next time a piece of data is needed, it is delivered from cache without having to query the database. - Page caching
Page caching involves storing the entire HTML of a page so that on subsequent views, the content (including files and database queries) can be generated and displayed without WordPress having to do it each time. - Opcode caching
Opcode caching involves compiling PHP code between every request. For PHP code to execute, the PHP compiler has to compile the code first and then generate executable code for the server to execute. Opcode caches the already compiled code. - CDN caching
Content delivery networks (CDNs) using edge servers around the world to store static website files (i.e. CSS, JavaScript, and media files) for faster delivery to users who are geographically distant from the host server. - Use less javascript
JS impacts website efficiency in two ways: by adding file weight to the web page and by increasing the amount of processing required by the user’s device. The second of these is something that applies to JS much more than to other types of files.
Functionality driven by JS is processed on the user’s computer or phone and increases CPU usage, which in turn increases the energy consumption of the device. - Don’t use inline css
It takes the browser longer to process inline styling and is in fact mixing up markup with styling which is not great web design practise. - Optimise fonts
There are technical strategies that can be used to minimise the size of fonts on websites and we have seen that even with custom fonts, it can result in file size reductions of up to 97%. Try these techniques to reduce the size of font files: - Stick to modern web font file formats like WOFF and WOFF2, which use higher compression methods compared to TTF, OFT and SVG file formats.
- Subset fonts to only include the characters needed on the website
- Use AMP
AMP is designed to make content load faster on mobile devices by stripping out unnecessary code and file weight, delivering a minimalist version of the original web page. In theory, technologies like AMP do not actually help much if the website is efficient to begin with, but in cases where the original web pages are not as lean as they should be, AMP can be a useful tool to strip out the fat and deliver a more lightweight and energy efficient version to mobile users.
NB! It should also be noted that Google prioritises AMP content in mobile search results for news related topics in particular, so it can help increase visibility of our content. The downside is that content may be served on a Google domain and some of the things stripped out by AMP could be things that you consider important. It’s a powerful tool, to be used with care.
- Use Progressive Web App technology (cache files on users device)
- Use latest version of PHP
Too many security issues with old versions and latest versions of PHP make sure the server is operating at its optimum level. - Security
Good security practices will help keep out unwanted traffic. Processes like blacklisting IP addresses, CDN infrastructure, server firewalls and setting correct file/folder permissions on the server all aid to a secure website which definitely benefits the website and web server from an energy consumption point of view. - Block bots
By blocking unnecessary bots from visiting the website reduces the load on the server, reduces processing required and in turn reduces the carbon emissions from the web server. - Writing reusable code
- Keep software up to date
Keep website and hosting software up to date to take advantage of latest technology features - Regular maintenance
Regular maintenance e.g. database optimisation will make sure the website stays 100% optimised.
Green renewable energy website hosting
- Use web servers powered by renewable energy
- Optimise hosting environment (PHP & MySql/database optimisation)
- Use server caching
We build dynamic websites with constant calls to a database to populate a web page and this increases server load. Use WPEngine principles for hosting. And dare I say it, on occasion static html websites might be the preferable way to go if sustainability in design is the key element!
Business operations
Ensure your own organisation is operating sustainably:
- Offset your carbon
- Invest in renewable energy or renewable energy certificates
- Reduce your energy consumption
- Eat less meat
- Save water
- Reduce your waste – buy without packaging when you can
- Recycle
- Support ethical and sustainable companies
- Use the ecosia search engine that plants trees for searches
Our digital marketing services
Digital marketing
Leading digital marketing agency – digital marketing strategies & campaigns: social media, web, SEO, PPC, content creation & reporting.
Branding and graphic design
High quality branding and graphic design for digital and print. Specialising in branding, publications and digital design.
Website design & development
Satisfied clients
Joette Emerton
2023-05-23
I've worked with The Ethical Agency for a few years now, the team is always friendly and helpful and they produce great work! They're always mindful of costs with us being a non-profit, which we really appreciate. All round a great design agency that I highly recommend!
Kira Erwin
2023-05-20
The Ethical Agency recently designed and developed the Africa Zero-Waste Hub. They were very professional and responsive. I was really impressed by both the creativity and development skills. I would use them again in a heartbeat!
Liam Murphy
2023-05-17
Working with The Ethical Agency has been easy, effective and has delivered the desired results. They became a part of our team and delivered across a range of project needs, equipping us with a brand and site that allows us to more effectively achieve our mission. All this while reflecting the same values of sustainability and respect for people and the planet that are at the core of what motivates us at Vittoria Technology.
StreetTalkTV
2023-05-04
We have been a client of The Ethical Agency since they started 2018. They devloped our branding, logo and website. Their service has always been exceptional with great attention to detail and personal care. Being activists and film makers our content is very important to us and we feel comfortable knowing it is in good hands. We would highly recommend them to anyone especially if you looking for an agency to help you grow your business and have a professional experience.
Matthew Rosmarin
2023-04-10
I have worked with TEA on various projects and they are an incredible agency to work with! Super creative, fast turn around times and all round smart, dedicated and highly professional team.
Giulia Salvaterra
2023-03-29
It has been an absolute pleasure working with The Ethical Agency to develop a brand identity and website for the Urban Food Systems (UFS) Coalition. The team at the Agency was extremely responsive, professional and accommodating to our needs and shifting timelines, all while delivering a very good product that is both functional, effective and captures the essence of the Coalition. We also appreciate that The Ethical Agency goes beyond providing great service - CSR and ethical standards are part of their DNA, and they are well versed in translating this into tangible outcomes and deliverables. We’d be happy to work with them again!
Nadia Scheffer
2023-03-27
Working with Brett and his team has been a big pleasure.
They took on a challenge of creating an amazing logo and packaging for an unusual business concept. Can't wait to further expand my brand identity with their help!
Jennifer Stastny
2023-03-22
I have worked with The Ethical Agency on several projects now and am blown away by their ability to reflect sustainability concerns in their designs and image selection. A great, deadline-driven team to work with.
Lerato Letebele
2023-03-22
True to their brand, their work ethic and professionalism is what will keep me coming back. As a Head of Communications at the Centre for Environmental Rights, the Ethical Agency has come through for me on various projects we've worked on together. Not only do they always bring the passion and support for the project, but they always bring their A-Game when it comes to creativity. Highly recommended!
Greg Viljoen (Bigger Than Me)
2023-03-22
We have worked with Ethical Agency for a number of years as strategic partners and its great to work with a team that aligns with our values of trying to create social change through purpose led strategies and business practices. Highly recommended