Minimizing Your Website Power Consumption: Top Optimization Tips

As websites get more feature-rich and complex in order to attract and retain visitors, they consume more power and drain batteries from devices faster. So the big question is: what can developers do to make websites less power-consuming without sacrificing user experience and performance? As it turns out, there is a lot that can be done.

Why website power consumption is an issue

Before diving into optimization, let’s take a closer look at the issue of power consumption. The apps that consume the most energy are usually games, YouTube (and similar video-hosting apps), and geolocation services. While browsers and websites are not in the top three, you shouldn’t overlook them since many apps run on JavaScript and WebView, which results in higher power consumption. In addition, many websites are packed with too many features like WebGL, having a further impact on power consumption. This leaves us with two serious consequences: poor user experience and high costs spent on page and content loading.

User experience

If a website is too heavy, not only does it drain your battery much faster – it may also have performance issues, such as slow loading. These issues, in turn, negatively affect user experience and may result in lost conversions or lost visitors. You can check the performance of a website with a specialized tool like PageSpeed Insights that provides pretty detailed reports on the current issues with a page and what can be improved.

The cost of loading resources

It may come as a surprise, but the cost of loading the resources of an app (pages, images, etc.) may be pretty high, especially if you calculate the monthly cost. Therefore, if you work with a development company, it will be much more reasonable in terms of finances to optimize your app and make it lighter.

It is also important to remember about mobile device components that consume most of the battery when processing a website. They are:

• The main processor aka the CPU;
• Graphic processing aka the GPU;
• Screen;
• Networking (Wi-Fi mostly).

Among these, the screen is the only component that a user can control in terms of its power consumption (i.e. by adjusting brightness). As for other components, the system efficiently manages their performance based on the current load and the needed actions. For example, if there is a huge website to process, the system will kick into high gear very quickly but will also quickly get back to the low-power state once the task is completed.

Three scenarios when a website draws power from a device (and how to minimize it)

You might think that a website (or an app) consumes power only when it’s active and when a user interacts with it. However, there are three cases when power consumption happens:

• When the website is open and a user actively interacts with it;
• When the website is at the frontmost but the user does not interact with it;
• When the website is in the background.

Each scenario will require a developer to use a different approach towards reducing website power consumption since the website will be in a different state every time. Let’s have a closer look.

The website is open and the user is active

The most obvious scenario is when the website is open on your mobile device and you actively interact with its content. In this case, you’ll want the website to work fast in order to provide a smooth user experience and deliver content efficiently. Unfortunately, high performance equals high power consumption but there are a few optimization tips to resolve the issue. 

The first thing you can do is reduce the time to first paint. Time to first paint is the time between navigation and when the first pixel is painted on the screen. Naturally, if you reduce time to first paint, the power consumption will fall down too. You can do so by:

• Caching;
• Generating and inlining critical CSS;
• Serving images in next-gen formats;
• Compressing text-based assets.

There are many more optimization options and we’ll cover them in greater detail below. Getting back to optimizing the power consumption of an active website, the next step is to try and minimize the impact of user interactions like tapping and scrolling. These actions are highly power-consuming so one of the best ways to optimize it is by using browser “fast paths” instead of JavaScript custom scrolling. 

The website is open and the user is inactive

Another scenario when a website drains the device’s battery is when the website is open but the user does not interact with it. So, despite the user’s inactivity, the website itself remains active and hence, continues to consume power. Here is what you can do to minimize this consumption:

• Minimize the use of timers and try to consolidate them into fewer chunks. In this way, CPU wake-ups will be triggered less frequently.
• Avoid animated content (i.e. CSS animations, spinner GIFs) that constantly triggers painting.
• Whenever possible, use declared animations so the browser can manage content’s visibility.
• Use WebSockets (or Fetch) for persistent connection instead of using network polling.

The website is in the background

There are several cases when a website becomes inactive: when a user switches to a different tab or to a different app or when the browser is covered by another window. In these cases, the system automatically performs various tasks to save power: suppresses timers and suspends CSS and SVG animations. 

However, even if the website is inactive, it might still consume power, mainly due to the CPU wake-up triggers. To avoid that, you can use APIs that prevent triggers from waking up the CPU. These APIs are:

• Page Visibility API: helps update the content only when the page goes active (becomes visible);
• Blur events: when the page is not focused, these events can stop the animation depending on the page.

General tips on optimizing the website power consumption 

In addition to the methods listed above, there are some general tips that may come in handy when you need to make your website less battery-draining. These tips are also applicable to the overall optimization of website performance since they help reduce the load and speed up task completion.

Cut down on JavaScript

JS, by all means, is great – but not when it comes to minimizing the power consumption by an app. Unfortunately, JavaScript directly impacts a website’s efficiency by adding file weight to a page and by increasing the amount of processing that’s needed. In other words, JS adds more work on top of what’s already been done and causes a website to consume a lot of power.

One of the ways to deal with the issue is simply to use JS more efficiently and know your way around it so it doesn’t cause any additional issues. For instance, if you cut down the JS execution time, you can decrease the power consumption significantly. 

Optimize images

Images weigh a lot and are one of the primary reasons why websites consume too much power. So the best way to optimize them is to reduce their size which, in turn, improves their load time a lot. You can do so by:

• Loading your images at the correct scale. If you rely on CSS solely, it will most likely resize the images to be larger than actually needed.
• Using specialized tools for image compression. Make sure that the tool compresses the image without sacrificing its quality
• Using corresponding file formats for different images.

Also, don’t forget about caching: it allows retrieving the content faster and eliminates the need to load the content from scratch since it’s already stored and ready to be delivered.

Use AMP (accelerated mobile pages) if possible

Accelerated mobile pages is an initiative by Google and its main aim is to create web pages that load quickly on mobile devices. AMP disposes of unnecessary code and file weight from your website and thus contributes to its faster delivery and load. Note that AMP helps build pages for static content only and are not very valuable if the website performs well already.

Use CDN

A content delivery network efficiently distributes the content across multiple servers and uses the server that’s closest to a user to deliver content to them. In this way, the delivery time reduces greatly which leads us to 1) faster load time and 2) less power consumption due to shorter delivery.

Network use

One more thing that can help you optimize the battery consumption is correct network use. The first and most obvious piece of advice is to use Wi-Fi instead of a cellular network, whenever it’s possible. But if you use a cellular network, it’s not the volume of transferred data that impacts the battery life – it’s the durability of the idle state of the modem.

It’s a common misconception that if you frequently send little volumes of data, it’s much better for a device’s battery than downloading a huge chunk of data at once. Turns out, it’s actually better for the battery when you download a massive chunk of data at once and cache it so the modem spends more time in an idle state. 

A note on sustainability

Have you ever thought about how much electricity the Internet is using? While this issue is getting more serious every year, not many people acknowledge it. Yet, it’s very real: the Internet consumes massive amounts of energy, which leaves behind a huge carbon footprint. Here are some numbers from the IEA report: the global data center use of electricity was approximately 200-250 TWh in 2020, which accounted for 1% of global final electricity demand. As for the electricity consumption of data transmission networks, the number was 260-340 TWh in 2020, which made 1.1-1.4% of the global electricity use.

And if you wonder how it relates to massive websites, there is a direct relationship since heavy websites demand more energy. Therefore, it’s the responsibility of developers to be conscious about website development: not only for the sake of low power consumption but also for the sake of sustainability. And even though it’s hard to measure the energy that a website uses, there are such metrics as data transfer or CPU usage that can help evaluate a website’s performance.