🎥 Web Vitals Explained | Tech Talk Digest

What are Web Vitals, and why should you care?

🎥 Watch the original video here:

Transcript: Web Vitals Explained - Syntax #883

1. Note-Taking Practice

💡 Web Vitals

• Web vitals like LCP, FCP, CLS, INP, and TTFB are important metrics.
• Optimizing these numbers can be a good starting point to improve user experience.
• crucial to prioritize changes that actually impact real user experiences, rather than just focusing on achieving a perfect score.

💡 Tools

• Page Speed Insights https://pagespeed.web.dev
• browser DevTools — Performance Tab
• Google Search Central (formerly Webmasters)

💡LCP (Largest Content Paint)

• Measures how long it takes for the largest text or image element to render on the screen.
• “waiting for the website to stop making any huge changes”
• e.g. banners pushing content down.
• e.g. web font loading.

💡FCP (First Content Paint)

• Measures how long it takes for anything to show up on the screen after clicking a link.
• Doesn’t necessarily mean it’s usable yet — just that something showed up.
• Enabling or disabling the cache matters.

💡CLS (Cumulative Layout Shift)

• Measures how much the layout moves around while the page is loading
• Critical because layout shift could make a user click the wrong button.
• e.g. images loading in with no height set. 🥲
• e.g. tuning the fallback font’s style to avoid jumps. (link)

@font-face {
  font-family: fallback;
  src: local("Arial");
  ascent-override: 76.36%;
  descent-override: 22.46%;
  line-gap-override: 0%;
  size-adjust: 121.44%;
}
:root {
  --radnika: "radnika", fallback !important;
}

💡INP (Interaction to Next Paint)

• Measures how fast the page responds to user input
• 136ms — fast / 500ms — slow
• Ideal? Native apps respond immediately — that’s the bar to aim for on the web.
• e.g. ebay’s searchbar: not focused for about 200ms, after clicking it. 🥲
• e.g. applying optimistic UI to reduce the impact of slow server responses.

💡TTFB

• Measures the time between the browser request and the first byte of the response.
• Reflects server performance, API speed, and caching.
• e.g. Utilizing Cloudinary to optimize image delivery