Websites can drain energy at multiple levels.

The main ones are end-user devices, network infrastructure, and data centres.

Devices

The power consumption of devices depends primarily on the CPU (main processor), GPU (graphics processing unit), network, and display. The latter is relatively constant and under the user's control (by adjusting screen time and brightness). The energy efficiency of CPU, GPU, and network hardware can vary more and can be optimised by web developers.

The performances of the CPU and GPU are automatically adjusted by the system based on tasks that are being processed. This is done by turning certain components on/off and modifying their clock rate. Therefore, reducing the amount of time spent in high-power states and let the hardware return to idle mode as much as possible can reduce power consumption on devices. This can be done by reducing the use of timers, running animations only when visible, prioritizing CSS animations and transitions over JavaScript ones, and using WebSockets instead of network polling.

Network

Transmitting data over the web involves routers, content delivery networks (CDNs), and mobile networks. Routers process and forward data packets, CDNs are used to store and deliver data closer to users, and mobile networks transmit data to/from wireless devices. Therefore, reducing the amount of data exchanged between users and servers can reduce network energy usage. This can be done by caching data, reducing API calls, and minimizing payload sizes.

Data Centres

Data centres house servers that store, process, and serve web content. The main contributors to energy usage are server operations (running application logic, managing databases, and rendering content), cooling systems, and idle power usage. Reducing the complexity and size of web pages can reduce server operations. This can be done by compressing media, using lazy loading, and reducing computational overhead in JavaScript.