Een website laden, hoe werkt dat?
De website snelheid is voor veel websitebouwers en SEO-specialisten een terugkerend vraagstuk in allerlei vormen. Wanneer een website traag is kan dit veel omzet kosten en dit is daarnaast funest voor de ambities binnen de zoekmachines. Voor Amazon kost een vertraging van één seconde bijvoorbeeld ongeveer 1.6 miljard dollar aan omzet.
Om een website te kunnen versnellen is het belangrijk dat je ook weet hoe een website laadt. In dit artikel neem ik je mee in de 4 stappen waarin dit gebeurt.
Wat zijn deze 4 stappen?
Wanneer je op een link klikt gebeuren er grofweg 4 stappen. Hieronder noem ik deze kort op. Daarna licht ik de stappen verder toe:
- Er wordt een aanvraag gemaakt wanneer er op een link wordt geklikt;
- De pagina en de bronnen hiervan worden gedownload;
- De browser gebruikt de bronnen van de pagina om de pagina op te bouwen;
- Het renderen (tonen) van de pagina aan de gebruiker.
Stap 1: De aanvraag
De meest voorkomende manieren waarop websites worden aangevraagd is door op een link te klikken of het herladen van een website. Daarnaast komt het ook veel voor dat een URL direct in de web browser wordt getypt.
Het moment dat een website wordt aangevraagd wordt ook wel “Navigation start” genoemd. Dit is het begin van het proces waarin de website wordt geladen.
Er wordt op dit moment een aanvraag gemaakt voor een document. Dit is in veel gevallen een HTML document.
De locatie van dit document is de web server. Het document wordt aangevraagd door de webbrowser en wordt aangevraagd door middel van het http systeem.
In het kort: http is de manier waarop browsers en servers met elkaar praten. Het is bijvoorbeeld de manier waarop een server en een browser de documenten van een website pagina uitwisselen. http staat voor “Hypertext Transfer Protocol”.
Stap 2: Bronnen downloaden
De aanvraag is nu door de web browser gedaan. Als respons hierop levert de web server de aangevraagde documenten aan. Tijdens deze fase ontvangt de webbrowser de aangevraagde documenten.
In het geval dat een website alleen zou bestaan uit HTML documenten zou dit het gehele proces zijn.
Maar, veel websites bestaan tegenwoordig uit rich media dat wordt opgebouwd door o.a. CSS en javascript. Deze bronnen moeten ook worden ingeladen om de website correct weer te geven.
Hoe weet een pagina of er additionele bronnen benodigd zijn om de pagina in te laden? Op het moment dat de webbrowser het aangevraagde HTML document heeft ontvangen begint leest hij deze. Dit heet “parsing”: Het lezen van een document door een computer om naar iets specifieks binnen dit document te zoeken.
Wanneer er in het HTML document andere bronnen wordt gevonden worden deze aangevraagd. De afbeeldingen, CSS en javascript waarnaar wordt gerefereerd wordt nu aangevraagd en gedownload.
Stap 3: Het bouwen van de pagina
Wanneer de webbrowser alle benodigde documenten heeft kan het starten met de bouw van de pagina. Om dit te doen combineert de webbrowser de gevonden informatie uit het HTML document en de andere documenten waarnaar wordt gerefereerd.
Om de pagina te bouwen moet de webbrowser 3 stappen doorlopen:
- De DOM bouwen
- De CSSOM bouwen
- De “Render Tree” bouwen
De DOM is eigenlijk een map waarin alles staat weergegeven zoals dit in het HTML document staat. DOM staat voor “Document Object Map”.
De CSSOM is de map waarin staat vermeldt welke stijlen waar op de pagina moeten worden toegepast. CSSOM staat voor “CSS Object Map”.
De “Render Tree” combineert bovenstaande mappen om de gehele pagina in te kunnen laden. Tijdens deze stap wordt alle HTML, CSS en javascript ingeladen.
Stap 4: Het renderen van de pagina
Nu de eerste drie stappen succesvol zijn doorlopen kan de webbrowser de pagina daadwerkelijk tonen. Tijdens stap vier gebeuren er 2 belangrijke dingen. De layout van de pagina wordt bepaald en de pagina wordt getoond.
Het ontwerpen van de layout is eigenlijk de grootte van de elementen van de pagina bepalen. Daarnaast worden de exacte posities van de elementen op het scherm bepaald. Tijdens dit proces wordt de grootte van een scherm meegewogen in het vormen van de layout.
Nu alle stappen zijn doorlopen kan de webbrowser de pagina op het scherm tonen. Tijdens deze fase wordt alles in de “Render Tree” geconverteerd naar pixels op het scherm.
Door: Ralf van Veen, werkzaam bij ralfvanveen.com, SEO freelancer
