De Nationale Locatie Site

Headless CMS-ontwikkeling met Vue.js en Elasticsearch

De opdrachtgever: Web-Effects

High-traffic platformen gericht op het vergelijken van locaties en zalen

Nog steeds die perfecte trouwlocatie niet gevonden? Je collega’s verrassen met een inspirerende vergaderruimte? Of gewoon op zoek naar een bijzondere locatie? Dan moet je bij Web-Effects zijn. Web-Effects biedt een aantal platformen en merken voor het vergelijken van locaties en activiteiten. Een voorbeeld daarvan is De Nationale Locatie Site. DNLS is hét platform om je zoektocht naar de perfectie locatie tot een goed einde te brengen. De uitdaging: sneller, veiliger en SEO-optimalisatie Performance van 6 seconde naar minder dan 1 seconde Web-Effects kwam bij ons met een CMS-constructie waarin data, website frontend en backend met elkaar waren verweven. Resultaat: onoverzichtelijke code voor de developer die lastig aan te passen, en een laadtijd van 6 seconde voor de bezoeker. Bovendien is zo’n constructie niet bevorderlijk voor de doorontwikkeling van het platform. Veel te winnen dus op het gebied van performance, beveiliging en SEO. Een uitdaging waar wij direct enthousiast van werden.

DNLS-mockup-casepagina

Onze oplossingen: Vue.js, Elasticsearch en Node.js

Applicatie-architectuur op de schop

Hoe haal je zo’n constructie uit elkaar, zonder een volledig nieuwe platform te moeten ontwikkelen? Wij hebben gekozen voor een headless CMS-oplossing, waarin de CMS-data fungeert als database die wordt uitgelezen door ElasticSearch. Klinkt misschien ingewikkeld, maar ElasticSearch is in onze ogen dé tool om supersnel complexe zoekvragen op te lossen en zoekresultaten te filteren. De perfecte oplossing voor DNLS dus.

Door de bestaande CMS alleen nog als database te gebruiken moest er nieuwe frontend met API-koppeling ontwikkeld worden. JavaScript met bijbehorende Vue.js en Node.js waren hierbij onmisbaar. Deze geavanceerde technologieën maakten het namelijk mogelijk een platform te bouwen dat zowel geniet van de voordelen van een SPA als van de voordelen van server-side rendering. Wat die voordelen zijn? Nou, bijvoorbeeld dat de bezoeker nooit langer dan 0,3 seconde hoeft te wachten.

Het resultaat: gebruiksvriendelijk en duurzaam platform

En dat zie je terug in het gedrag van de bezoekers

Na onze aanpassingen zat het met de performance dus wel meer dan snor. En ook de veiligheid kon door deze nieuwe applicatie-architectuur gegarandeerd worden; door het ontwarren van de verschillende functies en hier afzonderlijke systemen van te maken die met elkaar communiceren via API, wordt voorkomen dat een eventueel lek doorsijpelt in het gehele systeem.

Door het omgooien van de structuur hebben we DNLS tot een succesvol platform gemaakt met een prettige gebruikerservaring. Dat vinden niet alleen wij als experts, maar ook de gebruikers. Hoe we dat weten? Zowel het aantal bezoekers als het aantal offerteaanvragen is flink gegroeid. Een toename van 20% in traffic en een toename van 25% in conversie; die cijfers liegen er niet om!

*Heb je ook plannen voor een webapplicatie? Denk je na over het starten van een eigen platform, maar kan je hier wel wat hulp bij gebruiken? Wij vertellen je graag wat er allemaal komt kijken bij een succesvol platform! *