Many SEO specialists and website builders spend a large part of their time speeding up the web. This is becoming increasingly important for both the visitors of the website and Google.
However, in order to speed up a website, it is necessary to know how it loads. In this article, I will take you along in 4 clear steps in which a website is loaded.
The 4 steps
Hereafter I summarize the 4 steps in which a website is loaded. Each step has different components and elements. These components are described in detail after the list has been drawn up.
- The visitor clicks on a link: the request is made.
- The page and its resources are requested and downloaded.
- The browser uses the resources of the page (often the HTML, CSS, and JS) to build the page.
- The page is shown to the visitor (rendered).
This sounds pretty easy, doesn’t it? Now we’re going to go a little deeper into this step by step.
The request
There are numerous ways to request a page. Some of the most common ways are the following:
- A hyperlink is clicked on;
- The page is reloaded (refresh);
- A URL is typed into the browser.
The moment this happens (one of the above ways) is also called navigation start. This is the beginning of the entire process of loading a page.
The request has now been made: a request is made for a document. This is the document from the web page. In many cases, this is an HTML document. The location of this HTML document is the web server.
The browser communicates with the web server through a system called “HTTP”. HTTP stands for Hypertext Transfer Protocol and is the underlying protocol between the web server and a browser. The HTTP can be seen as a set of rules for consistently exchanging files (such as an HTML file). The secure version of HTTP is HTTPS.
The downloading
The browser has now made the request to the web server. The response is that the web server delivers an HTML file to the browser. When the website would only consist of HTML it would have been loaded by now.
However, in most cases, websites also consist of images, CSS, and JS. As a result, the process of loading the website takes longer.
Parsing
But, how does a browser know if a page has additional resources? Don’t worry, this is all in the HTML file!
When a computer reads a file to find something in it, it is called parsing.
The web browser reads the HTML file and searches for references to CSS and JS files. In an HTML file, there is a reference to supporting CSS and JS files for the layout and functionalities of a page.
When the browser finds these sources in the HTML file, multiple requests are made. A separate request must be made for each separate file. For this reason, less CSS/JS files often result in a faster loading website.
Building
Now we have all the files to build a page that looks and works well. The building is also done by the web browser. The browser combines the files that have been downloaded, this happens in three steps:
The DOM is built
DOM stands for “Document Object Folder” and is actually the folder of the page. This folder determines where everything should be located. The DOM is based on what is described in the HTML file.
The CSSOM is built
CSSOM stands for “Cascading Style Sheets Object Map”. The CSSOM is actually a folder that determines which styles are used where on the page. This is all based on what is in the CSS files. In this way, the layout of the website is recorded.
The render tree is built
The render tree can be seen as a combination of the DOM and CSSOM. The render tree is used by the browser to complete the final step 4: “painting” the website.
The render tree determines the layout of the entire page based on the DOM and CSSOM.
Rendering
Now that all previous steps have been completed, the browser will continue with the rendering of the page. This can be divided into two steps.
Determining the page layout
At the moment the browser knows three things:
What should be shown (the DOM);
How this should be shown (the CSSOM).
What is the relationship between point 1 and point 2 (the render tree)?
The browser, however, does not yet know where everything should be displayed and how large these elements should be. This is the reason why in this step the browser determines how big the screen is. The size and position of the elements are based on this.
Painting
Now that all calculations have been made, the page can be set up. The render tree is transformed into pixels and the visitor can view the page. This is also the moment that the website is fully functional. The image from the render tree is sketched 1 on 1 on the screen.
The preceding steps are important for this process. The render tree is built by the DOM and CSSOM. The DOM and CSSOM are composed of HTML, CSS and js files. This is all interconnected so that one error in the process can cause many problems.
Conclusion
It is important for everyone who is involved in performance and website speed to know how a website loads. If you have a good understanding of what happens under the hood, it is easier to make changes.
Something can go wrong at every step of the process, resulting in a slower website. By understanding the entire process from A to Z, you can adequately correct these errors in the system.
Use this knowledge to speed up your website as well. This does not only have an impact on the turnover of your company, but it is also an official ranking factor for Google.
Ralf is an experienced freelance SEO specialist working for a wide range of companies. From Dutch A-brands to international online shops to the baker around the corner.
Ralf is specialized in SEO, his strength lies in technical SEO, link building and international SEO. In addition, Ralf provides training in the various aspects of SEO.
His working method can be described as transparent, pragmatic and result-oriented.
When Ralf is not working on SEO projects, he likes to be on the squash court. As an avid squash player, he does not leave a stone unturned on the physical level either.
