Time to first penguin: launching a faster, leaner website under deadline pressure

Anna Campbell

Anna Campbell

General Manager

Te Tautiaki Hoiho | The Yellow-eyed Penguin Trust

Wenna Yeo

Wenna Yeo

Programme Manager

Te Tautiaki Hoiho | The Yellow-eyed Penguin Trust

97%

Faster time to first byte (TTFB)

85%

Faster largest contentful paint (LCP)

90%

Smaller homepage size

Te Tautiaki Hoiho, the Yellow-eyed Penguin Trust, is a New Zealand conservation organization dedicated to the survival of the world’s most endangered penguin — the hoiho. When their ageing WordPress site began failing them at the point that mattered most, they needed a rebuild. And they needed it fast.

Spotting a hoiho in the wild takes patience: visitors to Dunedin’s coastline can spend hours scanning the scrub before a single bird appears. Waiting eleven seconds to load a photo of one on the organization’s own website, though, is a different kind of patience — the kind that loses donors.

CloudCannon’s new Astro Component Starter gave the trust’s development team a running start. It shaved weeks off the build, dramatically improved site performance, and put editorial power back in the hands of the trust’s own staff.

Yellow-eyed Penguin website homepage hero section

Broken donations, bloated pages, and bottlenecks

The trust’s existing site was built on WordPress and had accumulated years of technical debt. Donation processes and system integrations were unreliable, and the organization was heavily reliant on grant funding in part because their online donation pipeline wasn’t converting.

Early on, then-General Manager Anna Campbell raised critical concerns about the site’s inability to capture and manage donations effectively. The trust needed a website that could serve as a central resource hub, improve donation conversion rates, and support marketing efforts like SEO and Google Ads — all while reducing their dependence on external agency support for routine content updates.

A truly independent NGO has control over voice and content — regaining ownership of our site was very important to our team. Having a platform where we can update and manage the website ourselves, without needing to go through an agency for every change, has been a big part of that independence.

Anna Campbell

Anna Campbell

General Manager

Te Tautiaki Hoiho

A CloudCannon audit of the old site confirmed what the team already suspected. The performance numbers painted a stark picture.

Eleven seconds to see a penguin

The pre-rebuild audit of the WordPress site revealed serious performance issues across the board. The homepage alone weighed in at roughly 9,000KB of assets — images weren’t lazy loaded, CSS and JS weren’t minified, and no modern image formats were in use.

The core web vitals told the story clearly:

  • Time to first byte (TTFB): 1,245ms — well into the “poor" range, suggesting slow server response times typical of unoptimized WordPress hosting.
  • First contentful paint (FCP): 4.1s — visitors were waiting over four seconds before seeing any content at all.
  • Largest contentful paint (LCP): 11.1s — the main content took more than eleven seconds to fully render, far beyond the 2.5s threshold recommended for a good user experience.
  • Cumulative layout shift (CLS): 0.22 — the page shifted visibly as it loaded, creating a jarring, unstable browsing experience.

Beyond performance, the SEO audit uncovered missing Open Graph and Twitter meta tags, a sitemap listing 875 URLs with only 109 actually crawlable, and a heading hierarchy riddled with duplicate h1 tags across the page. The brand audit revealed an explosion of inconsistency — over 30 border colours, 80+ text colours, and 80+ background colours scattered across the site’s CSS.

The site was, in practical terms, working against the trust’s mission. Potential donors arriving from search or social were met with slow loads, inconsistent layouts, and a donation flow that didn’t inspire confidence.

Then Seven Sharp called

The project’s timeline shifted dramatically when the trust learned they would be featured on the primetime New Zealand current affairs program Seven Sharp. If viewers visited the website after the segment aired, the trust needed to capitalize on that traffic — not lose it to an eleven-second page load.

What had been a six-week project suddenly needed to compress. Design was still being finalized, but the team made the decision to begin development in parallel, reducing the build window by two weeks to hit the broadcast deadline.

This is where the Astro Component Starter really proved its worth.

Yellow-eyed Penguin website 'how to help' section

Building on day one, not configuring on day five

CloudCannon used the Astro Component Starter as the foundation for the new site. And when the initial site design and visual direction was delivered, the team’s assessment was encouraging: the Component Starter already held the majority of the design patterns needed, with only a few custom components needed beyond what the starter already provided.

The Component Starter’s value showed up in three key areas:

Rapid project setup

The starter came pre-configured with testing, styling, and tooling — eliminating the days typically spent configuring a development environment from scratch. The team was building components on day one, not configuring build pipelines.

Accelerated component development

Rather than writing every component from the ground up, the team extended the starter’s existing base components. This meant common patterns like navigation, hero sections, cards, and content blocks were already solved — the work was in customization, not invention.

CloudCannon’s James Hart, a developer on the project, put it simply:

The Astro Component Starter saves hours of dev time because it covers the majority of common site structures out of the box. You can look at an existing site, match what's already there using the Starter's components, and then just fill in the gaps with custom work. Even a non-developer can use it to scaffold out the skeleton of a website and hand it off for finishing touches. It's just super quick for getting an editable site up and running, reordering sections, and making changes.

Design-system alignment

The design direction called for a shift away from the old site’s penguin-centric blue-and-yellow palette toward greens, beiges, and earth tones to reflect the trust’s broader environmental and habitat focus. The Component Starter’s structured approach to theming made this palette shift straightforward to implement consistently across the site.

Yellow-eyed Penguin website projects section in CloudCannon visual editor

42 milliseconds and 90% lighter

The rebuilt site — now running on Astro with CloudCannon as the CMS, Stripe handling donations, and HubSpot managing the CRM — delivered transformative improvements.

The homepage dropped to approximately 10% of its former size. Every core web vital moved from “poor” or “needs work” to “good”:

  • TTFB: 42ms (down from 1,245ms — a 97% improvement)
  • FCP: 1.2s (down from 4.1s — a 71% improvement)
  • LCP: 1.7s (down from 11.1s — an 85% improvement)
  • CLS: 0 (down from 0.22 — completely stable)

The new site loads in a fraction of the time the old one took to deliver its first byte. For a conservation trust where every visitor is a potential donor, that speed translates directly into opportunity.

The SEO and accessibility gauges both shifted from “needs work” into the “good” range, reflecting a cleaner heading hierarchy, proper meta tags, modern image formats, and a more accessible markup structure throughout.

Before and after, side by side

Metric

Before

After

Percentage change

Time to first byte

1.2s

42ms

97% faster

First contentful paint

4.1s

1.2s

71% faster

Largest contentful paint

11.1s

1.7s

85% faster

Cumulative layout shift

0.22

0

Eliminated

Homepage size

~9,000KB

~900KB

~90% smaller

Performance rating

Needs work

Good

SEO rating

Needs work

Good

Accessibility rating

Needs work

Good

When the Seven Sharp segment aired, the site was ready. Viewers who searched for the trust after watching the programme landed on a page that loaded fast enough to hold attention, present the mission clearly, and funnel interest toward a donation. The whole point of compressing the site’s development timeline had been to capture that moment — and the new site delivered exactly when it needed to.

From agency dependence to editor control

One of the most significant — and least visible — outcomes of the project was editor independence. On the old WordPress site, content changes often required going through an external agency. Routine updates were cumbersome and slow.

With CloudCannon, the trust’s editors can now create and manage their own content branches, publish updates, and handle tasks like sponsorship banners without developer involvement. The response from editors was immediate and positive.

Programme Manager Wenna Yeo, an editor involved in the site’s design direction, felt the new site better reflected the organization’s identity:

As an NGO, we have limited resources to dedicate to website updates — working with CloudCannon has been a real game-changer! The new website reflects the historical legacy of the Trust as well as what we stand for today. The website now looks modern and engaging, and is much easier for our supporters to navigate. It is now so much easier for us to manage as well.

Wenna Yeo

Wenna Yeo

Programme Manager

Te Tautiaki Hoiho

That kind of feedback points to something more significant than satisfaction with a new design. Editors who previously had to wait on agency turnaround for basic content changes are now self-sufficient, freeing the organization to be more responsive and reducing ongoing maintenance costs.

Yellow-eyed Penguin website donate page in CloudCannon visual editor

A compressed timeline, but no compromises

The Yellow-eyed Penguin Trust rebuild is a clear example of what the Astro Component Starter is designed to enable. A small team, working under a compressed timeline, delivered a site that is faster, lighter, more accessible, and easier to maintain — without needing to start from zero.

The Starter’s impact went well beyond initial setup. It shaped the entire trajectory of the project, making it feasible to begin development before design was finalised, meet an externally imposed deadline, and deliver a result that moved every measurable metric in the right direction.

For a not-for-profit conservation organization operating on limited resources, that kind of efficiency matters. The difference between capitalizing on a prime-time television moment and watching potential supporters bounce off an eleven-second page load is, ultimately, a funding question.

The hoiho are still one of the rarest penguins on earth. But their trust’s website no longer holds them back.

Want to find out more?

Book a friendly demo call with us, and find out how CloudCannon can help you deploy and manage websites more efficiently.

Tom Richardson

Solutions Architect

Friendly person sitting ready for a demo call