hamburger menu
dot zwarte bel

Voor wie is deze blog?

Om deze blog begrijpend te kunnen lezen is enige kennis van web-development benodigd. Ondanks dat de meeste termen zo duidelijk mogelijk worden uitgelegd, zal het lastig zijn deze blog volledig te begrijpen zonder enige ervaring te hebben met het ontwikkelen van websites.

In de blog vertellen we over een project dat we vrijwillig hebben aangenomen, ten gunste voor een goed doel. Tijdens het project hebben we 'geëxperimenteerd' met bepaalde tools waaruit nieuwe inzichten zijn verkregen. Evenals voor de klant, was dit voor ons ook een interessant project voor onze ontwikkeling. Veel leesplezier!

Statische en dynamische websites

First things first, er is een groot verschil tussen de zogeheten statische en dynamische websites. Om het goed te begrijpen is het belangrijk om de twee grootste verschillen te benadrukken. 

Een traditionele statische website is vast en hiervoor is kennis van programmeertaal(HTML) benodigd, wil je bijvoorbeeld een deel van de tekst of afbeelding aanpassen.

Een dynamische website wordt gehost door een server, die met behulp van een bepaalde logica content dynamisch inlaadt. Dit inladen kan dan gebeuren door middel van een CMS of database. Zo kun je zonder enige programmeertaal te beheersen een website wijzigen. De dynamische website is de meest gangbare vorm van een website tegenwoordig. Denk bijvoorbeeld aan een Wordpress of Craft CMS website. Het Craft CMS bieden wij vrijwel standaard als oplossing of advies aan.

Uiteraard weten we allemaal door het hedendaagse verwachtingspatroon van de gemiddelde gebruiker dat deze niet meer dan 3 seconden laadtijd wenst. Hier komt een belangrijk punt van de dynamische website. Stel je zou twee visueel identieke websites naast elkaar leggen, dan zul je zien dat in essentie de dynamische website trager is dan de statische website.

Theorie in de praktijk

We namen de proef op de som en hebben een project vrijwillig aangenomen met de vereiste dat we een statische website gingen bouwen. Uiteraard deden we dit voor een goed doel, namelijk een wielercours in Groenlo.

Misschien komt de gedachte nu bij je op: “Oh, dan kunnen ze dus alleen via de html-bestanden de site updaten met content?”. Nou, nee. We hebben ervoor gekozen om een statische website te bouwen die middels een headless CMS te beheren is. Het komt er simpel gezegd als volgt op neer: iedere keer wanneer in het headless CMS een aanpassing plaatsvindt, dan worden de website-bestanden opnieuw gebouwd met deze data. Het is inmiddels geen hele nieuwe techniek meer, maar wel een techniek waar we graag eens wat dieper op in wilden gaan.

Later in dit artikel meer over de daadwerkelijke statistieken. Eerst de ervaring van het ontwikkelen. Het design kwam overwaaien via InVision en we zijn hier mee aan de slag gegaan. Bram vloog bovenop de laptop en knalde met behulp van Tailwind een mooie, strakke platte site uit de grond. Vervolgens gingen Mustafa en ik (Floris) op een development-zaterdag in de boeken om te kijken hoe we dit tot leven gingen brengen. Al snel kwamen we erachter dat er genoeg tools voorhanden waren die ons naar het eindproduct konden leiden. De keuze ging uit naar Contentful en Netlify (mede door de tip van onze vrienden van Nerds & Company). Met behulp van een zogeheten static-site-builder hadden we al snel een POC(proof of concept) staan. Dat hebben we uitgewerkt en we kwamen erachter dat we toch een aantal functies in het CMS (Contentful) misten. Met name op flexibiliteit, die we gewend zijn van Craft, moesten we inleveren.

Contentful en Netify

Contentful, een Duits bedrijf dat inmiddels een bewezen topspeler is in de headless-CMS markt. Je zou Contentful kunnen zien als de Craft van de eerder genoemde dynamische website. Het verschil is wel dat de content-structuur binnen het systeem anders werkt. Er is namelijk geen keuze uit soorten content modellen, in tegenstelling tot Craft, die er 3 heeft. Verder heeft Contentful de eigenschappen die je verwacht van een CMS; er kunnen relaties gelegd worden binnen de content en er zijn voldoende verschillende velden om het de website beheerder gemakkelijk te maken. 

Netlify is hosting en sitebuilder in 1. Met een aantal commando’s kan het binnen 30 seconden de nieuwe data vanuit Contentful controleren, verwerken en releasen naar de productieomgeving. Buiten het bouwen van de site is het mogelijk om A/B testing te doen, identificatie van de bezoeker te verrichten en formulieren te creëren, verwerken, versturen en te exporteren.

Voordelen van een headless CMS

We noemen Contentful met opzet een headless CMS. Dit is vanwege de vrijheid die het met zich meebrengt. Je kan namelijk met de content alle kanten op. Het enige wat Contentful geeft is een json dataset die via API endpoints beschikbaar zijn. Dat betekent in simpele woorden; je kan er een site mee voeden, maar ook een intranet of applicatie voor je smartphone mee maken. Hierdoor geef je content-makers het gemak dat alle data vanuit één platform komt en daarbij verspreidt kan worden over alle gewenste platformen.

Alles voor de stats

Voorafgaand aan de statistieken hebben we de volgende optimalisatie technieken gebruikt:

  • Scripts en stylebestanden gecomprimeerd en verkleind;
  • Lazyload op afbeeldingen;
  • Netlify optimalisatie
    • HTTPS
    • HTTP2

De TTFB van de website ligt op dit moment tussen de 4ms en 170ms (gemeten over de datacenters van Netlify). De Google pagespeedtest geeft aan dat de optimalisatie van afbeeldingen, comprimeren en schalen meer aandacht vereist. De gehele website laadt nu tussen de 1-3 seconden. 

Nog te verwerken optimalisatiepunten:

  • Afbeeldingen transformeren naar benodigde grootte.
  • DNS laten managen door Netlify in plaats van Cloudflare
  • Preview API van Contentful gebruiken.

Conclusie: De website is met een aantal basis optimalisatie technieken prima te laden. Ook is het voldoende geoptimaliseerd voor een goede SEO prestatie.

Oordeel van de klant

Namens de klant vernamen we dat het content management systeem op zich prettig werkt. Wel heeft het nadelen als het gaat om content beheer; er is niet direct iets zichtbaar. De content editor maakt gebruik van markdown in plaats van HTML. Dit is beter omdat het door een json feed moet. Het nadeel hiervan is dat je speciale tekens voor en achter je tekst ziet. Bold tekst is bijvoorbeeld: __dikgedrukte tekst__. 

Verder kregen we als feedback dat een preview-link van je content handig zou zijn. Zo zie je hoe je tekst eruit komt te zien alvorens het zichtbaar is voor het grote publiek. Deze functie is wel mogelijk met Contentful, maar hebben we niet geïmplementeerd bij deze site.

Cookie-instellingen
Om je beter en persoonlijker te helpen, gebruiken wij cookies en vergelijkbare technieken. Met de cookies volgen wij en derde partijen jouw internetgedrag binnen onze site. Hiermee tonen we advertenties op basis van jouw interesse en kun je informatie delen via social media. Als je verdergaat op onze website gaan we ervan uit dat je dat goedvindt. Meer weten?

Oké