Building sustainable websites that use the least amount of CO2

The 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

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.

Website hosting

  • Use 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

    Satisfied clients

    The Ethical Agency
    Based on 13 reviews
    powered by Facebook
    Marc Sherratt
    Marc Sherratt
    Brett is a highly detailed and reliable professional that helped us achieve a well crafted website for our architectural firm. I strongly recommend him.
    Scott Rogers
    Scott Rogers
    I've worked with Brett and his team for over a year and their customer service is excellent. They deal with queries and changes swiftly and are extremely easy and enjoyable to do business with. Thanks Ethical Branding.
    Robert Worthington
    Robert Worthington
    Brett helped us develop a set of new icons for our software platform. Was great working with him and very happy with the results.
    Melanie Esterhuizen
    Melanie Esterhuizen
    Brett is very reliable and great at what he does - I'd highly recommend him.
    Nina Sierra Rubia
    Nina Sierra Rubia
    Great mission, great prices, great work!
    Trenton Birch
    Trenton Birch
    Great company, always deliver and care about what they do and our planet
    Richard Mills
    Richard Mills
    We have worked with Brett on a number of projects in the last 5 years the most notable our website www.streettalktv.com. He is always very responsive, brings great fresh new ideas with a sense of humour. He strives for excellence and professionalism in all that he does. We continue to have a great... working relationship.read more
    Bianca Kaiser
    Bianca Kaiser
    I have been working with Brett for years on various projects and would 100% recommend him. He is super reliable, always goes the extra mile and works at lightening speed when the pressure is on.
    Noel Da Costa
    Noel Da Costa
    Brett and I have been working together for years. Unfailingly reliable and always willing to go the extra mile with a smile. I'm a big fan of Ethical Branding. 📢
    Lee-Roy Davids
    Lee-Roy Davids
    Their work ethic is like none other! Professional and turn around time is out of this world!
    Lungi Mthethwa
    Lungi Mthethwa
    I have been working with Brett since last year and I must say that I am super impressed with his creativity and services. He is always on the ball, works ahead of time and loves to brainstorm new concepts. Ethical Branding is amazing and I would definitely recommend it to anyone!
    Elmari Dell
    Elmari Dell
    Ethical Branding managed to define exactly what we wanted as the brief was influenced by a number of people. Proposals were presented in no time and we appreciated the clear professional guidance and enthusiasm with which Brett handled us. Our first steps were cautious, but it was easy to let go... and rely on his amazing creativity and experience. We also tested his patience to the limit.read more
    Mark Patrick Bland
    Mark Patrick Bland
    These guys turned around my CI (Corporate Identity) and website in no time at all, delivered exactly on brief, went above and beyond and just understood what I was wanting from the get go. Love what you guys did for our TASTE Walking Tours - thank you!
    Next Reviews