Veel SEO specialisten en websitebouwers zijn een groot gedeelte van hun tijd kwijt aan het versnellen van het web. Dit wordt voor zowel de bezoekers van de website als Google steeds belangrijker.
Maar, om een website te kunnen versnellen, moet je ook weten hoe deze laadt. In dit artikel neem ik je mee in 4 overzichtelijke stappen waarin een website wordt ingeladen.
De 4 stappen
Hieronder som ik kort de 4 stappen op waarin een website wordt geladen. Iedere stap heeft verschillende componenten en elementen. Deze componenten beschrijf ik na de opsomming uitvoerig.
- De bezoeker klikt op een link: de aanvraag wordt gemaakt.
- De pagina en de bronnen van de pagina worden aangevraagd en gedownload.
- De browser gebruikt de bronnen van de pagina (vaak de html, css en js) om de pagina op te bouwen.
- De pagina wordt aan de bezoeker getoond (rendered).
Dit klinkt best makkelijk, hé? Nu gaan we hier per stap iets verder op in.
De aanvraag
Er zijn verschillende manieren waarop een pagina kan worden aangevraagd. Een aantal van de meest voorkomende manieren zijn de volgende:
- Er wordt op een hyperlink geklikt;
- De pagina wordt opnieuw geladen (refresh);
- Een URL wordt in de browser getypt.
Het moment dat dit gebeurt (één van bovenstaande manieren) wordt ook wel navigation start genoemd. Dit is het begin van het gehele proces van het inladen van een pagina.
De aanvraag is nu gemaakt: er wordt een aanvraag gedaan voor een document. Dit is het document van de webpagina. In veel gevallen is dit een html document. De locatie van dit html document is de web server.
De browser communiceert met de web server door een systeem dat “http” heet. Http staat voor HyperText Transfer Protocol en is het onderliggende protocol tussen bijvoorbeeld de web server en een browser. Je kunt http zien als een set regels om consequent bestanden uit te wisselen (zoals een html bestand). Https is de veilige versie van http.
Het downloaden
De browser heeft nu de aanvraag gedaan bij de web server. De respons is dat de web server een html bestand aan de browser levert. Wanneer de website alleen uit html zou bestaan zou deze nu zijn ingeladen.
Echter, websites bestaan in de meeste gevallen ook uit afbeeldingen, css en js. Dit maakt dat het proces langer van de website inladen langer duurt.
Parsen
Maar, hoe weet een browser of een pagina additionele bronnen heeft? Geen zorgen, dit staat allemaal in het html bestand!
Wanneer een computer een bestand leest om iets hierin op te zoeken heet dit parsen.
De webbrowser leest het html bestand en gaat op zoek naar referenties naar o.a. css en js bestanden. In een html bestand wordt namelijk gerefereerd naar ondersteunende css en js bestanden voor het uiterlijk en de functionaliteiten van een pagina.
Wanneer de browser deze bronnen vindt in het html bestand worden meerdere aanvragen gemaakt. Per apart bestand moet een aparte aanvraag worden gemaakt. Dit is dan ook de reden dat minder css/js bestanden vaak voor een snellere website zorgen.
Bouwen
We hebben nu alle bestanden om een pagina op te bouwen die er goed uitziet en functioneert. Het bouwen wordt ook door de webbrowser gedaan. De browser combineert de bestanden die zijn gedownload, dit gebeurt in drie stappen:
De DOM wordt gebouwd
DOM staat voor “Document Object Map” en is eigenlijk de map van de pagina. Deze map bepaald waar alles moet staan. De DOM wordt gebaseerd op wat er in het html bestand staat beschreven.
De CSSOM wordt gebouwd
CSSOM staat voor “Cascading Style Sheets Object Map”. De CSSOM is eigenlijk een map waarin wordt bepaald welke stijlen waar op de pagina worden gebruikt. Dit wordt allemaal gebaseerd op wat er in de CSS bestanden staan. Hierdoor wordt de presentatie van de website vastgelegd.
De render tree wordt gebouwd
De render tree kan worden gezien als een combinatie van de DOM en CSSOM. De render tree wordt door de browser gebruikt om uiteindelijke stap 4 te voltooien: het “schilderen” van de website.
De render tree bepaald het uiterlijk van de gehele pagina op basis van de DOM en CSSOM.
Het renderen
Nu alle voorgaande stappen zijn doorlopen gaat de browser verder met het renderen van de pagina. Dit kan worden onderverdeeld in twee stappen.
Layout van de pagina bepalen
Op dit moment weet de browser drie dingen:
- Wat moet er worden getoond (de DOM);
- Hoe moet dit worden getoond (de CSSOM).
- Wat is de relatie tussen punt 1 en punt 2 (de render tree).
De browser weet echter nog niet waar alles moet worden getoond en hoe groot deze elementen moeten zijn. Dit is de reden dat bij deze stap de browser bepaald hoe groot het scherm is. Daarop wordt de grootte en plaats van de elementen gebaseerd.
Schilderen
Nu alle calculaties zijn uitgevoerd kan de pagina worden ingericht. De render tree wordt omgetoverd naar pixels en de bezoeker kan de pagina bezichtigen. Dit is tevens het moment dat de website volledig functioneel is. Het beeld uit de render tree wordt 1 op 1 op het scherm geschetst.
De voorafgaande stappen zijn van belang voor dit proces. De render tree is namelijk opgebouwd door de DOM en CSSOM. De DOM en CSSOM zijn opgebouwd uit html, css en js bestanden. Dit staat allemaal met elkaar in verbinding waardoor één fout in het proces voor veel problematiek kan zorgen.
Conclusie
Het is voor iedereen die zich bezighoudt met performance en website snelheid belangrijk om te weten hoe een website laadt. Wanneer je goed begrijpt wat er onder de motorkap gebeurt is het makkelijker om hier veranderingen in te brengen.
Bij iedere stap in dit proces kan iets fout gaan waardoor de website trager wordt. Door het gehele proces van A tot Z te begrijpen kun je deze fouten in het systeem adequaat verhelpen.
Gebruik deze kennis om ook jouw website te versnellen. Dit heeft niet alleen impact op de omzet van jouw bedrijf, het is ook nog eens officiële ranking factor voor Google.
Ralf is als ervaren freelance SEO specialist werkzaam voor een breed scala aan bedrijven. Van Nederlandse A-merken tot internationale webshops tot de bakker om de hoek.
Ralf is gespecialiseerd in SEO, zijn kracht ligt bij technische SEO, linkbuilding en internationale SEO. Daarnaast geeft Ralf trainingen in de verschillende facetten van SEO.
Zijn werkwijze kan worden getypeerd als transparant, pragmatisch en resultaatgericht.
Wanneer Ralf niet werkt aan SEO trajecten staat hij graag op de squashbaan. Als fervent squashspeler laat hij ook op het fysieke vlak geen steen onomgekeerd.
Bedankt voor het handige artikel Ralf! Het is absoluut handig dat men weet wat er ‘onder de motorkap’ gebeurt zodat ze hun website performance en snelheid kunnen verbeteren. Met als doel: een betere gebruikerservaring en mogelijk hogere posities in Google.