Google Cloud Region Picker

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:

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

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: