An Astro rebuild of a 3,850-recipe archive that cut JavaScript by two thirds and made mobile pages load in about a second.
View live demo Opens a working demo with sample content in a new tab.
On location
Herbs SpicesPhoto: Patrycja Tomaszczyk (CC0)
Pasta FlourPhoto: Jorge Zapata (CC0)
Cooking FoodPhoto: JESHOOTS.com (CC0)
Redpeppers VegetablesPhoto: JESHOOTS.com (CC0)
Baking CookingPhoto: Maciej Szlachta (CC0)
About the Project
This case study covers an Astro rebuild of an independent food magazine's website and its archive of 3,850 recipes. The magazine's reputation rested on its trusted recipes, but on a phone the old site took four to six seconds to show the main content, shipped a heavy bundle of JavaScript on every page and had inconsistent recipe markup, which cost it rich results in search.
We rebuilt the site so that almost every page is plain, pre-built HTML, with JavaScript loaded only for the few things that need it: search, archive filters and the ingredient scaler. JavaScript shipped per page fell by 68%, mobile largest contentful paint dropped to around 1.1 seconds, and every recipe now carries the same structured data, restoring rich results across the archive.
About the Client
The client is an independent food magazine with a loyal online readership. Its archive spans weeknight dinners, baking, slow Sunday cooking and seasonal features, contributed by a team of regular writers and cooks.
Most readers arrive on a phone, often from search, and frequently while standing in a kitchen. For them, speed is not an abstract metric: a recipe page that jumps around or stalls while ingredients load is a recipe they abandon. The magazine also relies on advertising and needed it to coexist with a fast experience and proper consent.
Project Goals
Make recipe pages load in around a second on a typical phone.
Ship far less JavaScript without losing search, filters or the ingredient scaler.
Generate consistent recipe structured data from the CMS for every recipe, old and new.
Keep deep archive browsing — collections, tags and contributors — feeling instant.
Load advertising and analytics only with consent, and off the critical rendering path.
Project Overview
The Challenge and Our Solution
The Challenge
The archive ran on a page builder with a heavy JavaScript bundle and half a dozen advertising and analytics scripts. Mobile readers — the large majority — waited four to six seconds for a recipe, and recipe rich results were inconsistent because markup came from two conflicting plugins.
Our Solution
We rebuilt the site in Astro, rendering recipes and features to static HTML and hydrating only the genuinely interactive pieces — search, the ingredient scaler and the filter panel — as Svelte islands. Content stays in the existing CMS and is pulled at build time with on-demand rebuilds for edits. Recipe structured data is generated from structured CMS fields, so ingredients, timings and nutrition are consistent on every page, and advertising scripts were moved behind a consent-aware loader that no longer blocks rendering.
Island Architecture for a Recipe Website
Astro renders pages to HTML at build time and lets interactive components — islands — hydrate individually. On this site only three things are interactive: search, the archive filters and the ingredient scaler, each a small Svelte component. Everything else, from the method steps to the contributor biography, is plain HTML that the browser can display immediately.
That is where the 68% reduction in JavaScript came from. It was not achieved by squeezing a framework bundle, but by not sending code for parts of the page that never needed it.
Pre-built HTML for every recipe and collection page
Interactive islands only for search, filters and the scaler
Svelte components hydrated independently
Recipe Structured Data From the CMS
Search engines show recipe rich results — images, timings, ratings — only when the markup is complete and consistent. On the old site, older recipes had been entered in different ways over time, so their markup varied. In the rebuild, ingredients, timings, yield and nutrition are generated from structured CMS fields for every recipe, using one template.
Older recipes were migrated into the same fields, so the archive's back catalogue is treated exactly like this week's recipe. Recipe rich results were restored across the archive with consistent markup.
Core Web Vitals for Publishers Who Rely on Advertising
Advertising is often what slows publisher sites down. Here, advertising and analytics scripts are deferred behind the reader's consent choice and kept off the critical rendering path, so the recipe appears first and commercial scripts load afterwards. Images are sized and served through Cloudflare's CDN, and Lighthouse CI runs on every change so performance does not quietly regress after launch.
Mobile largest contentful paint is now around 1.1 seconds, down from four to six.
Consent-aware, deferred ad and analytics loading
CDN-delivered, correctly sized images
Lighthouse CI as a guard against regressions
A Fast Mobile Recipe Archive, All the Way Down
Readers rarely stop at one recipe. Collection, tag and contributor pages are pre-built too, so moving from a weeknight collection to a contributor's back catalogue feels instant even deep in the archive. Because nearly every page is now served statically from the CDN, hosting costs fell as well.
Editors kept a familiar way of working: content lives in Markdown and CMS fields, and publishing triggers a fresh build of the affected pages.
Our Process
How We Delivered It
1
Performance and Content Audit
We measured real mobile performance, catalogued every script on the page and audited how recipe data was stored across the archive.
2
Content Modelling
Recipes, collections and contributors were modelled as structured fields so markup, pages and the scaler could all be generated from them.
3
Astro Build and Islands
Templates were rebuilt in Astro with Tailwind CSS, and search, filters and the scaler written as small Svelte islands.
4
Archive Migration
All 3,850 recipes were migrated into the new fields, with checks for missing timings, yields and images.
5
Launch With Guardrails
Redirects, structured-data validation and Lighthouse CI were in place at launch to protect search traffic and performance.
Key Features
What We Delivered
Island architecture
Search, filters and the ingredient scaler hydrate individually; everything else is plain HTML.
Recipe structured data
Ingredients, timings, yield and nutrition generated from CMS fields for reliable rich results.
Fast archive browsing
Pre-built collection and tag pages so deep archive browsing feels instant.
Consent-aware ad loading
Advertising and analytics deferred behind consent, off the critical rendering path.
Outcome
Results and Impact
JavaScript shipped per page reduced by 68%.
Mobile largest contentful paint around 1.1s, down from 4–6s.
Recipe rich results restored across the archive with consistent markup.
Hosting costs fell, because nearly every page is now served statically.
Client Feedback
What the Client Says
★★★★★
They cut our JavaScript by two thirds and our recipe pages now load in about a second on a phone. Rich results came back within weeks. For a publisher living on organic traffic, that is the whole business.
EditorIndependent food magazine
Services
Services Behind This Project
The Svelte & Astro expertise we used to build this publishing website — and can bring to yours.
Lightweight SvelteKit applications and content-first Astro sites that ship almost no JavaScript and score highly on Core Web Vitals.
Learn more
FAQ
Frequently Asked Questions
Why Astro for a publishing website?
Most of a publishing site is content that does not need JavaScript to display. Astro builds that content to HTML and only hydrates the components that are genuinely interactive, which makes it easy to keep pages fast. It also supports components from frameworks such as Svelte, React or Vue where they are useful.
Will a rebuild affect our search rankings?
A rebuild carries risk if URLs, content or markup change carelessly. We map every existing URL to its new address, keep content intact, validate structured data before launch and monitor search performance afterwards. In this project recipe rich results were restored rather than lost.
Can editors still publish without a developer?
Yes. Editors work with structured fields and Markdown, and publishing triggers a rebuild of the affected pages. The structure actually helps editors, because the template handles layout and markup consistently for every recipe.
How do you keep advertising from slowing the site down?
Ad and analytics scripts are loaded only after consent and after the main content has rendered. We also reserve space for ad slots so the layout does not jump. Advertising still runs, but it no longer competes with the recipe for the reader's first second on the page.
What is an ingredient scaler and why is it an island?
The scaler recalculates ingredient quantities when a reader changes the number of servings. It is one of the few genuinely interactive parts of a recipe page, so it is loaded as a small, separate component rather than turning the whole page into a JavaScript application.
What drives the cost of rebuilding a large recipe archive?
The size and consistency of the existing content, the number of templates, integrations such as advertising and newsletters, and how much data needs cleaning during migration. A short audit of your archive and current performance gives a reliable basis for scoping the rebuild.
Similar Work
Related Projects
Case studies built with the same technologies or for similar needs.
