EMI Calculator India

A fast, SEO-first EMI calculator for Indian borrowers. Astro (static output) + Tailwind CSS 4 + one small Preact island. 84 pages are generated at build time from data and one pure calculation module. No server, no database, no cookies.

Commands

Command	What it does
npm run dev	Dev server on http://localhost:4321
npm run build	Production build into dist/ (about 30 s; most of it is the 83 OG images)
npm run verify	Checks dist/ the way a crawler sees it (see below). Run after every build.
npm test	421 unit tests (Vitest): maths, formatting, URL state, generated copy, SEO helpers
npm run serve	Serves dist/ like Vercel does (clean URLs, Brotli, cache headers) on http://localhost:4400
npm run preview	Astro's own preview server (no compression, so use serve for performance numbers)

Node 22.12 or newer is required (Astro 7).

Before you launch: things to change

1. Domain and brand – src/config.ts (SITE_URL, SITE_NAME, SITE_TAGLINE). This is the only place the domain is written; robots.txt, the sitemap, canonicals, JSON-LD and OG images all read it.
2. Contact address – set CONTACT_EMAIL in src/config.ts. It is empty on purpose, and the About and Privacy pages only show a contact line when it is set.
3. Legal pages – src/pages/privacy-policy.astro and disclaimer.astro are sensible starting text, not legal advice. Have a qualified person review them, and update LEGAL_UPDATED in src/config.ts when they change.
4. Example rates – the starting rate on each page (12 %, 10 %, 9 %, 8.5 %) is an example for the calculator. The copy always tells readers to check current rates with their lender. Keep it that way: never state a bank's rate, a tax limit or a policy rate as fact.

How it is organised

src/
  config.ts            domain, brand, contact, legal date
  data/                loanTypes.ts  amounts.ts  tenures.ts  faqs.ts  nav.ts  routes.ts
  lib/
    emi.ts             pure maths: EMI, schedules, prepayment, comparison, effective rate
    format.ts          Indian number formatting, "50L"/"1.5cr" parsing, amount in words
    calc-state.ts      calculator state, slider scales, URL (de)serialisation, CSV
    insights.ts        plain-English summaries of prepayment/comparison results
    content*.ts        builds each page's copy from templates + emi.ts (never hand-typed numbers)
    seo.ts  og.ts  og-image.ts   titles, canonicals, JSON-LD, social images
  components/          Calculator.tsx (the island), charts, table, FAQ, header/footer...
  directives/paint.js  `client:paint`: hydrate after first paint (or on first touch)
  pages/               home, loan types, amounts, amount+tenure, support pages, 404, og/, robots.txt
scripts/               verify-dist.mjs  serve-dist.mjs  subset-font.py
vercel.json            clean URLs, cache headers, one rewrite (see Deploying)

Adding or changing pages

• A new loan type: add an entry to src/data/loanTypes.ts (defaults, typical ranges, lead, tips, one unique FAQ). Its page, sitemap entry, OG image and footer link appear automatically.
• A new amount: add it to amounts in src/data/amounts.ts (and to comboAmountSlugs for tenure pages). If its slug contains a dot, add a rewrite to vercel.json; npm run verify tells you.
• Copy lives in templates with {placeholders}. fill() throws on an unknown placeholder, and the tests fail if two pages end up with the same title, first paragraph or FAQ answer.

Checks that guard quality

• npm test enforces: titles at most 60 characters and descriptions at most 155 (without truncation), 300–600 words of prose per page, 5–7 FAQs, 6–8 valid internal links, unique titles/H1s/first paragraphs/FAQ answers across all pages, and no policy rates, tax limits or bank names in the copy.
• npm run verify enforces on the built HTML: one H1, no heading jumps, absolute canonicals, JSON-LD that parses and matches the visible FAQs and breadcrumbs exactly, OG images that exist, a sitemap that equals the set of canonical URLs, robots.txt, no broken internal links, unique ids and landmark names, focusable scroll regions, and vercel.json consistency.

Performance

Measured with Lighthouse (mobile profile, simulated slow 4G, 4x CPU slowdown) against npm run serve: Performance 98–100, Accessibility 100, Best Practices 100, SEO 100 on every page type; LCP about 1.1 s; CLS 0.000; TBT at most 12 ms; JS on a calculator page about 19 KB gzipped (budget 40 KB).

What keeps it fast:

• The calculator is rendered to static HTML at build time with the page's real numbers, then hydrated by client:paint after the first paint (or immediately on first touch).
• CSS is inlined (about 27 KB raw per page); there are no render-blocking requests.
• One self-hosted font, cut down to weights 400–700 and the characters the site uses (18 KB), plus a 1.2 KB file for the ₹ sign. A metric-matched fallback avoids layout shift when it loads. To rebuild it, see scripts/subset-font.py.
• Below-the-fold sections use content-visibility: auto; the 360-row month-wise schedule renders only the rows in view (median interaction cost 43 ms instead of 117 ms, worst case 63 ms instead of 377 ms at 4x CPU slowdown).

Deploying to Vercel

1. Put the project in a Git repository and push it (a .gitignore is included):

   git init
   git add .
   git commit -m "EMI calculator"
   git branch -M main
   git remote add origin <your-repo-url>
   git push -u origin main
   

2. In Vercel choose Add New → Project, import the repository, and leave the detected settings: Framework Astro, Build Command npm run build, Output Directory dist, Install Command npm install. Use Node 22.x or newer (Project Settings → General → Node.js Version).
3. Edit SITE_URL in src/config.ts to your real domain before the production deploy, commit and push.
4. Add your domain under Settings → Domains and follow the DNS instructions. Vercel issues the HTTPS certificate.
5. vercel.json is already set up, so no further configuration is needed:
   • cleanUrls and trailingSlash: false serve /50-lakh-loan-emi for the built 50-lakh-loan-emi.html, matching the canonical URLs.
   • Long-lived immutable caching for /_astro/* and /fonts/*; one-day caching for /og/*; HTML is revalidated on each request.
   • Basic security headers.
   • A rewrite for /1.5-crore-loan-emi (its file name contains a dot).

After the first deploy

• Open /1.5-crore-loan-emi, /about, a made-up URL (should show the custom 404), and /50-lakh-loan-emi.html (should redirect to the clean URL).
• Run Google's Rich Results Test on one calculator page and one FAQ page, and PageSpeed Insights on the live URL.
• In Google Search Console, add the property and submit https://<your-domain>/sitemap-index.xml.
• A lastmod date in the sitemap is the build time of every page, which is accurate because every deploy regenerates all pages.

Known limits

• Without JavaScript, the page shows the example loan's real figures but the sliders cannot recalculate (a note says so).
• The month-wise schedule view only renders rows near the viewport; the full schedule is available as a CSV download, and the year-wise view is complete HTML.
• The OG images are 10 MB in total and add about 25 s to the build; they are generated, never committed.