WebIDE: Load only the essential components on initial load
At the moment there's a lot of the things happening in WebIDE on the initial load. Not necessarily, however, those things should happen all at once and right when the page gets loaded. This issue suggests to load only the components, essential for the initial load. And that would be only IdeSidebar
.
🤔
What about the remaining components? The remaining components should be converted into the asynchronously loaded ones. Meaning those will be loaded and bootstrapped only when they have to be output on the screen. Following this idea, components that are not essential for the initial loading but are not "protected" by v-if
condition like:
ide-status-bar
new-modal
find-file
- etc.
should be wrapped in a new condition and the condition defaulting to false
. The condition should be triggered to true
only after the navigation tree has been rendered.
Benefits
By loading fewer components on the initial load we will not only benefit from fewer bytes sent to the user right from the start, but also will see the real performance benefits. Here are the performance numbers. The measurements are taken for http://127.0.0.1:3000/-/ide/project/gnuwget/wget2/edit/master
URL in the local development environment running 5 consecutive loads. The numbers are simply for comparison:
Before
DOM METRICS
Parameter | Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average |
---|---|---|---|---|---|---|
DOM Content Loaded | 2316 | 1484 | 1257 | 965 | 1097 | 1423.8 |
DOM Complete | 2814 | 1623 | 1317 | 993 | 1265 | 1602.4 |
DOM Interactive | 938 | 627 | 898 | 591 | 618 | 734.4 |
CUSTOM METRICS & MEASUREMENTS
Parameter | Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average |
---|---|---|---|---|---|---|
webide-tree-loading-from-request | 8283 | 4244 | 3879 | 3862 | 4244 | 4902.4 |
webide-tree-within-app | 5038 | 2750 | 2614 | 2889 | 3141 | 3286.4 |
webide-tree-self | 2437 | 2221 | 2003 | 2281 | 2576 | 2303.6 |
After
DOM METRICS
Parameter | Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average |
---|---|---|---|---|---|---|
DOM Content Loaded | 2147 | 1308 | 1048 | 1032 | 968 | 1300.6 |
DOM Complete | 2491 | 1465 | 1226 | 1100 | 992 | 1454.8 |
DOM Interactive | 1029 | 681 | 701 | 707 | 549 | 733.4 |
CUSTOM METRICS & MEASUREMENTS
Parameter | Run 1 | Run 2 | Run 3 | Run 4 | Run 5 | Average |
---|---|---|---|---|---|---|
webide-tree-loading-from-request | 5941 | 5227 | 3667 | 3793 | 3490 | 4423.6 |
webide-tree-within-app | 2893 | 3876 | 2592 | 2677 | 2498 | 2907.2 |
webide-tree-self | 2046 | 2065 | 2046 | 2199 | 1988 | 2068.8 |
Unwanted (but tolerable) side-effects.
By not loading repo-editor
component right from the start (since it's behind the v-if
condition) loading a file after clicking it in the navigation tree might feel a little bit slower than usual. This, however, is affecting only the very first load of any file — the consecutive opening of the files will not be affected and will be the same as nowadays.
Availability and Testing
Please run package-and-qa
to ensure all tests still pass. Unlikely, but still possible that we might need to adjust waiting times in automation if files are loading slower than expected.