Centre for Earthworks

Nothing appeared until the JavaScript did.

It was a single-page React app. The HTML the server sent was an empty div, and nothing showed until a large JavaScript bundle had downloaded and run. The hero image couldn’t even begin loading: until the app ran, the page didn’t know it existed.

First paint was 11.3 seconds on mobile, 4.6 on desktop. This is where it started.

Performance

46 / 60

Accessibility

90

SEO

83

Render the page instead of waiting for JavaScript.

I moved the site to Astro. It renders each page to HTML at build time and ships no JavaScript by default; only the interactive parts load any. The text, the headings and the hero image are in the HTML the server sends — so the browser shows them, and fetches them, straight away.

Astro doesn’t make a site fast or accessible on its own. It gets out of the way. The rebuild did the rest.

Stop shipping the admin editor to visitors.

The old bundle sent everything to everyone. That included the blog editor — rich text, image upload, the whole login stack — which no visitor ever uses. A first-time reader on a phone was downloading the tools the staff use to write posts.

I moved the admin app behind /admin as its own separate bundle. The marketing pages now ship none of it.

Accessibility as the default, not a pass at the end.

Rebuilding from scratch meant I could put the semantics in from the first line: real landmarks, a correct heading order, a menu, dropdown and modal you can work entirely from the keyboard, reduced motion honored.

A keyboard pass turned up bugs a score of 90 never flagged — dropdown links you could click with a mouse but couldn’t reach with the keyboard, among others.

Four icons used the wrong attribute name, so they had no alt text at all — and the build passed without a word. That held Accessibility and SEO under 100; a one-line fix took both to 100.

Make the subscribe form actually work.

The original subscribe form did nothing. It caught the click and stopped the page from reloading, and that was all.

The backend had no subscription endpoint, so I wired the form to a third-party service as a working stand-in. It confirms in place without reloading the page, and it remembers you if you come back.

Eleven seconds became two.

First paint on mobile went from about eleven seconds to about two. The JavaScript that used to block that first paint no longer does, and the images came down with it.

The gaps, and two tradeoffs.

Mobile is 86, not in the 90s. The gap is almost entirely one animation doing too much work while the page loads. The fix is straightforward and the gain is small, so I left it.

• 01The blog is fetched in the browser rather than built into the HTML. That weakens its SEO — which the organization didn’t need — and in return new posts appear the moment they’re published, with no rebuild.
• 02The subscribe form is a third-party stand-in rather than the org’s own backend, until there’s an endpoint to point it at.