Work

# Biodiversify

An environmental consultancy needed a Japanese-language site they could edit themselves, without losing the typography or the speed. I kept every page prerendered and put WordPress behind the build, so they can publish without a developer.

**99** mobile Lighthouse score on the home page, up from 61

![Biodiversify’s home page at desktop width: their logo over a photograph of wooded hills, and the headline in Japanese](https://phil.dev/_astro/biodiversify-home.nFABiq0G_ZJbKa6.webp?dpl=dpl_H5ZkMXUNhuvtnV4YMXoB4Kq3xvDS)

The home page, live at jp.biodiversify.com.

## Problem

Biodiversify needed [a Japanese-language site](https://jp.biodiversify.com/) built from a Figma design, and wanted to edit it themselves. That normally means a WordPress theme. But the site breaks its Japanese lines between phrases and cuts its fonts to size as it’s built, and nothing maintained in WordPress breaks lines that way. A theme draws each page when it’s asked for, so it would’ve cost the typography and the speed.

![The same Japanese paragraph from the home page, twice, at phone width. In the first, two lines end partway through a word; in the second, every line ends between phrases](https://phil.dev/_astro/biodiversify-phrase-breaks.C_I9A_wi_ZV7yjs.webp?dpl=dpl_H5ZkMXUNhuvtnV4YMXoB4Kq3xvDS)

Above, the paragraph as a browser breaks Japanese on its own, splitting the words for “risk” and “partner” across two lines. Below, as the site breaks it: between phrases.

## Decision

I kept Astro rendering every page on Vercel, and made WordPress the editing backend only: it’s never in a visitor’s path. Publishing starts a build, and a preview link lets their translator sign off before anything goes live. The site had gone live from files in its repository, which I’d set out like the WordPress entries they’d become, so the content moved into WordPress field for field, with nothing rewritten. Before switching over, I built the site from both and compared every page.

## What changed

The client can publish without a developer, and a change is live in two to three minutes. Every page is still prerendered. On its first production run the home page scored 61 on mobile Lighthouse: a fonts stylesheet from another host was holding up the first paint. I moved the fonts onto the site itself and cut them down to the characters it uses, and that took the home page to 99. Both scores are from the live site, loaded the way a slow phone on a slow network would.

## Say hello

Email [hello@phil.dev](mailto:hello@phil.dev). I read everything that isn’t a sales pitch.

[LinkedIn](https://www.linkedin.com/in/frontendphil) · [Bluesky](https://bsky.app/profile/phil.dev) · [RSS](https://phil.dev/rss.xml)