Performantie richtlijnen voor websites

Performantie richtlijnen voor websites

De performantie van een website is belangrijk voor tal van factoren. Je bezoekers willen zo min mogelijk wachten totdat je site bruikbaar is en Google houdt rekening met de laadtijd van je website om je score in de rankings te bepalen. Maar hoe kan je die performantie nu verbeteren?

Naast de technische optimalisaties van een website, waar wij als websitebouwer voor verantwoordelijk zijn, zijn er ook twee aspecten waar je als klant rekening mee kan houden:

  • De grootte van een pagina
  • Het aantal requests op een pagina

We overlopen de beide zaken en geven concrete richtlijnen om ze te verbeteren. Hierbij houden we rekening met een ' performatiebudget': een begroting van bytes en requests die we kunnen spenderen op onze pagina.

De grootte van een pagina

De grootte van een pagina wordt gemeten in bytes. We begroten hier een budget van 1MB. Grotere sites zullen vooral op mobiele apparaten een merkbaar verschil geven in laadtijd. Verder dwing je de bezoeker ook om meer data te verbruiken en dat kan ook frustraties opleveren.

Een deel van het budget staat vast: de code van de website (HTML, CSS en Javascript) moet altijd ingeladen worden. De grootte hiervan hangt af van je website, maar je kan voor de gemakkelijkheid uitgaan vaan een grootte van ongeveer 250KB.

Je hebt dus nog 750KB over om te spenderen aan andere assets. De grootte van de tekst op een pagina is te verwaarlozen, dus we houden nog de volgende zaken over:

  • Afbeeldingen
  • Video's die als autoplay ingesteld zijn
  • Externe scripts

Het grootste deel van de grootte zal van de afbeeldingen komen. Websites die veel of grote afbeeldingen gebruiken, zullen merken dat ze snel over het budget gaan. Het is daarom belangrijk om te bepalen of de afbeeldingen in eerste instantie wel nodig zijn. Afbeeldingen moeten ook goed geoptimaliseerd worden.

Autoplay video's raden we in 99% van de gevallen af. Door de keuze niet aan de bezoeker over te laten, dwing je hem eigenlijk de video te bekijken en opnieuw veel data te verbruiken. Overweeg daarom om video's te embedden zonder autoplay. Zo kunnen we de grootte ook buiten het budget laten, omdat het initieel niet nodig is om de video te downloaden om de pagina te bekijken.

Externe scripts zijn zaken zoals Analytics, chatscripts, tracking pixels, ed. Vaak is hun grootte niet erg veel, maar doen ze wel veel requests. Requests bespreken we verderop in dit artikel. 

Het aantal requests van een pagina

Een website bestaat uit verschillende bestanden: scripts, stijlbestanden, afbeeldingen, ed. Elke keer dat een bestand gedownload moet worden, moet er gecommuniceerd worden met de server waar het bestand gehost staat. Hoe meer aparte bestanden er gedownload meoten worden, hoe meer overhead er ontstaat door deze communicatie.

De komst van HTTP2 heeft ervoor gezorgd dat er bundels van bestanden opgevraagd kunnen worden van een server, maar toch blijft het belangrijk het totaal aantal requests te beperken, zeker externe requests.

We begroten 50 requests als performantiebudget. Dat wil zeggen dat je 50 keer een bestand van een server kan gaan opvragen. Opnieuw zit je met een aantal requests die je site sowieso moet doen: de initiële request om de inhoud van de pagina op te vragen en enkele requests voor stijlbestanden en scripts.

Verder resteren de volgende zaken die requests genereren:

  • Afbeeldingen
  • Externa scripts

Iedere afbeelding zorgt voor 1 request, ongeacht de grootte van de afbeelding. Afbeeldingen beperken zorgt dus ook voor een beperking van de requests.

Externe scripts zullen waarschijnlijk voor de meeste requests zorgen. Vooral scripts zoals tracking pixels, youtube, chatscripts en analytics zorgen voor veel requests. Overweeg goed welke scripts echt nodig zijn voor je website en kijk hier eerst of je kan snoeien indien je over budget gaat. 

De totale grootte en de requests van je website meten

Nu we weten wat ons budget is en wat vooral ons budget verbruikt, kunnen we gaan kijken hoe groot onze pagina effectief is. Dit doen we in Google Chrome.

We maken gebruik van de Developer tools van Chrome. Open de pagina die je wil analyseren en gebruik de volgende toetsen:

Windows: F12
Mac: Command + Option + i

Het venster opent zicht aan de onderkant van je scherm. Navigeer naar het ‘Network’ tab en zet ‘Disable cache’ aan. Ververs dan de pagina met de volgende toetsen:

Windows: Control + F5 
Mac: Command + Shift + R

Je zal nu zien dat er een lijst verschijnt van alle bestanden die gedownload worden op de pagina. Wanneer de lijst klaar is, zie je vanonder link hoeveel requests er zijn gedaan en hoeveel data er gedownload is.



    • Related Articles

    • Richtlijnen voor afbeeldingen op je website

      Er zijn verschillende aspecten aan een website die impact hebben op de performantie, waarvan afbeeldingen een van de grootste zijn, vanwege hun bestandsgrootte. Om de grootte te beperken, maak je een afweging van kwaliteit versus performantie. ...
    • Fotos verkleinen voor websites

      Op een website is het aan te raden om de foto's zo klein mogelijk te integreren in het CMS. Websitesnelheid is namelijk een belangrijke ranking factor.  Om foto's te optimaliseren voor websites kan je deze tool gebruiken:  https://tinypng.com/ Voor ...
    • Privacy-disclaimer voor je website

      Om in orde te zijn met de GDPR wetgeving is het belangrijk om een Privacy & disclaimer te integreren in je website. Deze beide links zullen we in de footer (onderaan) plaatsen van je website. Hierbij de link naar een standaard template voor de ...
    • Extra e-mailadressen voor je Exchange mailbox

      Aan je Exchange mailbox kan je meerdere, alternatieve e-mailadressen koppelen met dezelfde domeinnaam. Dit zijn interne mail aliassen, intern omdat de doorverwijzing binnen dezelfde domeinnaam gebeurt. Wil je de mails doorsturen naar een ander ...
    • Importeer een back-up in Outlook voor Mac

      Heb je een back-up (export) van je mailbox gemaakt, dan kan je die makkelijk importeren in Outlook voor Mac. Volg deze stappen in Outlook voor Mac:  Via de navigatiebalk bovenaan ga je naar “Bestand” > Importeren. Selecteer het type van je back-up en ...