Geschreven op 16 juni 2024.

Verbeteren van de core web vitals van het NC-CMS2

Als ontwikkelaar bij NC-Websites is mijn primaire taak het werken aan de ontwikkeling van ons contentmanagementsysteem, het NC-CMS2. Dit platform is ontworpen om de beperkingen van zijn toen al 13 jaar oude voorganger te overwinnen. Een van mijn trotse prestaties tijdens deze reis is de significante verbetering van de gemiddelde web vital scores in verschillende prestatiecategorieën. Dit artikel beschrijft de strategieën en inspanningen die hebben geleid tot deze verbeteringen, samen met veranderingen in onze processen om blijvende kwaliteit en prestaties te waarborgen.

Wat is het NC-CMS2?

Het verouderde platform dat we eerder gebruikten, zorgde voor tal van uitdagingen, waaronder repetitieve taken, complexe onderhoudsprocedures en een gebrek aan gebruiksvriendelijkheid. Deze problemen benadrukten de noodzaak van een moderne, efficiënte oplossing, wat leidde tot de ontwikkeling van NC-CMS2. Ons doel was om een systeem te creëren dat updates stroomlijnde, het hergebruik van lay-outs verbeterde en een solide basis bood voor toekomstige ontwikkeling.

Samen met mijn collega's begonnen we aan het creëren van een contentmanagementsysteem dat niet alleen de bestaande problemen zou aanpakken, maar ook de lessen van de afgelopen jaren zou incorporeren. Belangrijke kenmerken van NC-CMS2 zijn een flexibel systeem voor het maken van paginacategorieën met aanpasbare velden, een gebruiksvriendelijk pagina-bewerkingssysteem en verschillende aangepaste applicaties zoals registratie-, bestel- en reserveringssystemen. Deze applicaties integreren met externe tools zoals CRM- en boekhoudsoftware, wat de veelzijdigheid van het systeem vergroot.

De verbeteringen

Een van mijn belangrijkste bijdragen is het optimaliseren van de inhoudspresentatie om een dynamischere en aantrekkelijkere gebruikerservaring te creëren. Door mijn technische expertise te benutten, hielp ik de normen van onze websites te verhogen, zodat ze niet alleen visueel aantrekkelijk waren, maar ook functioneel een plezier om te gebruiken.

Een belangrijke mijlpaal in onze reis met NC-CMS2 is de verbetering van de webscores geweest, die verschillende aspecten van webprestaties meten. Een van de tools die we kozen om onze inspanningen te benchmarken was Google's Lighthouse. Lighthouse stelt ontwikkelaars en stakeholders in staat om een idee te krijgen van de verwachte gebruikerservaring van een webpagina en wijst op problemen die opgelost kunnen worden om de gebruikerservaring te verbeteren. Door gerichte optimalisaties en procesverbeteringen hebben we de volgende verbeteringen bereikt:

• SEO verbeterde gemiddeld met ruim 20%.
• Best practices score verbeterde gemiddeld met meer dan 25%.
• Toegankelijkheid verbeterde gemiddeld met bijna 50%.
• Prestatie score verbeterde gemiddeld met bijna 75%.

Metingen en methodologie

Om deze verbeteringen te meten, gebruikte ik de tool Unlighthouse. Het stelt gebruikers in staat om de Lighthouse-suite van tests niet op een enkele webpagina tegelijk uit te voeren, maar in snelle opeenvolging. Het voordeel is dat je een meer holistisch beeld van de website krijgt en ervoor zorgt dat één slecht presterende pagina niet wordt gemist.

Ik testte tot de eerste 200 webpagina's die in de sitemap van een website staan vermeld. De tests werden uitgevoerd met de throttling-instelling ingeschakeld en alle scores werden op hetzelfde apparaat gemeten. Hoewel de steekproefomvang helaas klein is vanwege tijdsbeperkingen, zijn de verbeteringen significant en indicatief voor de algehele verbeteringen die aan het platform zijn aangebracht.

Hoe we betere core web vitals hebben bereikt

Ik begon met het meten van verschillende webpagina's die op het nieuwe platform waren gemaakt met tools zoals Lighthouse. Op basis van de informatie die uit deze resultaten werd verkregen, begon ik te onderzoeken welke problemen de gebruikerservaring beïnvloedden en welke verschillende manieren er waren om ze op te lossen. Omdat ik aan de kern van ons product werkte, zouden alle verbeteringen die werden aangebracht waarschijnlijk op alle bestaande websites op het nieuwe platform van toepassing zijn.

Het toevoegen van indices en unieke constraints aan tabellen in de database hielp de tijd die elke query in beslag nam te verminderen en samen met het cachen van opgevraagde gegevens, kon ik de time to first byte verkorten. De database werd vaak belast met ingewikkelde queries en met dezelfde exacte informatie als voorheen, zelfs binnen hetzelfde verzoek. Door ervoor te zorgen dat databaseverzoeken snel zijn en tijdelijk worden opgeslagen, kon ik de weergavetijd van de webpagina meer dan halveren.

Asset bundeling en minificatie waren ook cruciaal om de totale laadtijd van de website te verminderen. Voorheen moest de browser veel verschillende assets van dezelfde site als van externe CDN's opvragen. Dit maakte niet alleen een ingewikkelde puzzel van "wat is geladen en klaar voor gebruik wanneer," maar creëerde ook onnodige overhead waarvoor de gebruiker moest wachten. De meeste code voor het contentmanagementsysteem was opgesplitst in twee bundels: één voor bezoekers en een andere voor redacteuren van de website. De build-stap die ik samenstelde, was een belangrijke bijdrage aan het verminderen van de tijd totdat een webpagina klaar was voor gebruik.

Automatische beeldschaalvergroting heeft ook geholpen om de algehele grootte van een webpagina te verminderen, wat betekent dat de browser minder hoeft te laden. Ik heb een systeem gebouwd dat ons in staat stelt om het MIME-type, de breedte, de hoogte, de compressie en veel andere informatie over een geüpload beeld op te geven. Het zal dit dan dynamisch converteren, bijsnijden en comprimeren voor de browser om te ontvangen. Dit betekent dat een front-end ontwikkelaar alleen de verhouding van het beeldscherm hoeft aan te geven die de afbeelding inneemt. Het contentmanagementsysteem zal dan dynamisch srcset attributen voor de afbeelding toevoegen, evenals het moderne formaat WebP met extra fallbacks voor legacy-ondersteuning.

Omdat we nu de afbeeldingen dynamisch konden wijzigen, konden we ook een breedte en hoogte toevoegen aan de tags die ze laden. Dit betekent dat browsers kunnen anticiperen op welke grootte ze moeten reserveren, wat de cumulatieve layout shift vermindert. Dit zorgt voor een prettige gebruikerservaring waarbij de inhoud niet verschuift tijdens het laden.

Dit waren slechts enkele van de verbeteringen die ik kon doorvoeren in vergelijking met eerdere versies van het contentmanagementsysteem. Maar de veranderingen beperkten zich niet alleen tot het product; onze processen zijn ook geëvolueerd. Ik voer nu een snelle controle uit voordat een website live gaat, om te zorgen voor naleving van onze bedrijfsstandaarden. Deze controle gaat verder dan een eenvoudige Lighthouse-check, waarbij verschillende andere tools worden gebruikt en ik mijn jarenlange ervaring als ontwikkelaar benut.

Naarmate de doelen toenemen, blijven we ons inzetten voor voortdurende verbetering. Hoewel aanzienlijke vooruitgang is geboekt, vooral op het gebied van prestaties, erkennen we dat er nog veel te winnen is. De core web vital scores, hoewel niet direct gecorreleerd aan de gebruikerservaring, geven een goede indicatie van waar verdere verbeteringen kunnen worden aangebracht. Onze inzet om deze inzichten te benutten zorgt ervoor dat we de kwaliteit en prestaties van NC-CMS2 blijven verbeteren. Met deze systemen in place hopen we meer vertrouwen te bieden aan onze klanten en onze jarenlange ervaring en toewijding te benadrukken.

Verder lezen

Je kunt ook meer te weten komen over het NC-CMS2 hier, evenals wat ik precies doe als full stack developer bij NC-Websites, of lees de uitleg van het CMS op: Uitleg NC-CMS2.