Caching and Performance Engineering · Performance and Scalability
Frontend Performance and Core Web Vitals
Make pages load fast and stay responsive for real users.
Core Web Vitals measure user experience: LCP (largest content render, ≤ 2.5 s), INP (interaction responsiveness, ≤ 200 ms) and CLS (layout stability, ≤ 0.1). Improve them with fast server responses and CDNs, optimized and prioritized images, less render-blocking CSS/JS, code splitting, reduced main-thread work (break long tasks), and reserved space for media and ads. Measure with real-user monitoring, not just lab tools.
<!-- Prioritize the LCP image, reserve space, modern formats -->
<img src="/hero.avif" width="1200" height="600" fetchpriority="high" alt="..." />
<link rel="preconnect" href="https://cdn.example.com" />
<script type="module" src="/app.js" defer></script>
// Measure in the field
import { onLCP, onINP, onCLS } from "web-vitals";
[onLCP, onINP, onCLS].forEach((fn) => fn((m) => navigator.sendBeacon("/rum", JSON.stringify(m))));
Common pitfalls
- Lazy-loading the LCP image.
- Huge JavaScript bundles blocking interaction.
- Images without dimensions causing layout shift.
Key points
- LCP, INP, CLS
- Prioritize critical resources; split code
- Measure with RUM
Further reading: web.dev: Web Vitals
Practice questions
What does INP measure and what typically hurts it?
Answer
Interaction to Next Paint measures how quickly the page responds visually to user input; long JavaScript tasks on the main thread are the usual cause of poor INP.
How do you prevent layout shift from images?
Answer
Set width/height (or aspect-ratio) so the browser reserves space before the image loads.
Open in the app to mark lessons complete, take notes and track your progress.