Issue List - Vue Issue List API fetch performance optimization
Background
Our Q3 OKR in product/dev includes a goal to improve the LCP for our issue list (&4279).
Problem
The refactored issuable Vue component significantly increases the LCP because fetching the issue list data doesn't immediately begin as the page starts loading.
Comparison of LCPs (in sec) between the current HAML issue list and the Vue issue list
https://gitlab.com/postmarketOS/pmaports/-/issues
LCP benchmark against
sitespeed.io
runs (as of Sep 7)
Local - The tests were done against https://gitlab.com/groups/tech-marketing/demos/gitlab-agile-demo/large-co/-/issues locally (
gdk measure
)
LCP (in sec) | |
---|---|
HAML issue list | 1.270 |
Vue issue list | 2.636 |
Possible Solutions
- Use startup.js for issue list.
- Embed serialized json data in HAML.
Edited by euko