#heading[Optimalisaties en resultaten]

Tijdens de ontwikkeling van Serengo zijn meerdere optimalisatiegolven doorgevoerd op het gebied van performance, UX, architectuur en deployment. Dit hoofdstuk vat de belangrijkste stappen en hun impact samen.

== Performance- en SEO-optimalisaties

Op 7 oktober is een grote optimalisatieronde uitgevoerd gericht op SEO, PWA en laadtijden:

- *SEO-verbeteringen*
  - Toevoegen en bijwerken van meta-tags en Open Graph-data.
  - Automatische generatie van `sitemap.xml` voor betere indexeerbaarheid.
- *PWA-verbeteringen*
  - Uitbreiding van de service worker voor caching van statische assets en kernroutes.
  - Optimalisatie van `manifest.json` (iconen, naamgeving, start-URL).
- *Performance*
  - Compressie van de achtergrondafbeelding (± 50% kleiner; van ~4.2MB naar ~2.1MB).
  - Vite-configoptimalisaties en fixen van build-issues.

Gemeten resultaten (op basis van Lighthouse-logs):

- Homepageload verbeterd van ongeveer 2.5s naar 1.2s.
- Largest Contentful Paint gedaald van ±1.8s naar ±0.9s.
- Betere stabiliteit door caching en service worker-ondersteuning.

== Architecturale verbeteringen

In Phase 6 en 7 is de interne architectuur grondig herzien:

- *Overgang naar location-gecentreerd datamodel*
  - Scheiding tussen `locations` en `finds`, met meerdere finds per locatie.
  - Normalisatie van locatiedata (minder duplicatie, betere querymogelijkheden).
  - Transactieve migraties en data-integriteitscontroles tijdens de overgang.

- *Sync-service en api-sync-laag*
  - Implementatie van een centrale sync-service (`api-sync.ts`) voor optimistic updates.
  - Automatische rollback bij falende API-calls, waardoor inconsistenties worden voorkomen.
  - Vermindering van dubbele logica in componenten en eenduidige bron van waarheid voor find-, comment-, like- en ratingdata.

Deze ingrepen verhogen zowel de schaalbaarheid (efficiëntere queries, minder redundantie) als de gebruikerservaring (snellere, soepelere UI).

== UX- en mapoptimalisaties

Een belangrijke focus lag op de kaart- en navigatie-ervaring:

- *Fullscreen map + sidebar*
  - Introductie van een fullscreen kaart met een uitschuifbare zijbalk voor finds.
  - Oplossing van overscroll- en overflowproblemen in lijsten.

- *Dynamische mapcentrering*
  - Intelligente centrering van de kaart afhankelijk van sidebar-positie (desktop vs. mobiel).
  - Voorkomen van storende autozoom tijdens het volgen van locaties.

- *Marker- en layoutverbeteringen*
  - Toevoegen van location markers, clustering en betere positionering.
  - UI-finetuning voor FindPreview, CommentsList en andere componenten.

Resultaat: gebruikers zien hun find altijd in het zichtbare deel van de kaart, en navigeren vloeiend tussen locaties en finds.

== Mediaperformance en veiligheid

Om zowel performance als security te verbeteren, zijn verschillende stappen gezet rond media:

- Invoering van een lokale mediaproxy (`/api/media/[...path]`) in plaats van directe Cloudflare R2-URL's.
- CSP-fixes om externe resources gecontroleerd toe te laten.
- WebP/JPEG-pipeline voor efficiëntere afbeeldingen met fallback-ondersteuning.

Dit zorgt voor snellere laadtijden, minder kans op CSP-gerelateerde fouten en betere controle over de media-aflevering.

== Deployment- en operationele optimalisaties

Om deployments robuust en reproduceerbaar te maken zijn onder meer de volgende verbeteringen geïntroduceerd:

- Multi-stage Docker build voor kleinere, efficiëntere images.
- Verplaatsing van Drizzle naar production dependencies zodat migraties binnen de container kunnen draaien.
- Een entrypoint-script dat bij het starten van de container automatisch database-migraties uitvoert.
- Health checks en verbeterde logging voor snellere foutdetectie.

Samen maken deze optimalisaties Serengo geschikt voor langdurige, stabiele hosting met goede gebruikerservaring en onderhoudbaarheid.