Why edge-rendered Astro wins on speed
Learn how a website’s structure and hosting affect loading speed. Understand the Astro and Cloudflare setup used in this course.
Need a word explained? Open the glossary →
Full lesson & technical details
What Google measures (Core Web Vitals), why a WordPress site on shared hosting cannot compete with an Astro site on Workers, and the architecture you will build.
What Google measures
Core Web Vitals: LCP (largest contentful paint, under 2.5 s), INP (interaction to next paint, under 200 ms), CLS (layout shift, under 0.1). Measured on real users’ phones. A typical WordPress site on shared hosting: LCP 3–5 s. An Astro site on Workers: LCP 0.6–1.2 s worldwide.
Why Astro
Astro ships zero JavaScript by default. Pages are HTML rendered at the edge (or at build time); interactive bits are islands loaded only where needed. Content collections give typed markdown; the Cloudflare adapter runs the whole thing inside a Worker next to D1 and KV.
Why Workers
No origin server. The Worker runs in the Cloudflare location nearest the visitor, so a user in Lisbon and a user in Dallas both get a sub-100 ms server response. Static assets are cached at the edge. D1 is a SQLite database with read replicas; KV is a global key-value cache. Cron Triggers run your agent on a schedule. Workers AI runs models next to the data. The free plan covers most small-business traffic; the $5 paid plan covers a lot more.
The platform you will build
- Site: Astro pages and layouts, content collections for services, locations and posts, a D1 table for programmatic pages.
- SEO layer: canonical, titles, meta, Open Graph, JSON-LD, sitemap, robots, redirects, 404s, performance budget.
- AI-readability layer: llms.txt, llms-full.txt,
.mdversions of every page. - Ranking engine: a Cron-triggered Worker route that pulls Search Console and SERP data, fetches top-ranking competitor pages through Browser Rendering, analyzes gaps, writes a proposal into D1, and emails you a link to approve or edit; approved changes become a content collection commit or a D1 update and redeploy.
The pitch
Open PageSpeed Insights with the client’s site in one tab and the capstone site in another. Say nothing. That is the sales call.
Worked example
{
"name": "summit-ridge",
"compatibility_date": "2026-10-01",
"compatibility_flags": ["nodejs_compat"],
"main": "dist/_worker.js/index.js",
"assets": { "directory": "dist", "binding": "ASSETS" },
"ai": { "binding": "AI" },
"kv_namespaces": [{ "binding": "CACHE", "id": "…" }],
"d1_databases": [{ "binding": "DB", "database_name": "summit-ridge-db", "database_id": "…", "migrations_dir": "migrations" }],
"triggers": { "crons": ["0 6 * * 1"] },
"observability": { "enabled": true }
}
The Astro Cloudflare adapter generates the final config at build; this is the source it reads.
Instructions you can copy (prompts)
Copy the instructions, replace the words inside {braces} with your details, and paste them into your AI tool. Check and edit the answer.
In my Projects folder create an Astro 7 project named {slug} from the minimal template, add the Cloudflare adapter (server output), the sitemap integration and Tailwind-free plain CSS with design tokens as CSS variables. Create wrangler.jsonc with name {slug}, compatibility_date 2026-10-01, nodejs_compat, a D1 binding DB (create the database), a KV binding CACHE (create it), an AI binding, and a weekly cron trigger Monday 06:00 UTC. Add .gitignore and .dev.vars (empty), init Git, commit, run the dev server and show me the home page screenshot. Then deploy once to workers.dev and give me the URL.
Run the scaffold card. Paste the workers.dev URL and the PageSpeed Insights mobile score of the empty home page (it should be 100).
Done when: An Astro project deployed on Workers with D1, KV, AI and a cron trigger wired, scoring 100 before any content exists.. Sign up to save your work to your account.
Quick knowledge check
3 questions, 60% passes. Checkpoints, the certification exam (three versions) and the reviewed final project are unlocked with a free account.
- Core Web Vitals are:
- Astro ships zero JavaScript by default because:
- A Worker runs: