Total Blocking Time - The metric to know for faster website performance

This post details the technical approach to reducing Total Blocking Time (TBT) on GitLab's 'View Source' page. It explains TBT and long tasks, demonstrates measurement using Chrome DevTools, and provides specific optimization techniques. These include changing UX (Show More, paging, virtual scrolling), lazy-loading images and lists, reducing excessive HTML, deferring rendering with `content-visibility: auto` and Intersection Observer API, and using `requestIdleCallback`. For VueJS, it suggests Server-side rendering (SSR) or streaming, avoiding unnecessary component abstractions, optimizing props, using `v-memo` and `v-once`, and deferring non-critical tasks with `requestIdleCallback` or WebWorkers. The post quantifies the improvement from ~3 seconds to ~500 ms TBT using `content-visibility: auto`, Intersection Observer API, and `v-once`.