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
Digital marketing services – digital marketing strategies & campaigns: social media, SEO, Google Ads, PPC/Paid media, content creation, influencer marketing, video marketing.
Brand Strategy
World-class branding and graphic design services for both digital and print. Specialising in brand development, stationery, publication design, social media, digital and website design.
Website Development
Experienced WordPress website design and development, website maintenance and renewable energy powered hosting. Ensuring security and stability of your robust website at all times.
Our core service offering
Branding & brand strategy
Brand conceptualisation, brand guidelines, strategies, logo design & stationery.
Digital marketing strategies
Developing tailored, omni-channel marketing blueprints to guide all interventions.
Graphic design for print
Posters, flyers, publication design, annual report design, packaging, presentations, infographics and illustrations.
Website design and development
WordPress website design, web development, maintenance and hosting.
Video marketing
Creating, editing & co-ordinating video ad creatives, long & short-form social media, explainer videos, User-Generated Content (UGC), video testimonials & thought leadership. Tiktok · Youtube · Linkedin
Pay-per-click advertising
Reach the right people, right now. We create and maintain your Google ads and social media paid media campaigns.
Graphic design for digital
Social media banners, assets, ad creatives, headers, Google display ads, digital campaigns & presentations. Facebook · LinkedIn · Instagram · Twitter · Google
Search engine optimisation (SEO)
Researching, strategizing and implementing SEO campaigns and content. On-Page SEO · Technical SEO · Link Building · SEO Content marketing .
Social media management
Managing your social media channels on your behalf. Ghostwriting, curating, designing and posting social content. Round-the-clock community management.
Copywriting
Crafting authentic, original messages for digital and print.
Email marketing
Designing, developing, managing & optimising email marketing campaigns.