DEV Community

Cover image for I built a free carbon & page-weight auditor for the web — feedback welcome
Digital Ghost
Digital Ghost

Posted on

I built a free carbon & page-weight auditor for the web — feedback welcome

#webdev #showdev #javascript #auditor

Hey DEV community 👋

I've been working on a side project and I'd love some honest feedback before I push it further.

It's called Tardigrade — a free, browser-based auditor that tells you the carbon footprint and page weight of any URL. Paste a link, get an A–F grade in seconds. No signup, no tracking, no upsell.

🔗 Live demo: tardigrade-six.vercel.app

Why I built it

The average web page now weighs over 2 MB. Some hit 10 MB. Most developers never see that number because nobody puts it in front of them.

Every byte transferred costs electricity — servers, networks, devices. Using the Sustainable Web Design model, we can estimate the carbon cost of a single page visit:

grams of CO₂ per visit = bytes transferred × 1.8 Wh/GB × 442 gCO₂/kWh

That's roughly 0.36 grams of CO₂ per megabyte. Sounds tiny — until you realize a bloated 5 MB page served to 10,000 visitors a day adds up fast.

I wanted a tool that puts that number in front of developers without any friction.

What it does

  1. Fetch — Pulls live performance data from Google PageSpeed Insights (page weight, HTTP requests, load time, Lighthouse score).
  2. Calculate — Runs the Sustainable Web Design formula to estimate CO₂ per visit.
  3. Grade — Blends weight, CO₂, requests, load time, and Lighthouse into a single A–F score, plus color-coded metrics and concrete suggestions.

Nothing is stored. No accounts, no analytics on your audits, no email capture. Paste, read, leave.

Tech stack & design choices

  • Vanilla HTML/CSS/JS — no framework bloat (would be ironic otherwise)
  • Three.js — animated hero with an abstract floating tardigrade made of wireframe geometry, orbited by red/yellow particles
  • Vercel serverless function — proxies PageSpeed Insights to avoid CORS and keep any API key hidden
  • Scroll-triggered reveals via IntersectionObserver
  • Dark / light mode respecting system preference
  • Shareable URLs — every audit gets a ?url= permalink for Slack/Discord sharing

The name comes from the tardigrade — the toughest animal on Earth. Survives radiation, vacuum, boiling, freezing. Your website should be just as resilient, and just as light.

What I'd love feedback on

This is where you come in. A few specific things I'm unsure about:

  • Scoring weights — Right now the grade blends page weight (30%), CO₂ (30%), requests (15%), load time (10%), and Lighthouse (15%). Are these the right ratios? Should load time matter more?
  • The carbon math — I'm using the Sustainable Web Design model (1.8 Wh/GB × 442 gCO₂/kWh). Are there better or more current models I should support?
  • The UI — Does the Three.js hero feel appropriate for a dev tool, or is it distracting?
  • Missing metrics — Anything you'd want to see that isn't there? (I'm considering adding TTFB, CLS, and per-resource-type breakdowns.)
  • Mobile experience — Does the input form and score card feel right on small screens?

Try it and tell me your grade

Honestly — paste your own site in and see what you get. Most people land on a C or D the first time. If you're brave, drop the grade in the comments 👇

🔗 tardigrade-six.vercel.app

Roadmap (depending on feedback)

  • Per-resource-type breakdown (images vs JS vs fonts)
  • "Greenest sites" leaderboard
  • Compare two URLs side-by-side
  • Downloadable audit report as PDF/image
  • Browser extension

If any of these sound useful, let me know which one to prioritize.

Thanks for reading. It's a solo project, so every bit of feedback helps. 🙏

Built by Digital Ghost 👻 — free forever.

Tough on weight. Kind to Earth.

Top comments (0)