Voor het grootste gedeelte websitebouwers is het versnellen van de website snelheid een terugkerend vraagstuk. De website snelheid bepaald immers niet alleen de gebruikersvriendelijkheid, het verbeterd ook de vindbaarheid in Google. Het meest gebruikte voorbeeld hierin is dat Amazon heeft uitgerekend dat ze 1.6 miljard dollar aan omzet per seconde vertraging verliezen.

Om de websitesnelheid consequent te kunnen verbeteren is het belangrijk om te weten hoe het laden van een website in zijn werking gaat. Dit artikel gaat over de 4 stappen van het laden van een website.

Welke stappen zijn dit?

Wanneer een gebruiker van het internet op een link klikt worden 4 stappen in gang gezet. Eerst noem ik deze stappen op en daarna licht ik deze individueel toe.

1. Bij stap één wordt er een aanvraag gemaakt. Dit gebeurt op het moment dat er op de link wordt geklikt;
2. De pagina zelf en de bronnen van deze pagina worden gedownload;
3. De bronnen worden door de browser gebruikt om de pagina op te bouwen;
4. Het renderen (tonen) van de pagina begint.

Nu ga ik verder in op de verschillende punten.

Stap 1: De aanvraag

Bij stap één wordt de aanvraag gemaakt. Dit is vaak in de vorm van een gebruiker die op een link klikt. Deze gebruiker wordt dan naar de URL van deze link genomen. Het moment dat de gebruiker op deze link klikt wordt ook wel “navigation start” genoemd. Dit is het begin van het gehele proces van het laden van de website.

Op dit moment wordt er gelijk een aanvraag gemaakt voor een document. Dit is vaak een HTML document van de desbetreffende pagina. Deze is gelokaliseerd op de webserver en wordt aangevraagd door de browser. Het aanvragen hiervan wordt gedaan door middel van het http systeem.

Het http systeem is de manier waarop browser en servers met elkaar interacteren. Dit systeem maakt het mogelijk voor browsers om documenten bij de servers op te vragen. Http staat voor “Hypertext Transfer Protocol”.
 

Stap 2: Het downloaden van de bronnen

De webbrowser heeft de aanvraag bij de webserver gedaan. De webserver reageert op de aanvraag door de aangevraagde documenten aan te leveren. De webbrowser ontvangt de aangevraagde documenten nu.

Wanneer de pagina enkel zou bestaan uit HTML zou dit het gehele proces al zijn. Eenvoudige pagina’s worden dus een stuk sneller ingeladen dan ingewikkeldere pagina’s. Tegenwoordig bevatten de meeste pagina’s echter ook vormen van rich media zoals video’s en afbeeldingen. Hierdoor moeten in veel gevallen ook verschillende CSS en Javascript bestanden worden ingeladen. Anders kunnen deze vormen van rich media niet worden weergegeven.

De webbrowser moet erachter komen of er rich media wordt gebruikt en waarmee dit wordt ondersteund. Dit proces heet het parsen van het HTML bestand. Het HTML bestand toont alle documenten die worden gebruikt om de pagina op te bouwen. Parsen betekent letterlijk: “Het lezen van een documenten door een computer om naar iets specifieks binnen het document te zoeken”.

Wanneer de webbrowser deze documenten heeft gevonden worden deze aangevraagd. De webbrowser ontvangt in dit stadium de additionele CSS en Javascript bestanden.
 

Stap 3: De pagina opbouwen

Tijdens stap 3 wordt de pagina opgebouwd. Dit wordt gedaan door de verschillende documenten die nu bij de webbrowser zijn. De gecombineerde informatie gevonden in het HTML document wordt hiervoor gebruikt. De browser moet 3 stappen doorlopen om de pagina op te bouwen:

1. De DOM bouwen
2. De CSSOM bouwen
3. De “Render Tree” bouwen

De DOM is de map waarin alles staat weergegeven. Dit document kan worden vergeleken met het HTML document. DOM staat letterlijk voor “Document Object Map”.
De CSSOM is de map waarin de stijlen van de pagina staat vermeldt en waar op de pagina deze kunnen worden toegepast. CSSOM staat letterlijk voor “CSS Object Map”.

De Render Tree is een combinatie van bovenstaande mappen. De combinatie hiervan maakt het mogelijk om de pagina op te bouwen. Tijdens deze fase wordt alle HTML, CSS en Javascript ingeladen.
 

Stap 4: De pagina renderen

Nu de eerste drie stappen succesvol zijn doorlopen kan de webbrowser de pagina tonen. Tijdens deze fase van het proces gebeuren er eigenlijk twee belangrijke dingen.

1. De lay-out van de pagina wordt bepaald;
2. De pagina wordt getoond aan de gebruiker.

Tijdens het bepalen van de lay-out van een pagina wordt de grootte van de elementen in kaart gebracht. Daarbij kunnen de exacte posities van deze elementen worden bepaald. Ook de grootte van de scherm die door de gebruiker wordt gebruikt wordt meegewogen in dit proces.

Wanneer dit allemaal is uitgevoerd wordt de pagina aan de gebruiker getoond. Alle informatie uit de Render Tree wordt nu gevisualiseerd en geconverteerd naar pixels. De pagina wordt nu interactief en is te gebruiken door de bezoekers.