Around 10% of the world's total electricity consumption is through the internet and just to highlight the point, it was 8% in 2012! (Source: Swedish KTH) The influx of new users from different countries is expected to triple the energy consumption through websites in the next 5 years! (Source: Userzoom) Sorry to burst your bubble folks but running a website may not be as harmful as your vehicle guzzling down petrol but it contributes to a significant portion of the world's energy consumption.
The simple answer to what's going on; Data! With the hundreds of websites available on the internet, we are producing humongous amounts of data every minute. Every search, every click, every video streamed, every photo opened on your website sets several servers to work producing a chain reaction!
As a website owner, you have to understand that for any website to reduce its energy consumption, it has to be optimized perfectly to reduce load time! You can keep the following in mind while getting your website designed to help reduce energy consumption on your website:
Sustainable Energy Consumption through Websites as Merchants
Discoverability
The easier you make it for people to find your website, the lesser the energy consumed. If your users have to navigate through multiple pages, the number of server requests will increase which in turn will draw in more energy! Discoverability plays a major role in the number of servers at work, and the more the number of hoops your users have to jump through to get to the desired page, the more energy used up! A great user experience makes using the web easier for all and more enjoyable and reduces the amount of energy wasted navigating to pages that aren't relevant trying to decipher what users should do next.
What can you do?
- Label your menus clearly to make them easily navigable
- Have the correct titles for categories and subcategories in menus
- Use a dynamic search box to reduce user movement and make things easier to find
- Optimize every page of your site with rich content to rank up in Google searches
- Weed out 404 errors on your webpage
Performance
A website performing efficiently will use less energy and reduce the number of servers working on it! Any lags, any downtime, any problems, will eventually slow down your website drawing in more energy. We've all faced issues where a site takes too long to load or certain portions of it load and others don't. The constant refreshing and trying to get the website to open up is a fault of performance and your best bet is to reduce page load speed by improving SEO & UX through.
What can you do?
- Reduce the number of redirects you have on your site
- Reduce the number of plugins as they slow down the whole site
- Run regular audits to evaluate energy consumption
- Enable browser caching for users to not re-download pages every time they visit your website
- Use stripped-down, fast-loading versions of your website on mobile visitors through accelerated mobile pages
- Remove render-blocking JavaScript from the website to reduce time spent running the script
- Improve server response time by weeding out slow database queries, slow routing, lack of adequate memory, etc
- Use HTTP/2 to send and receive HTTP requests and responses asynchronously via a single TCP connection
- Use prefetching to fetch resources and related data before they are needed.
- Compress content before putting it up on the website
Minification
Minification is nothing but removing unnecessary characters from your code to reduce file size to increase speed, improve accessibility, and create a better UX for users. These include whitespaces, line breaks, comments, and block delimiters which are useful for us humans but unnecessary for machines. Minification won't cut your page load speed in half but will surely go a long way to help reduce whatever extra time was being taken up.
What can you do?
- Get rid of the spacing, and comments used in the developmental
- Crunch variable names to minimize code and reduce the file size
- Use a Content Delivery Network (CDN) for automated minification and reduce manual minification load
- Use minification tools for thousands of lines of code and avoid manual error
- Use caching plugins which include the minification options wherever possible
Fonts
Web fonts can enhance the visual appeal but add significant file weight to the websites on which they are used. Webfonts allow text to be selectable, searchable and zoomable, while at the same time providing consistent and sharp rendering regardless of screen size and resolution however each font is an additional resource that users must download when accessing your site, which adds to the amount of time your website needs to load. A single font file could be as much as 250kb, and that's only for the standard weight! Bold and other text formats add additional weightage. The larger the file, the more the energy consumed!
What can you do?
- Use system fonts such as Arial and Times New Roman which can be used without loading any font files as they are already on the user's device
- Use fewer font variations such as bold and italics to limit the number of different weights for each typeface
- Use subset font resources to deliver only the characters needed for a particular page
- Check Google Analytics to identify browsers and devices most popular with your users and use optimized font formats as per those browsers
- Use local() to check if a font is already on the user's system to ensure additional HTTP requests aren't made
Images
Any e-commerce website has the sole purpose of selling something to its user. With umpteen number of websites, there are always chances of two websites selling similar products or services. Here page load speed is what will rank your website higher in the search results. The more images on a website, the more the data needs to be transferred, and the slower your website. The slower your website, the more energy used. Regardless of any technical optimizations, try to incorporate ways to reduce energy consumption:
What can you do?
- Use efficient file formats for each image, such as WebP instead of JPEG
- Reduce images that are not visible to the user, such as in carousels
- Optimize the images for the website to reduce the load
- Use conditional logic for appropriately sized image files depending on the user's device
- Keep standard resolution for images
- Use CSS3 methods to replace images with gradients and shadows to create a visually appealing effect
- Use vector graphics or CSS for logos and shaded areas
Videos
A recently popular trend, videos are far more data-intensive and processing-intensive forms of content. Web-users love high-resolution videos, but if your website isn't optimized enough and slows down due to them, this can cause performance problems. These performance problems further engage more servers which in turn draws in more energy!
What can you do?
- Try to reduce the amount of video streamed by removing auto-play from videos
- Keep video content short and relatable
- Use embedded videos as opposed to natively running them on your website
- Use data compression tools to reduce the size of video files without degrading image quality
- Convert video files to HTML5 formats such as MP4 and WebM to reduce load time
- Analyze if your website actually needs videos or not
Backend Tech Stacks
Backend tech stacks are for websites what food is for the body. Along with the elements of the website, one should also keep in mind the servers your websites are running on to ensure the most energy-efficient versions! If you are using older servers, this will increase the load time and thereby increase the energy usage!
What can you do?
- Explore newer versions of PHP that are not only faster but also use fewer server resources and therefore less energy
- Use servers such as Node and Ruby to reduce our energy consumption on web pages
- Explore virtual private servers that offer hosting, storage, computing, and other solutions for online businesses to optimize websites
Pioneering Companies for Web Energy Conservation
It may seem like a task, however, all is not lost! The most important thing you can do to reduce the environmental impact of your website is to power it with renewable energy and over the past couple of years, major tech companies have opened their doors and are paving the way for sustainable energy usage and are bringing in multiple changes.
Here are two companies showing us how it's done:
Google:
As of 2017, Google is 100% powered by renewable energy and is the world's largest corporate buyer of green energy!
Shopify:
The Shopify Sustainability Fund is committed to spending at least USD 5 million annually to fight for our environment by reducing carbon negative commitment, creating a Carbon-neutral platform, and engaging in Carbon-neutral operations!
Marmeto's Contribution to Energy Consumption:
As a tech solution provider for multiple Shopify merchants, we are constantly optimizing and working on solutions to reduce future problems for our merchants. As dedicated Shopify solution providers, we agree wholeheartedly agree with the green initiatives and practice and stress on energy conservation methods for our clients.
Tools to measure energy consumption on websites
If you're looking to measure the energy consumption of your website do check out the following tools:
- Mobile Effectiveness Index to measure the energy consumption of a website or an application on a real mobile device.
- Greenspector to launch a test and measure energy consumption.
- Website Carbon Calculator, to understand a zero-carbon internet.
Conclusion
Energy in all forms is one of the most important aspects of human life. It's what powers us and drives us. It's time for us to step up and take responsibility for our work! It's time we put old ways of working to rest and evolved with the needs of the hour! Energy Consumption is the only way to move forward!
The greener your website, the better for you in the long run!
We are doing our bit, are you?
