79 lines
3.8 KiB
XML
79 lines
3.8 KiB
XML
#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.
|