What performance metrics do you know?
Key Web Vitals (core web metrics)
These are the metrics Google uses to assess a site's performance.
1. LCP - Largest Contentful Paint
When the largest visible element appears (an image, a heading, etc.). Shows the loading speed of the main content.
Good score: under 2.5 sec.
2. FID -> replaced by INP (Interaction to Next Paint)
INP measures how quickly the interface responds to user actions.
It evaluates interactivity.
3. CLS - Cumulative Layout Shift
Shows how much the layout jumps during loading.
A large CLS means bad UX (a button "runs away").
Additional important loading metrics
4. TTFB - Time To First Byte
The time from the request to receiving the first byte. Depends on the server.
5. FCP - First Contentful Paint
When the first visual element appears.
6. TTI - Time To Interactive
When the page becomes fully interactive.
7. TBT - Total Blocking Time
Total time the main thread is blocked. Strongly depends on the JS bundle.
Metrics relevant to SPAs (Vue, React)
An SPA loads a lot of JS, so specific indicators matter.
8. Bundle size
The size of the final JavaScript bundle.
The larger the bundle, the longer the TTI.
9. Number of JS chunks / code splitting
The number of files split out after lazy loading.
10. Hydration Time (for SSR/CSR + SSR)
The time needed to bring static markup to life.
Relevant for:
- Nuxt
- Next
- SSR projects
11. Memory usage
Browser memory usage. An SPA can consume a lot of RAM.
12. FPS (Frame rate)
How smoothly the UI runs:
- animations
- scrolling
- drag & drop
13. Long Tasks (>50ms)
Long tasks block the UI. They can be viewed via Performance Tools.
14. Component render time (Vue Devtools)
Component render time:
- reactive state changes
- number of re-renders
- re-rendering caused by props drilling
#15: Time to first interaction inside an SPA route
When the router lazily loads a component.
Short list for interviews (required minimum)
If the interview is short, it is enough to know:
- LCP - loading speed of the main content
- INP - interface responsiveness
- CLS - layout stability
- TTFB - server response speed
- Bundle size, TTI, TBT - important for SPAs
- FPS and Long Tasks - important for smoothness
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.