Onze website is sneller dan de jouwe
Een nieuw jaar, een nieuwe website. En nog eens een snelle website ook! In dit artikel leg ik uit hoe we dat voor elkaar hebben gekregen en hoe ook jij in een mum van tijd een snelle website kan hebben.
Het probleem van een trage website
Sommige websites laden supersnel terwijl andere websites nooit lijken te stoppen met laden. Vanwaar dit grote verschil? Het antwoord moeten we zoeken in de manier hoe een website wordt gemaakt en in de bouwstenen ervan: HTML, CSS, Javascript en data zoals afbeeldingen. Vooral Javascript en afbeeldingen kunnen een negatief effect hebben op de laadtijd van een website. Er zijn gelukkig tools en frameworks om je hiermee te helpen. Onze keuze is gevallen op Gatsby.
Waarom Gatsby? Gatsby heeft begrepen dat het maken van een snellere website nogal overweldigend kan zijn, er zijn zoveel zaken waar je rekening mee moet houden: de afbeeldingen, het aantal netwerk requests om data op te halen, Javascript die wordt uitgevoerd, noem maar op. Gatsby is zo gebouwd dat de juiste manier om iets te bouwen ook meteen de meest simpele manier wordt. Het heeft de correcte standaard instellingen meegekregen waardoor developers meteen kunnen doen wat ze graag doen: code schrijven.
Onze oplossing
Gatsby past bij ons. Het is een moderne tool die gebruik maakt van nieuwe en innovatieve technieken om zo een schitterend resultaat op te leveren.
- Gatsby maakt gebruik van React
- Data ophalen, wat en vanwaar dan ook, wordt gedaan met GraphQL. Een eenduidige en duidelijke manier om alle soorten data op te halen.
- Gatsby is een progressive site generator wat zoveel wil zeggen als een tool die de statische bouwblokken van het web - HTML, CSS en Javascript - genereert en combineert met een framework zoals React om interactiviteit toe te voegen aan de website.
Gatsby is niet het enige wat onze nieuwe website zo snel maakt. Gezien het feit dat Gatsby statische HTML en CSS oplevert kunnen we gebruikmaken van Azure blob storage om de website te hosten. In combinatie met de CDN van Azure levert dat goede resultaten op.
De content voor de website komt uit 3 verschillende bronnen: een headless CMS Prismic, foto's van onze Instagram account en artikels geschreven in MDX die samen met de website gebouwd worden.
De uitdagingen
Een statische website is zeker snel maar je wil natuurlijk ook met enige regelmaat nieuwe content zoals een artikel of in ons geval een nieuwe post op onze Instagram account publiceren. Gatsby trekt dus tijdens het bouwen van de website al deze content binnen en dan staat het resultaat er.
We hebben dus ook een Azure Function en een Azure Logic App gebouwd die respectievelijk voor ons de content op Prismic in de gaten houden en onze Instagram account. Wanneer er een wijziging in deze bronnen plaatsvindt wordt automatisch een nieuwe build in Azure DevOps gestart. De build is gekoppeld aan een automatische release waardoor de website, met de gewijzigde content, opnieuw wordt gedeployed.
Resultaat
Het resultaat mag er zijn: een statische website die toch wel dynamisch is. De winst die we hebben ten opzichte van onze vorige website is voornamelijk in hoeveelheid data die verstuurd wordt. We zijn van 4MB naar 1MB gegaan. Wat Gatsby ook heel goed regelt is dat afbeeldingen pas geladen worden wanneer ze in de viewport van de browser komen. Concreet wil dat dus zeggen dat wanneer je naar onze website surft je in eerste instantie nog niet de Instagram foto's binnenhaalt, die worden pas geladen wanneer je verder naar beneden scrolt.
Wil je nog meer weten? Neem gerust contact met ons op en we lichten onze aanpak en oplossing graag persoonlijk toe!
Maarten is een .NET expert met een focus op software architectuur die past bij de cloud, zowel op de backend als op de frontend. Maarten werkt momenteel als hands-on software architect bij Action en helpt bij het ontwerpen en opzetten van een nieuw digitaal platform.