KR: Improve the LCP performance of the top 5 most visited routes on GitLab.com by 25% => 83%
We are targeting to improve the Largest Contentful Paint performance of the top 5 most visited routes by 25% according to the issue - https://gitlab.com/gitlab-com/Product/-/issues/1344
Dashboard for OKR - https://dashboards.gitlab.net/d/7e1ePINGk/q3-okr-improve-performance-by-25?orgId=1&from=now-30d&to=now
This is a shared KR with Product.
| Page | Stage/Group | Baseline LCP | Current LCP (Oct 20) (Faster%) | Target LCP | Reached % | Epic |
|---|---|---|---|---|---|---|
| Project home | Create | 3081 ms | 2400 ms (+22%) | 2311 ms | 88.44% | Epic |
| Issues list | Plan | 1683 ms | 1583 ms (+5.94%) | 1262 ms | 23.75% | Epic |
| Issue Detail | Plan | 6314 ms | 3413 ms (+45.95%) | 4736 ms | 183.84% | Epic |
| MR List | Create | 2443 ms | 1992 ms (+18.46%) | 1832 ms | 73.81% | Epic |
| MR Detail | Create | 1739 ms | 1540 ms (+11.44%) | 1304 ms | 45.75% | Epic |
Average Improvement 20.78% => 83.12 % of goal reached
Calculation Sheet for numbers + Absolute numbers https://docs.google.com/spreadsheets/d/1nF5W-z9mP-_YPMUabq5cWa70BUdaxUyvzI7mlhAQWyU/edit?usp=sharing
Current LCP from the measurements on 2020-09-14 : https://storage.googleapis.com/sitespeed-results-gitlab/gitlab.com/2020-09-14-02-03-59/pages.html
Baseline LCP and Target were calculated from this sitespeed report - https://storage.googleapis.com/sitespeed-results-gitlab/gitlab.com/2020-08-06-17-40-02/pages.html
What is LCP
LCP is being increasingly recognized as the best single metric to gauge when a page is "useful": https://web.dev/lcp/ Good information around optimizing LCP is found here https://web.dev/optimize-lcp/
LCP is primarily affected by four factors:
- Slow server response times
- Render-blocking JavaScript and CSS
- Resource load times
- Client-side rendering
An LCP below 2.5s is considered good, so this should also be the extra target to have all LCP values below this.
Retrospective
Good
- We were able to improve on average the 5 most used routes by 20% with a lot of mainly global work
- As most of the improvements were on a global level this meant we improved also other routes and especially other metrics (CPU, Speedindex, etc.). Especially First Visual Change is now even faster then our competitors
- With the global improvements (Page Specific CSS, Image resizing etc.) we reduced the amount of data transferred substantially:
- Bigger understanding of Performance data + awareness was created during Q3 so more people are able to identify problems
- We created a couple of more techniques for optimization (Startup.jS for GraphQL) and also tools (User timing metrics)
Bad
- As there was soo much global work apart from some specific improvements we focused on that but didn't get to route specific work or teams just started on that work
- We see a lot of fluctuations in production on data, if we would be able to have the best measurements consistently by the infrastructure the target would have been met
- Improvements that looked great in a "lab" situation sometimes made no difference at all
- Our setup in staging is not 100% match of production so somethings needed even a longer roadtrip
- Some of the bigger initiatives which are "do everything or nothing happens" didn't get over the finish line (Icons, Pajamas) so had less impact
- Sometimes 5 people worked on one end with a lot of effort and one change on the other end already made the improvement forgotten -> More Linting + Observation tools
Try
- Keep working with a lot of involved teams on the improvements
- Keep pushing now on a broader basis with the LCP Q4 OKR - #9601 (closed)
- A couple of bigger initiatives will pay off when finished in the next weeks