How I Built a Free TDEE Calculator with Astro: Formulas, Performance, and SEO

I recently built Free TDEE Calculator, a set of fitness calculators (TDEE, BMR, macros, calorie deficit) with Astro, hosted on Cloudflare. Here is what actually mattered in the build.

Why Astro for a Calculator Site

Calculator pages are mostly static content with small islands of interactivity. Astro ships zero JavaScript by default, so the pages load fast and Google reads clean HTML. The interactive calculator inputs are tiny client-side scripts, not a framework runtime.

The Formula Layer

Every calculator on the site shares one formula module. The foundation is Mifflin-St Jeor for BMR:

function calculateBMR(weightKg, heightCm, age, isMale) {
  let bmr = (10 * weightKg) + (6.25 * heightCm) - (5 * age);
  return isMale ? bmr + 5 : bmr - 161;
}

const ACTIVITY = { sedentary: 1.2, light: 1.375, moderate: 1.55, active: 1.725, veryActive: 1.9 };

function calculateTDEE(bmr, activityLevel) {
  return Math.round(bmr * (ACTIVITY[activityLevel] ?? 1.2));
}

TDEE is BMR times an activity multiplier. The macro calculator then splits the result into protein, carbs, and fat targets, which you can try on the live macro calculator.

Performance Choices That Mattered

• Static output: Astro pre-renders every page. No server round-trip for content.
• Minimal client JS: only the input handlers ship to the browser.
• No layout shift: result areas reserve space before calculation, so CLS stays near zero.

SEO for Tool Sites

A calculator with no content does not rank. Each tool page on the site pairs the calculator with a real guide: formula explanations, worked examples, and FAQ schema. The BMR calculator page, for example, documents the equation it implements.

Takeaway: for content-plus-tool sites, Astro gives you the SEO of static HTML with just enough interactivity for the tools. The full site is live at https://freetdeecalculator.app if you want to inspect the output.