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?

1. A request is made when the URL is entered or a link is clicked.
2. The page and its resources (files) are then downloaded from the server.
3. The web browser uses the resources to build the web page.
4. 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:

1. Request
2. Response
3. Build
4. Render

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.

Request

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).

Response

The web server then provides the document to the browser (chrome, IE or similar).

If we had a simple one page html website with only one page, the page load would be finished now. Unfortunately this is not the case with WordPress or the Divi Theme. As it is more sophisticated than that – we need to get more files such as css, JavaScript and images.

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 found resources (images, css and javascript) will then be downloaded by the browser.

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.

Build

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.

1. Build the DOM
2. Build the CSSOM
3. 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).

Render

Once all the above is done, the browser now has enough information to finally show something on the screen.

There are two steps here:

1. Layout
2. Display

Layout

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.

Display

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.