Core Web Vitals: Make It Feel Fast
Practice diagnosing slow loading, delayed interactions, and shifting layouts. The scenarios cover LCP, INP, CLS, resource loading, hydration, web fonts, and differences between lab and field data.
Questions
- Not answered. Which results are in the "good" Core Web Vitals range?
- Not answered. What is the final LCP when a larger hero appears after the heading?
- Not answered. Which visible content can be an LCP candidate?
- Not answered. What LCP does this trace imply, in milliseconds?
- Not answered. Why does this hero image start downloading late?
- Not answered. Which LCP subpart is inflated when a loaded hero remains hidden until JavaScript adds a class?
- Not answered. Which statements about preload and
fetchpriorityare correct? - Not answered. Which preload correctly declares a late-discovered WebP hero?
- Not answered. What should you do when the above-the-fold LCP image has
loading="lazy"? - Not answered. Why is preloading every image in a ten-slide hero carousel usually counterproductive?
- Not answered. What is the LCP resource load delay for a text LCP rendered immediately with a system font?
- Not answered. Which markup is appropriate for preloading a critical WOFF2 font?
- Not answered. Why does
<link rel="stylesheet" href="app.css">normally delay the initial render? - Not answered. What happens to
<link rel="stylesheet" href="print.css" media="print">during a normal screen load? - Not answered. Which statements describe classic external scripts with
defer? - Not answered. When is
asynca better fit thandeferfor a classic script? - Not answered. What is true of
<script type="module" src="app.js"></script>withoutasync? - Not answered. Why did INP replace FID as a Core Web Vital?
- Not answered. Which phases contribute to an interaction's INP latency?
- Not answered. Which user actions are observed for INP?
- Not answered. What INP should a visit report if the user only reads and scrolls?
- Not answered. Which interaction usually becomes INP during a visit with 60 measured interactions?
- Not answered. Which INP is still in the good range?
- Not answered. What duration marks the long-task threshold?
- Not answered. Which INP phase grows when a 300 ms analytics task is running as the user taps "Add to cart"?
- Not answered. How should a click handler show a spinner before starting 400 ms of non-urgent CPU work?
- Not answered. When should you consider a Web Worker to improve INP?
- Not answered. Why can server-rendered controls look ready while still producing poor responsiveness?
- Not answered. How can an islands architecture reduce hydration cost on a mostly static article page?
- Not answered. How should you hydrate an immediately visible "Buy now" button?
- Not answered. Why do accurate
widthandheightattributes reduce CLS for responsive images? - Not answered. Which responsive image keeps its 16:9 space reserved before loading?
- Not answered. Which change prevents CLS from a consent banner inserted above the article?
- Not answered. Why can a panel expansion 800 ms after a click still add to CLS?
- Not answered. Does a layout shift triggered shortly after scrolling automatically receive the recent-input exclusion?
- Not answered. What is the layout-shift score when impact fraction is 0.6 and distance fraction is 0.3?
- Not answered. What is CLS when two separate session windows score 0.12 and 0.08?
- Not answered. Which animation strategy is least likely to create layout shifts?
- Not answered. What tradeoff does
font-display: swapmake? - Not answered. Why can
font-display: optionalimprove layout stability? - Not answered. Which techniques can reduce layout movement when a fallback font is replaced?
- Not answered. How should a team interpret lab and field performance data?
- Not answered. Why might field CLS be poor while a default Lighthouse load reports almost no CLS?
- Not answered. Why can field LCP be better than a throttled cold-cache lab result?
- Not answered. Why might CrUX still show the old performance pattern several days after a successful release?
- Not answered. Why can the LCP element in one lab trace differ from LCP elements seen in field RUM?
- Not answered. Why can a single page-load lab audit miss poor field INP?
- Not answered. What should you do when field INP is poor but the homepage lab run looks fast?