Een restaurantsite die klanten laat bestellen.

Voor restaurant en catering De4Zussen in Ede bouwden we de site opnieuw in Next.js. Op mobiel van 19 naar 2 seconden, met een bestelportaal en een adminpaneel dat ze zelf beheren.

Bekijk de live websitePlan een kennismaking
Restaurant De4Zussen op de Kenniscampus in Ede
De4Zussen op de Kenniscampus, Ede
Klant
De4Zussen, restaurant en catering
Locatie
Kenniscampus Ede
Geleverd
Redesign, headless migratie en bestelportaal
Aanpak
Eerst het ontwerp, zonder verplichting

Wat het opleverde

Een site die er meteen staat, ook op je telefoon. Een bestelproces dat veel soepeler loopt dan eerst. En een restaurant dat teksten, producten en prijzen zelf bijhoudt.

  • Snel, ook op je telefoon

    Het grootste deel van de bezoekers kijkt op de telefoon. Google geeft de site daar 99 van de 100. Op desktop staat hij in 0,3 seconde in beeld.

    99

    PageSpeed mobiel

    100

    PageSpeed desktop

  • Wie wil bestellen, haakt niet meer af

    Op de oude site zag je op mobiel pas na 19 seconden iets. Zo lang wacht bijna niemand op een broodje. Nu kies je in een paar klikken, en haal je het op of laat je het bezorgen.

    2

    seconden laadtijd op mobiel, eerst waren dat er 19

  • Zelf aanpassen, zonder developer

    Een nieuwe lunch, een andere prijs of een foto erbij: dat doet De4Zussen zelf in het eigen adminpaneel. Geen developer nodig voor een prijswijziging.

    1

    klik om het bestelportaal aan of uit te zetten

Google PageSpeed Insights op de4zussen.nl, 29 juni 2026: mobiel 99 en rond 2 seconden, desktop 100 en 0,3 seconde. De layout verspringt niet tijdens het laden (CLS 0 en 0,002). De 19 seconden is de laadtijd van de oude WordPress-site op mobiel.

De vraag

Negentien seconden wachten op een broodje.

De oude site draaide op WordPress en WooCommerce, en hij was traag. Op mobiel duurde het 19 seconden voordat je iets zag. Voor een restaurant en cateraar draait alles om bestellen, en wie zo lang moet wachten, is al weg.

Beheer ging lastig, via plugins. En het ontwerp paste niet meer bij wat De4Zussen wilde laten zien.

Dus bouwden we de site opnieuw, met een losse voorkant in Next.js puur voor de snelheid. Zo'n website-migratie is vaak waar de grootste winst zit. Waarom we daarvoor van WordPress afstapten, lees je in WordPress of Next.js.

  • Was: 19 seconden laden op mobiel

    Twee seconden, PageSpeed 99

  • Was: WordPress en WooCommerce

    Een headless voorkant in Next.js

  • Was: Beheer via plugins

    Een eigen adminpaneel op Supabase

In plaats van beheer via plugins kreeg De4Zussen een eigen adminpaneel op een Supabase-database. Teksten, afbeeldingen, producten en het bestelportaal houden ze daar zelf bij, zonder developer.

De aanpak

Eerst het ontwerp, dan de snelheid.

Drie stappen aan de site zelf: een nieuw ontwerp, een snelle basis en beheer zonder developer. Het bestelportaal krijgt verderop een eigen hoofdstuk.

01 Het ontwerp

Eerst de homepage, zonder verplichting

We lieten eerst alleen het ontwerp van de homepage zien. Beviel het niet, dan kostte het De4Zussen niets en gingen we uit elkaar. Zo lag het risico bij ons. Het beviel, en daarna bouwden we de rest.

  • Rustig en strakMinder ruis, meer focus op bestellen
  • Beter gestructureerdEen logische opbouw van hero tot footer
  • Mobiel net zo goedHet grootste deel kijkt op de telefoon

02 Snelheid

Van 19 seconden naar twee

Voor een plek waar mensen willen bestellen, kost een trage site klanten. WordPress en WooCommerce gingen eruit, een headless voorkant in Next.js op Vercel kwam ervoor in de plaats. Wat dat oplevert, staat in de meting van Google.

  • WordPress en WooCommerce erafDe rem ging eraf
  • Next.js op VercelDesktop laadt in 0,3 seconde
  • PageSpeed 99 en 100Gemeten door Google, niet door ons

03 Beheer

Een adminpaneel waarin ze alles zelf doen

Achter de site zit een eigen adminpaneel op een Supabase-database. De4Zussen past zelf teksten en afbeeldingen aan, voegt producten toe en zet het bestelportaal met een klik aan of uit.

  • Teksten en afbeeldingenZelf aanpassen, direct live
  • Producten en prijzenToevoegen en bijwerken zonder hulp
  • Bestelportaal aan of uitEén schakelaar, geen gedoe

Eigen adminpaneel

  1. Pagina’s en tekstenaanpassen
  2. Afbeeldingentoevoegen
  3. Producten en prijzenbeheren
  4. BestelportaalAan

Beheer zonder developer, alles op een eigen database in Supabase.

Techniek
Next.js, React, TypeScript, Supabase en Vercel
Geleverd
Webdesign, headless migratie, Supabase-adminpaneel, bestelportaal en performance

Het bestelportaal

Bestellen zoals bij Thuisbezorgd. Maar dan bij De4Zussen zelf.

Het hart van de site. Je kiest een categorie, zet wat je wilt in de winkelmand en rekent af. Per product kies je het aantal en de opties, en je laat er een opmerking bij.

De4Zussen zet het portaal zelf aan of uit in het adminpaneel.

Afhalen of bezorgen in Ede
De klant kiest zelf hoe de bestelling komt, met duidelijke besteltijden erbij.
Producten en prijzen in eigen hand
Een nieuwe lunch of een andere prijs zet De4Zussen zelf in het adminpaneel. Het portaal toont het meteen.

De site zelf

Blader door de pagina’s.

Twee pagina's van de live site, van boven tot onder. Tik op het scherm voor de hele pagina.

De volledige homepage

Van hero tot footer in één rustige pagina, met een duidelijke route naar bestellen en catering. Dit ontwerp gaf de doorslag.

de4zussen.nl

Meer werk

Alle cases

Laadt jouw site voordat je klant afhaakt?

Een trage site kost je elke dag bestellingen. Wil je een restaurant- of horecawebsite laten maken of je huidige site laten migreren naar Next.js? Net als bij De4Zussen laten we eerst het ontwerp zien, en beheer je daarna alles zelf.

Plan een kennismakingBekijk websites laten maken

Direct iemand van het team
0318 240 419