Statische website met dynamische content [Update 2020]

Eind 2018 schreven wij deze blog over het experimenteren met headless oplossingen. De redenen hiervoor waren destijds:

• Nieuwsgierigheid;
• Verbreding van onze tech-horizon;
• Andere CMS'en en frameworks toepassen om gebruiksvriendelijkheid voor onze klanten te onderzoeken.

Inmiddels zijn we 2 jaar verder en hebben we ontzettend veel geleerd. Terugkijkend op dit bericht en de gebruikte technieken hebben we veel nieuwe inzichten gekregen. In 2018 schreven wij deze blog over Contenfull. We hebben dit CMS één keer gebruikt als test, maar bij deze test is het ook gebleven omdat we tegen veel limieten aanliepen. Over de werking van een ander headless cms en de mogelijkheden die Netlify ons bracht waren we wel erg te spreken. Niet veel later of misschien wel daarvoor ontstonden de eerste websites waarbij we Vue.js hadden gebruikt. Dat was voor ons al een verademing en niet veel later namen we afscheid van jQuery. We besloten dit niet langer te gebruiken in onze projecten. Daarop volgend begonnen de eerste experimenten met Nuxt.js i.c.m. met de net nieuwe Craft CMS plugin CraftQL. Deze plugin werd later geadopteerd door Craft en het werd in de core opgenomen.

Hier een opsomming van zaken die we hebben geleerd:

• Met Vue.js maken we gemakkelijk interactie en intuïtief sterke applicaties.
• Snelheid van websites gingen door het plafond zonder vergaande caching toe te passen.
• Animaties toevoegen en beleving van een website vergroten werd eenvoudiger en beter.
• Veel plezier gehad en kennis vergaard in de tussentijd :-).
• Cypress E2E automated user-testingen toegevoegd.
• GraphQL query language.

Uiteraard hebben we ook veel hobbels genomen en overwonnen:

• CI/CD Aanpassen.
• Redirects instellen voor static websites.
• Netlify correct inrichten.
• SEO Settings van Craft via GraphQL naar Nuxt.
• Multilanguage websites met Nuxt.
• GraphQL met Apollo in Nuxt toepassen.
• En een hele boel andere uitdagingen.

Inmiddels hebben we in de afgelopen 2 jaar veel ervaring opgedaan. Dit kun je hier bewonden! Ook een Headless CMS gebruiken voor jouw nieuwe statische website?

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!

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.

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, 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.

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.

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.

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.