Background
As of current the perceived performance of loading the ReadingLists feature is sluggish due to numerous reasons,
LCP on beta is 3.0 seconds, so over the general guidance of 2.5s. On testwiki (on my 1 list with 0 items) 3.9s.
- Loading of Vue.js to show anything below title.
- Collections list item thumbnails are delaying largest contentful paint as they are implemented as CSS background-images
Loading the list view from cache:
Loading the list view cold:
Possible impacts (reminder)
First impressions
- Sluggish experience: Users perceive a website as slow or unresponsive when the main content takes longer than 3 seconds to load.
- Loss of trust: Visitors may assume the site is poorly optimized or unreliable, especially on mobile devices or slower connections.
- Reduced satisfaction: Studies show that users begin to lose patience after 2–3 seconds of waiting, which can create frustration.
Engagement impacts
- Higher bounce rates: Google data indicates that as page load time increases from 1s to 3s, the probability of bounce increases by ~32%. Beyond 3s, that risk grows sharply.
- Lower engagement: Slow LCP reduces the likelihood of scrolling, interacting, or exploring additional content.
- Interrupted task flow: Users who come to complete a specific action (like reading an article or making a purchase) are more likely to abandon it.
Goal
Improve/speed up perceived loading time of ReadingLists
Early ideas are
- Exchanging Vue ProgressBar with CSS-only Progressbar
- Wider reaching were changing Card logic to be able to use <img> element for being discoverable in initial page load (also consider fetchpriority=high
- Providing a Codex implementation of Skeleton loader component
- Providing a Codex PHP implementation of CdxCard (requires Codex PHP v0.8.0)