Building sustainable websites that use the least amount of CO2
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
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.
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.
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
- 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.
- 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 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
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.
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.
- 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!
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
- Support ethical and sustainable companies
- Use the ecosia search engine that plants trees for searches