Viola Kempa Say hello

All work Case 03 · Website · March to August 2026

hofelehofele.de

The home page of hofelehofele.de, in German: the headline Alte Höfe. Neue Geschichten., one black button, and photos of the farmhouses laid out as a stack of prints.
The website of an architecture and craft studio in the Allgäu that brings old farmhouses back to life.

Result

A real CMS, pages built ahead of time, and 24 to 30% less first-load JavaScript on three of four pages.

My part
Design, front end, CMS schema, hosting and performance, through keenco³, my studio. [Confirm: who wrote the copy and shot the photos.]
Time
24 March to 26 August 2026, 78 commits. Live. Launch hardening on 14 April 2026.
Constraint
The studio edits it themselves, and no database or server of mine runs between visits.

See it live

The site changes a few times a month, and the studio has to change it without me. A typical CMS answers that with a live server and a database, running around the clock, for a site that is mostly sitting still.

[What the studio had before.]

No database, no server of my own to patch.

A site the studio edits itself usually means a runtime CMS: browser, server, database and page on every request. That is a live server and a database to keep safe, for a site that changes a few times a month.

So every page is built ahead of time and served as files. The studio edits in Sanity and presses publish, Sanity calls one signed route, and only the changed pages are rebuilt. Every page also refreshes itself at most once an hour. That route is the only one on the site.

  1. Rejected

    A runtime CMS

    A live server and a database to keep safe, for a site that barely changes.

  2. [Sketch of the option]

    Rejected

    [Another option you weighed, or drop this slot]

    [Why it lost, in one sentence.]

  3. Chosen

    Build ahead of time

    The studio keeps a real editor. Visitors only ever get files.

I chose

Pages built ahead, rebuilt when the studio presses publish, refreshed hourly.

It cost

Up to an hour stale if the webhook misses.

The home page of hofelehofele.de, in German: the headline Alte Höfe. Neue Geschichten. (1), photos of the farmhouses laid out as a stack of prints (2), a short line on renovation and timber building in the Allgäu, and one black button (3).
  1. Short sentences, always “du” One statement per sentence. No corporate German anywhere on the site.
  2. No full-bleed photo hero The houses come as a stack of prints, never glued across the whole page.
  3. Three things per screen A headline, the houses, one action. Every viewport is held to that.

The motion stayed. A quarter of the JavaScript went.

The scroll animation libraries were bundled into every page up front. GSAP (about 100 KB) and Lenis now load on demand, and all six animation hooks wait for them. The fonts stayed whole: the licence forbids subsetting.

Fonts, self-hosted

Two variable fonts in three files, 120 KB together, not subset because the licence forbids it. The content security policy allows no font from anywhere else.

Images

AVIF and WebP, the hero image loaded first, a 30-day cache for everything else.

Lighthouse

[Lighthouse scores: not measured yet. PageSpeed quota exceeded on 8 November 2026.]

−24 to −30%

First-load JavaScript per page, with the same animations on screen. Projekte stayed at 102 kB. Measured before launch, not re-measured since.

Home 190 → 145 kB −24%
Leistungen 150 → 106 kB −29%
Aktuell 148 → 104 kB −30%
Projekte 102 → 102 kB ±0
Measured 25 March 2026, before launch · Next.js build output · Projekte 102 kB, unchanged

[What you would do differently, concrete enough to be wrong.]