Best practices for web apps that minimize battery/CPU usage?

I'm working on a solar powered e-Ink app where power consumption is a primary factor to minimize, but I think this question also applies to traditional sites that users access on their mobile phones.

A web app can use a variety of resources: network data, CPU, memory. When designing a web app how much do these things "cost" in battery usage and what are best practices for benchmarking and minimizing them?

For example, consider a Javascript SPA vs. a traditionally server side rendered web page. A SPA is going to be a hefty initial download and then requires extra CPU to boot up and keep running. However, on an ongoing basis it can fetch very small amounts of data. OTOH, a simple server-side rendered page will be smaller initially, and will only need a very simple timer to re-download every so often. But then each download will be larger.

How does one compare the battery usage of more data transfer, vs. running, say, a react app with minimal data transfer that still has a lot of logic to compute DOM diffing and rendering. Will a web browser more efficiently render simple HTML than a JS app making a small update?

Has anyone written a web app under these constraints and written about their trade offs? Does anyone know what sort of good tools are available to measure power consumption of a web app?