Currently, around 10% of the world’s total energy consumption is used via the internet. In 2012, it was 8%, and it is estimated that it could reach 20% by 2025. (Source: KTH Royal Institute of Technology, Sweden)
Data… is the answer to what’s happening. The thousands of websites available on the internet produce enormous amounts of data every minute. Every search, every click, every video streamed, every photo opened on a website sets several servers in motion, producing a chain reaction.
As a website owner, you must understand that for any website to reduce its energy consumption, it must be perfectly optimized to reduce loading time. You can consider the following when designing your website to help reduce energy consumption:
Accessibility
The easier it is for people to find your website, the less energy it will consume. If your users have to navigate through multiple pages, the number of server requests will increase, which in turn will consume more energy. Accessibility plays a significant role in the number of servers running, and the more obstacles your users have to overcome to reach the desired page, the more energy they will consume! An excellent user experience makes using the web easier and more enjoyable for everyone.
What can you do?
- Label your menus clearly for easy navigation.
- Use accurate titles for categories and subcategories in your menus.
- Use a dynamic search box to reduce user scrolling and make searching easier.
- Optimize each page of your site with rich content to rank well in Google search results.
- Eliminate 404 errors from your website.
Performance
A website that runs efficiently will consume less energy and reduce the number of servers working on it. Any delays, downtime, or issues will eventually slow down your website and consume more energy. We’ve all encountered problems where a site takes too long to load, or some parts load while others don’t. Constantly updating and trying to get the website to load is a performance issue, and your best option is to reduce page load speed by improving SEO and UX.
What can you do?
- Reduce the number of redirects on your site.
- Reduce the number of plugins, as they slow down the entire site.
- Perform regular audits to assess energy consumption.
- Enable browser caching so users don’t have to redownload pages every time they visit your website.
- Use simplified, fast-loading versions of your website for mobile visitors through Accelerated Mobile Pages.
- Remove rendering-blocking JavaScript to reduce script execution time.
- Improve server response time by eliminating slow database queries, slow routing, insufficient memory, etc.
- Use HTTP/2 to send and receive HTTP requests and responses asynchronously over a single TCP connection.
- Use prefetching to retrieve related resources and data before they are needed.
- Compress content before publishing it to the website.
Minimization
Minification is simply removing unnecessary characters from your code to reduce file size, increase speed, improve accessibility, and create a better user experience. These include whitespace, line breaks, comments, and block delimiters, which are useful for humans but unnecessary for machines. Minifying won’t cut your page load speed in half, but it will certainly contribute significantly to reducing the extra time it takes to load.
What can you do?
- Remove spacing and comments used in development.
- Cross-link variable names to minify code and reduce file size.
- Use a content delivery network (CDN) to automatically minify code and reduce the burden of manual minification.
- Use minification tools for thousands of lines of code and avoid manual errors.
- Use caching plugins that include minification options whenever possible.
Typography or fonts
Web fonts can enhance visual appeal, but they significantly increase the file size of the websites where they are used. Web fonts are an additional resource that users must download when accessing your site, increasing loading time. A single font file can be up to 250 KB, and that’s just for the standard size. Bold and other text formatting add even more weight. The larger the file, the more processing power it consumes.
What can you do?
- Use system fonts like Arial and Times New Roman, which can be used without loading any font files since they are already on the user’s device.
- Use fewer font variations, such as bold and italic, to limit the number of different weights for each typeface.
- Use subset font resources to provide only the characters needed for a particular page.
- Consult Google Analytics to identify the most popular browsers and devices among your users and use font formats optimized for those browsers.
- Use
local()to check if a font is already on the user’s system to ensure no additional HTTP requests are made.
Images
Any online store has the sole purpose of selling something to its users. With countless websites, there’s always the possibility that two websites will sell similar products or services. Here, page load speed is what will rank your website higher in search results. The more images a website has, the more data needs to be transferred, and the slower it will be. The slower your website, the more energy it will use. Regardless of 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 the size of images that are not visible to the user, such as those in carousels.
- Optimize website images to reduce loading times.
- Use conditional logic to ensure image files are appropriately sized based on the user’s device.
- Maintain standard image resolutions.
- 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
Videos are a form of content that requires significantly more data and processing resources. Web users love high-resolution videos, but if your website isn’t optimized enough and slows down because of them, this can cause performance issues. These performance problems further burden more servers, which in turn consumes more energy.
What can you do?
- Try to reduce the amount of video streamed by disabling autoplay.
- Keep video content brief and easily identifiable.
- Use embedded videos instead of playing them natively on your website.
- Use data compression tools to reduce video file sizes without degrading image quality.
- Convert video files to HTML5 formats like MP4 and WebM to reduce loading times.
- Consider whether your website truly needs videos.
Backend
You should consider the servers your website runs on to ensure you’re using the most energy-efficient versions. Using older servers will increase loading times and, consequently, energy consumption.
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 like Node and Ruby to reduce our website’s energy consumption.
- Explore virtual private servers (VPS) that offer hosting, storage, computing, and other solutions for online businesses to optimize their websites.
Energy in all its forms is one of the most important aspects of human life. It’s what powers us. It’s time we step up and take responsibility for our work. It’s time we abandon old ways of working and evolve with the needs of the moment. Energy consumption is the only way to move forward and reduce our carbon footprint. The greener your website is, the better for you and your environment; in the long run, you’ll see the benefits of your efforts.
Original article: https://marmeto.com/blogs/e-commerce/tips-to-reduce-energy-consumption-on-webpages
