​Efficiënt data versturen voor een optimale gebruikerservaring
Door Roland van Berkel

​Efficiënt data versturen voor een optimale gebruikerservaring

Wanneer we een webapp ontwikkelen voor een klant, willen we hen een zo soepel mogelijke gebruikservaring bieden. Een belangrijk onderdeel daarvan is de snelheid. Er is een aantal mogelijkheden om daar invloed op uit te oefenen. Deze blog richt zich met name op de data die verstuurd wordt naar de bezoeker van de website.

Wanneer je een pagina bezoekt, vraagt je webbrowser (bijv. Chrome of Firefox) om informatie (de technische term daarvoor is ‘request’) van de server. Die reageert met een zogenaamde ‘response’ waarin afbeeldingen, scripts, opmaak en de pagina zelf teruggestuurd worden. De browser stelt de informatie samen en geeft de pagina correct weer.

De snelheid waarmee deze cyclus doorlopen wordt (en dus hoe prettig de gebruikerservaring is), hangt grofweg van vier factoren af:

  1. De server
  2. Het apparaat van de gebruiker
  3. De internetverbinding
  4. De hoeveelheid data

De snelheid van de server kan je als gebruiker natuurlijk geen invloed op uitoefenen. Wij als developers kunnen zorgen dat het doorlopen van logica (denk aan het verwerken van de gegevens van een formulier) zo efficiënt mogelijk gebeurt.

Het kan nogal verschillen met wat voor apparaat een gebruiker een website bezoekt; een gloednieuwe computer die is aangeschaft voor videobewerking of een vijf jaar oude smartphone. Het behoeft weinig uitleg welke van de twee sneller zal zijn in het weergeven van de pagina.

Ook de internetverbinding kan natuurlijk sterk verschillen per gebruiker. Een datapakketje is sneller gedownload op een snelle verbinding. Dit zijn zaken waar de gebruiker of de maker geen invloed op heeft.

Waar wij als developers wél invloed op hebben is de hoeveelheid data die via al die verschillende verbindingen naar al die verschillende apparaten wordt verstuurd.

Sowieso is het een streven om zo weinig data als mogelijk te versturen. Een goed voorbeeld hiervan zijn de scripts en gegevens voor pagina-opmaak (ook wel ‘stylesheets’). Als wij eraan werken zijn die helemaal uitgeschreven, maar bij het publiceren op de server worden ze gecomprimeerd, en zo worden ze ook verstuurd naar de gebruikers. Zo klein mogelijk dus.

Een goed voorbeeld van apparaat-afhankelijk versturen van data zijn afbeeldingen, toch vaak een zware kostenpost. Door de applicatie worden meestal meerdere versies van dezelfde afbeelding gegenereerd van verschillende kwaliteit en bestandsgrootte. Afhankelijk van de schermgrootte van de gebruiker wordt de juiste afbeelding voor dat apparaat verstuurd.

Voor een mobiele gebruiker betekent dat een kleine afbeelding, voor een desktopgebruiker juist een grote. Want je wil niet een afbeelding die bedoeld is voor een mobiel scherm met een breedte van 400 pixels versturen naar een computer scherm met een breedte van 1920 pixels, dat zou er maar korrelig uitzien.

Door slim om te gaan met de kennis over het apparaat van een gebruiker kunnen we dus op een efficiënte manier data versturen en bijdragen aan een optimale gebruikerservaring.

Zo zorg je ervoor dat jouw content wel gelezen wordt

Bekijk bericht

Het compromis van minder irritante advertenties

Bekijk bericht