The aim of this post is to make easier some of the aspects of speed optimization.
Imagine the full rendering of a website like assembling a piece of furniture* or whatever object that is composed of several components* that you should mount together.
Of course, you can’t assemble all the components before having them.
You will ask someone* to give you a list of what you need, and as soon as you receive it, you ask for the components.
As soon as you start receiving the components, you would like to mount them, but you will need first some of those components, and other ones later.
The time between when you ask for the list and the arrival* is very important.
If you ask for a pre-made list* instead of always asking to write the list over again and again, it will arrive sooner. Sometimes you can’t ask for a pre-made list because the components are always different. In that case who prepares the list has to be fast also if it has to query an archive or whatever it needs to get the information to prepare the list. And If the archive is not well organized, the time needed to collect the information will be higher.
Once you have the list, the time needed for the delivery will depend on the transporters, the length of their trips, the speed limit of the roads, and the way the components are delivered.
Take also into account that the load of the vehicles has an impact on their speed.
It would be a lot better having first the parts that should be assembled as the first*, and later the parts that should be mounted later.
If the components are too big and heavy, probably the vehicles that transport them will be slower.
In shorts, if you need to assemble a piece of furniture as fast as possible, you should:
- Ask the list of components that you need to someone who is able to deliver it as soon as possible.
- When possible, ask for a pre-made list, so they will send it to you faster because they don’t have to prepare it over again and again.
- Ask first the components that you should mount as first, and later those ones that you have to mount later.
- Ask both the list and the components to someone that is located near to you, in another case, the trips will need more time
- Chose transporters that are well organized and have vehicles that travel at the same time.
Now let’s relate the mounting procedure with the rendering of a web page.
| Mounting the piece of furniture | Full-page rendering |
| Piece of furniture | Web page |
| Components | Assets (scripts, stylesheets, fonts, images…) |
| Who sends the list | Webserver |
|
The time between when you ask for the list and the arrival of the list
|
Time to first byte (TTFB) |
| Pre-made list instead of always writing the list again and again | Page served by cache instead of dynamically built with PHP/MySql and then served |
| Who prepares the list has to be fast | You need a good server |
| It has to query an archive or whatever it needs to get the information to prepare the list | The server should provide good performance, in another case, the time spent by PHP/My/SQL to collect the information from the database would be too long. |
| If the archive is not well organized, the time needed to collect the information will be higher. | If the database is not optimized the queries to the database will be slower. |
| Ask both the list and the components to someone that is located near to you, | Chose a server that is located near the most of users. If the users are located everywhere in the world, connect your website to a CDN. |
| Ask first the parts that should be assembled as first | Preload the resources that are needed for the first rendering in the viewport |
| Ask later the parts that should be mounted later | Delay the resources that the browser doesn’t need for the first rendering |
| Transporters | The hardware used to transport the signals from the server to the client (including electromagnetic fields, wires, towers) |
| The length of their trips | Distance between the server and the user |
| The speed limit of the roads | The maximum speed allowed by the hardware that is installed between the server and the user. |
| The way the components are delivered | Sequentially (HTTP/1, parallelly (HTTP/2, HTTP/3) |
| You | The browser |
| How fast you are in mounting the piece of furniture | The performance of the browser |
Speed optimization may be more complicated than mounting a piece of furniture, but the procedure is very similar.
I hope this analogy can help to understand better what happens during the page rendering, in order to make the best choices and know what to do to improve the performance of your website.