Practice & Assessment
Test your understanding of Core Web Vitals
Multiple Choice Questions
5Which HTML attribute most directly improves LCP for a hero image that is already in the HTML source?
What is the CLS score for a visible element that occupies 50% of the viewport and shifts by 30% of the viewport height?
INP replaced FID as a Core Web Vital primarily because FID:
Which source provides real-user field data for Core Web Vitals on PageSpeed Insights?
Why is Lighthouse score variability expected between runs?
Coding Challenges
1Instrument Core Web Vitals with web-vitals.js
Given a plain HTML page with a hero image and a click counter button, integrate the web-vitals library (CDN link provided). Capture LCP, CLS, and INP values. Log each metric to console in the format: `{name, value, rating}`. Then simulate a CLS issue by injecting a 100px div above the button on page load and observe the CLS score change. Input: provided HTML file. Output: updated HTML file with web-vitals instrumentation and the console-logged metric objects visible in a DevTools screenshot. Estimated time: 20–25 minutes.
Mini Project
Core Web Vitals Optimization Lab
Take the provided starter HTML page (hero image, article text, comment form) that intentionally has poor CWV scores: an unsized hero image, a render-blocking analytics script, and an expensive synchronous click handler. Your task: (1) fix LCP by adding explicit dimensions and fetchpriority to the hero image, (2) fix CLS by adding width/height or aspect-ratio CSS, (3) fix INP by rewriting the click handler to yield to the main thread using scheduler.yield(), (4) add web-vitals.js to confirm each metric is in the green threshold, (5) run Lighthouse before and after and include both scores in a README. Deliverable: the fixed HTML file, the README with before/after Lighthouse scores.