Improving load time for building instructions
The previous posts have all focused on rendering full models. The user experience for browsing building instructions should also be nice. As an example, opening the building instructions on the first page should display the image and BOM for the step with little to no delay.
As an example. Here is how BrickHub.org today displays the first step of the mod of 5580 With the contrast set to 'high' in settings, it is very similar to how LEGO originally displayed the instructions back in 1990 (or was it 1986 in some markets?)
![[Image: vaeJzwP.png]](https://i.imgur.com/vaeJzwP.png)
Unfortunately the construction of bottom-up geometries causes all parts of the model to be built in the browser before the first step is displayed. Yesterday evening I changed that to only include the parts that are necessary for the construction step that is displayed.
The rendering time for the first step has improved as follows:
Psych
- Cold cache: 2900ms -> 1500ms
- Warm cache: 1700ms -> 1500ms
MAN Cement Truck
- Cold cache: 9500ms -> 3300ms
- Warm cache: 3400ms -> 2900ms
Executor
- Cold cache: 6800ms -> 2700ms
- Warm cache: 3000ms -> 2500ms
UCS MF (10179)
- Cold cache: 7900ms -> 3600ms
- Warm cache: 4300ms -> 3000ms
Here 'cold cache' refers to the very first time the page is loaded into the browser (no cached parts in the browser storage), while 'warm cache' has the parts already stored.
The loading times for 'cold cache' are improved as expected. That the 'warm cache' numbers are also improved is due to the parts not all being fetched for this first step. I mentioned earlier that this process should at most take 2ms in total, which these numbers contradict. However. That was just for retrieving the parts for storage. Additional code is being run to prepare those parts for being used in instructions, hence the larger performance improvement observed here.
The previous posts have all focused on rendering full models. The user experience for browsing building instructions should also be nice. As an example, opening the building instructions on the first page should display the image and BOM for the step with little to no delay.
As an example. Here is how BrickHub.org today displays the first step of the mod of 5580 With the contrast set to 'high' in settings, it is very similar to how LEGO originally displayed the instructions back in 1990 (or was it 1986 in some markets?)
Unfortunately the construction of bottom-up geometries causes all parts of the model to be built in the browser before the first step is displayed. Yesterday evening I changed that to only include the parts that are necessary for the construction step that is displayed.
The rendering time for the first step has improved as follows:
Psych
- Cold cache: 2900ms -> 1500ms
- Warm cache: 1700ms -> 1500ms
MAN Cement Truck
- Cold cache: 9500ms -> 3300ms
- Warm cache: 3400ms -> 2900ms
Executor
- Cold cache: 6800ms -> 2700ms
- Warm cache: 3000ms -> 2500ms
UCS MF (10179)
- Cold cache: 7900ms -> 3600ms
- Warm cache: 4300ms -> 3000ms
Here 'cold cache' refers to the very first time the page is loaded into the browser (no cached parts in the browser storage), while 'warm cache' has the parts already stored.
The loading times for 'cold cache' are improved as expected. That the 'warm cache' numbers are also improved is due to the parts not all being fetched for this first step. I mentioned earlier that this process should at most take 2ms in total, which these numbers contradict. However. That was just for retrieving the parts for storage. Additional code is being run to prepare those parts for being used in instructions, hence the larger performance improvement observed here.