Suggest an editImprove this articleRefine the answer for “What performance metrics do you know?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The key performance metrics are the **Web Vitals**: LCP (loading speed of the main content), INP (how fast the interface responds to user actions), and CLS (layout stability), plus additional indicators like TTFB, FCP, TTI, and TBT. **Key point:** for SPAs (Vue, React) bundle size, hydration time, FPS, and Long Tasks matter especially.Shown above the full answer for quick recall.Answer (EN)Image## 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: 1. **LCP** - loading speed of the main content 2. **INP** - interface responsiveness 3. **CLS** - layout stability 4. **TTFB** - server response speed 5. **Bundle size**, **TTI**, **TBT** - important for SPAs 6. **FPS** and **Long Tasks** - important for smoothnessFor the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.