Why you need to improve the sustainabilty of your apps and websites
Did you know the tech sector is responsible for over 3.5% of global carbon emissions in 2021?
To put that into context that is equivalent to the CO2 emissions of the UK, Germany and France combined!
Our awareness of climate change and the environmental impact of our daily lives has never been greater. While we recycle, use LED lightbulbs, insulate our homes and switch to renewable energy providers or electric vehicles, we don’t really think about the environmental impact our technology has. If you have a business has a website or app you are probably unaware of the carbon footprint it will be adding to the problem.
The amount of energy that data centers require is a large part of the problem. Worldwide, data centres consume about 2% of global electricity, a figure set to reach 8% by 2030. But, by 2028 it is estimated the surge in data centres, and other large users, will consume a huge 29% of Ireland’s electricity. It is already one of the EU’s worst carbon emission offenders and faces fines of more than €250m for missing 2020 targets on reducing greenhouse gas emissions.
As software engineers, product designers, and business owners, we have our responsibility in adopting a more sustainable approach in developing software and digital services. Now is a good time to integrate such approach in your app development, both on server and font end sides.
This has lots of benefits for both the environment and the company, including:
- Reducing costs, with more efficient use of data and platform structures
- Improves the company image as consumers are becoming more aware of companies environmental impact and make more sustainable choices
- Increases traffic to your site and improves user experience
While it is better to build with environmental and sustainability practices in mind from the beginning of your software project, there are still many ways you can reduce the carbon footprint of your existing digital platforms.
1. Hosting and Data Storage
As we highlighted already, one of the biggest culprits behind tech’s carbon footprint is web hosting, storing your website or app’s data in data centers (i.e “The Cloud”). Data centres use LOTS of electricity to keep your websites online, and their servers nice and cool. Hosting a website is thought to generate around the same carbon footprint per 10,000 visitors as driving 5,000 miles in a new car.
Data centers are basically buildings that house computers storing all those websites’ data. There are 8 million data centers worldwide, generating the same amount of carbon emissions as the global airline industry!
To help combat this and reduce your carbon footprint is to choose a more sustainable hosting service that runs on renewable energy. If the power it needs to run is coming from wind, solar, hydro, or thermal energy, less CO2 will be created and released into the atmosphere. Some also donate to renewable energy programs to combat their carbon footprint.
You may be surprised by how many there actually are. The Green Foundation has a roundup of 500+ green hosting companies found around the world. One green web host, Green Geeks, offsets its carbon footprint by 300%. It invests three times the amount of energy it pulls from the grid into renewable energy through the Bonneville Environmental Foundation.
Choosing one that meets your need from a technical point of view is important, but also one that uses renewable energy and has efficient data centers will definitly set you in the right direction.
2. Reduce Image Sizes
We all love beautiful high quality images on our websites and apps to illustate important points, increase engagement and reinforce brands. But, designs that use lots of images, or very large images, need more storage, and require users to load more ‘stuff’ to see your web page. Both of these use more energy and affect your carbon footprint. They can also slow down your website.
To start optimising your app’s resources, review and delete unused image and media files. Always prefer vector images, or jpeg if no alpha channel is required, as it weighs less while keeping excellent quality. Also compress your images, and remove all useless metadata.
If you are using design software and other image management software, they often include additional metadata when exporting assets, such as OS and software informations, geolocation data, and so on.
For non-vector assets, you should optimise your assets size according to what’s needed by your app. If your app will display an image of 60px@3x, there is no need to use a bigger one. By resizing your assets, they will weigh less, and will also load faster on your users devices.
Here are some image optimisation tips to remember whether you are building websites or apps:
- Compress all images before uploading to your server.
- Resize images to no more than the maximum pixel width of your users’ screens. Anything more than that is just a waste.
- Save images in WebP so that browsers that accept the image format will more efficiently deliver them to your visitors.
- Use lazy loading so your server doesn’t waste time processing images visitors will never see.
3. Build Minimal Interfaces
This is standard practice for us working in an agile process for weba nd app design. But is also helps to reduce the environmental impact of your app as you don’t waste energy on features that are heavy and unncesseary for your app.
We recommend to always start by building a minimum viable product (MVP). This will keep you from adding data-hungry or bloated features until you have data from users to confirm that they’re needed.
For websites or PWAs, practice mobile-first design. The smaller screen space inherently encourages leaner designs.
Another thing to do is avoid building sites or apps with super trendy features or components. If they don’t have staying power, you’re going to have to revisit the design and log more hours online, consuming more data.
4. Remove Unused Features
The more rich and complex an app’s interface is, the more energy it consumes and heavier it is. In the Chaos Report 2015 of Standish Group, 45% of requested features from users are rarely or never used.
It’s important to use data to determine the usefulness of each piece of content and feature. This can be done during the planning phase, but is also a continuous process, which consists of analysing usage data of each features within your app.
A good approach is that if more than 5% of your users use a feature, it is interesting to keep it. Otherwise, it might be a good thing to rethink and refactor it, and in some last resort situations, to discontinue it.
5. Follow App Energy Efficiency Best Practices
Apps performing unnecessary background activity waste energy and kills battery life. Some of the common causes of energy waste by background Apps include Bluetooth usage, downloads, location updates and silent audio playing.
When your app enters background, make sure you don’t let tasks continur to run that don’t need to be done in background.
Use device API to check if low power mode is enabled, and adapt resources usage accordingly. For example, you can reduce frequency of data update if low power mode is enabled.
It is a good practice to implement lazy load — and not only from a sustainability point view. By loading resources only when needed on your app, your not only reducing the data being transferred, but also improving the speed, reactivity and overall user experience of your app.
6. Improve Site Speed
Websites need to be fast to be successful. It’s a fact. And it also happens to be better for the environment, too.
When a page is taking ages to load, it’s not only boring for your visitors – it’s also sucking up energy from the server and using electricity. So, the quicker your website loads, the less environmental impact it has.
There are some super simple ways to improve your website’s load speeds – here are just a few to get started on:
- Find out how fast your site actually loads, using a tool such as Pingdom or GTmetrix
- Reduce the size of your images using a compressor tool such as Kraken
- Assess your hosting provider to see if it’s causing your site to drag (or even crash)
- Use a CDN (Content Delivery Network) such as CloudFlare to direct requests to the visitor’s closest server
- Fix broken links and redirects – try out Screaming Frog to help spot them
- Use lazy loading, where the content above the fold loads faster than the rest of the page
7. Improve Your SEO
Did you know that one Google search can generate up to seven grams of CO2? That’s about half the amount generated by boiling a kettle, which doesn’t sound so bad. Until you imagine actually boiling a kettle for every two Google searches you make in a day, and then suddenly you’re in a lot of hot water!
Of course, you can’t reduce Google’s carbon footprint single-handedly, but you can try to give users what they’re looking for. Reducing the amount of searches and sites people are loading in one go, reduces the amount of energy being used each time they land on a new page.
Also, it’s better for your conversions! Win Win!
To reduce the number of people bouncing off your site and back to Google:
- Prioritise key information so that it’s easy to find in as few clicks as possible
- Make your site mobile-friendly, as 60% of Google searches are carried out on mobile
- Structure your pages with headings and avoid huge walls of text, as this can scare impatient visitors away
8. Use Caching
In a nutshell, cached data is stored on the user’s device. This way they see your webpage sooner, and their device uses less energy to load it. One is good for your business, the other is good for the planet.
When you cache your webpages and store them in multiple locations (typically around the world), that’s called a “Content Delivery Network” or CDN. If you have users spread out across multiple countries, this can speed up their experience because your website data can be stored closer to them.
There are so many things that are going to drag down the performance of a website or app, forcing users to sit around and wait while the server works hard to process data behind the scenes.
Here are some ways to allow your server to work more efficiently and to make your website run faster:
- Implement caching at every level: browser, page, server, database, etc.
- Use a CDN.
- Implement Gzip compression.
- Combine and minify your code.
- Use CSS sprites.
9. Use Fewer Videos
We all know that videos are a brilliant and effective way to engage visitors. They are fantasic in sharing information and is a regular recommendation to use videos more to improve enagement on your website.
However, stuffing your site or platform with videos, makes it increadibly heavy. As we highlighted earlier if images use up a lot of energy, videos are going to use even more energy to host and play.
But you will be relieved to hear that the solution is quite simple and you don’t need to get rid of all your videos. Embedding your videos, using lower resolutions and add videos sparingly can make a huge difference.
Consider turning off autoplay, so visitors have the option of whether to view each video or not. This improves their experience, and saving energy consumption.
Here are some things to keep in mind when including video on your site:
- Save videos as WebM (the WebP multimedia counterpart) and allow browsers that accept the file format to deliver videos more efficiently to visitors.
- Save videos as MP4 for everyone else and reap the advantages of smaller file sizes, but still good quality video.
- When possible, embed your videos from a third-party video storage and streaming platform such as YouTube.
The best part is that most of these tactics are the best thing for your website anyway, such as increasing loading speeds and reducing bounce rates. Turns out, what’s good for your visitors is good for your site, and is good for the planet too!
If you’d like more help with improving the sustainability of your digital project get in touch by clicking the button below.