We are going to talk about how a Divi website is loaded, however this the same for any website really. It is important to understand this process in order to know how to speed up your website.
How is a website is displayed?
- A request is made when the URL is entered or a link is clicked.
- The page and its resources (files) are then downloaded from the server.
- The web browser uses the resources to build the web page.
- The web page then is displayed to the user.
These are the main things that happen to display a page but there are more components which I won’t go into detail about.
The above four steps can be simplified into the following:
Each of these steps are often carried out multiple times during the page load.
So lets go into more detail about each of the steps.
The website is requested when a a URL is typed in the browser, a link in clicked (like from google or Facebook) or when a page is reloaded.
When one of the above is performed a request is made for the document.
The document is your webpage which is a text file (such as .html) which is located on a web server (your host).
The web server then provides the document to the browser (chrome, IE or similar).
The web browser reads the document (html file) and looks for if it needs to download any other resources. This process is called “parsing”.
So the browser now knows there are more resources and requests the found files from the web server.
The way it downloads the resources and in which order is more complicated and we will write another post to explain this in more detail.
Once the browser has all the resources it can start the actual build of the website.
The browser combines the code from the document (html) and the found resources to build the page.
Three steps the browser does to build the webpage.
- Build the DOM
- Build the CSSOM
- Build the Render Tree
DOM means “Document Object Map”. It is a map of the location of where things are displayed on the page (the html specifies this).
CSSOM means “CSS Object Map”. It is a map of what CSS styles should be applied to the different areas of the page.
Building the Render Tree then takes the DOM and the CSSOM and combines them to create a combined map of the page, the structure (DOM) and how it will look (CSSOM).
Once all the above is done, the browser now has enough information to finally show something on the screen.
There are two steps here:
So the browser knows the structure and how it will look but it doesn’t know the size of the screen and where everything will end up. For example using the Divi Builder you can create a ⅓ and a ⅔ column layout in the row. This basically is is one column that is 25% and 75% – but 75% of what? This is where the layout comes into play – it works out the size of the screen in order to make the column 75% of that.
Once it has all the above with the specific dimensions the browser needs, it can now display something.This is when you actually see something on the page.
We analyse all four steps and look at optimising the process. We will talk about this in our future posts.