Steren's labs

Earlier this year, I worked with a group of googlers on publishing carbon characteristics of Google Cloud datacenters. Our main goal is to help customers take carbon information into consideration when selecting a location for their workloads.

But this adds one extra dimension to the already complex region selection process: customers need to compare carbon impact, price and latency. This basically means they have to solve for a 3 dimensional optimization problem, with information scattered in many different places.

So I built a very simple webapp to help: It has 3 sliders (carbon, price, latency) to pick how important each parameter is. The tool then sorts Google Cloud regions based on these criteria.

See it in action:

What data is used?

The app is only using publicly available data:

• Carbon impact is approximated using the yearly carbon free energy percentage and average electricity carbon intensity of the region (source)
• Price is using Google Compute Engine price as a proxy, copied manually for now.
• Latency is using physical distance between selected countries and the location of the region, which is not ideal considering network topology is not connecting all countries with straight lines, but good enough for basic results. Using latency measured from the client and/or a latency matrix captured from varisu places in the world would be good improvements.

How does it work?

The app runs entirely in the browser using client side JavaScript for interactivity. The core algorithm is an optimizer that will normalize the data, and then compute a final score for each region using user provided weights.

As always, the stack is kept very simple to minimize maintenance burden (no build step, no framework, no third party modules). Mau designed a sleek UI that I then implemented in vanilla CSS. And, notably because of this choice of technical simplicity, the app has almost-perfect performance scores. A slight layout shift comes from the use of a web font that I decided to not make optional. Load time is boosted using preconnect and preload for resources, by inlining CSS in the page, and by not using render-blocking JavaScript.

I heavily use the <details> HTML tag in order to provide a toggle behavior that is accessible and not using any JS. I am also using a <select> HTML element with the multiple attribute, which nicely adapts to desktop and mobile OSes.

I decided to use Firebase Hosting to host the static web app because it comes with server-side logging and metrics, which, in addition to being a great solution for static hosting, allows to measure pageviews without using any client side tracker.

Try it

Open the web app at https://gcp-region-picker.web.app

I hope you will find it useful when picking where to deploy your next workload.

Report issues or contribute on GitHub.

Or simply use it below: