Development

Het verhogen van de Site Speed

De laadsnelheid speelt een grote rol in het succes van een website. Het beïnvloedt je ranking in Google, de gebruikerservaring en daarmee je conversie. Kortom, de snelheid van de website is cruciaal.

Wat is Site Speed

De site speed geeft de laadsnelheid van je website weer. Op basis van de PageSpeed Insights kun je de snelheidsscore inzien die Google aan een website geeft.

Google komt tot een score op basis van een aantal pijlers, de belangrijkste drie zijn Loading, Interactivity en Visual Stability.

Technische termen maar waar het op neer komt is dat de resources, alle bestanden die de website vormen snel geladen worden (door bestanden klein te houden en gebruik te maken van de juiste bestandsformaten voor media), de snelheid waarin de gebruiker interactie kan hebben met de website (door scripts en overhead klein te houden) en in hoeverre de layout verschuift tijdens het laden (door afmetingen mee te geven voor resources die langer nodig hebben om te laden).

Wij proberen een score van 85+ te behalen voor mobiel, desktop scoort in het algemeen hoger in de PageSpeed tool van Google. In onze optiek heeft een waarde boven de 85 geen significante impact op de Google Ranking en user-experience.

Hoe wij ervoor zorgen dat we de meeste snelheid uit een website halen en welke onderdelen we optimaliseren lees je hieronder.

Static Site Generation

Door gebruik te maken van Static Site Generation behalen we veel voordeel op het gebied van snelheid. Waar in traditionele technieken bij een url request een database wordt aangeroepen om de data op te halen, de pagina op te bouwen op een server en deze terug te sturen naar de browser, wordt bij statische websites het grootste deel van de website al voor gegenereerd. Het deel van de request cycle waarin de database wordt aangeroepen en de pagina door de server wordt opgebouwd wordt overgeslagen. Op de server staan namelijk al de volledige HTML bestanden klaar.

Afbeeldingen optimaliseren

Een website bestaat uit verschillende bestanden onder meer uit HTML, CSS, Javascript en media (afbeeldingen, video's etc.) Over het algemeen vormen de media het grootste deel van de data bij een website. Hier valt dus veel te winnen door hier op de juiste manier mee om te gaan.

Zo zetten wij bijvoorbeeld automatisch de afbeeldingen om in het format WebP. Dit format zorgt voor een kleiner bestandsformaat en houdt de beeldkwaliteit hoog. Door de afmetingen vast te stellen voor verschillende schermformaten zorgen we ervoor dat er per schermformaat het juiste formaat afbeelding wordt opgehaald. Een afbeelding op een mobiel toestel kan namelijk een stuk kleiner worden geleverd aan de browser dan een afbeelding voor desktop. Dit kan volledig automatisch zonder dat content beheerders verschillende formaten dienen te uploaden of het bestandsformaat moeten omzetten.

Code Splitting

Front-end frameworks worden opgemaakt uit verschillende modules. Deze modules dienen ervoor om de codebase op te splitsen in kleinere onderdelen. Dit heeft als voordeel dat het beter georganiseerd is en dat developers bijvoorbeeld eenvoudig gebruik kunnen maken van packages. Packages bevatten functies die veel voorkomende problemen oplossen. Zo hoeven developers minder code te schrijven door gebruik te maken van packages.

Het nadeel hiervan is dat de codebase bij grotere en/of complexere projecten groot kan zijn. Code-splitting zorgt ervoor dat alleen de benodigde code wordt geladen voor de desbetreffende pagina. Dit resulteert in kleinere bestanden per pagina en dus meer snelheid!

Third Party Tools

Externe scripts, veelal voor marketingdoeleinden dienen, zorgen vaak voor een lagere score. Daarom proberen we waar mogelijk de API's te gebruiken van de tools ten opzichte van de generieke oplossing van het scriptje plakken. Dit zorgt ervoor dat er minder scripts geladen hoeven te worden door de browser.

Deze website maakt gebruik van cookies voor het analyseren van gebruikersgedrag.