Reduce LCP in container registry index page
Largest Contentful Paint (LCP) is an important, user-centric metric for measuring perceived load speed because it marks the point in the page load timeline when the page's main content has likely loaded—a fast LCP helps reassure the user that the page is useful. Currently, the LCP for the container registry page is this area:
This area is painted completely circa 2 seconds after page load (local gdk).
To properly print this text we need to hit the API to retrieve info regarding the container expiration policy, but currently this call is connected to the image repository listing and tags count info, meaning that we need to reach the container registry to gather some info, this is notoriously slow.
- Refactor the page to use the GraphQL API
- Execute one first call asking only for a set of basic fields also add the first call to the startup script
- In parallel execute one-second call asking for the
expensivedata and update the UI with the new info
- Add necessary loaders
Implementing this will have two consequences
- We will be able to lower our LCP by 30% or more (this is the time we shave by not contacting the registry locally, I expect it to be more on a more 'strained' registry like gitlab.com one)
- We will also be able to lower the time that it takes for the image list to appear (which is the most important thing for our users)
What is needed
- We will need to complete the GraphQL API and refactor the frontend to use it: #276432 (closed)
- We will need to leverage the startup.js for graphql: https://docs.gitlab.com/ee/development/fe_guide/graphql.html#making-initial-queries-early-with-graphql-startup-calls