Prompt and context
The page looks good in Lighthouse, yet real users report that clicks feel stuck. Existing RUM reports only an INP value and cannot tell whether event handlers, requestAnimationFrame, style and layout, or third-party scripts caused the delay. Design the LoAF observation, correlation, sampling, aggregation, and fix loop.
What the interviewer is testing
- Whether you understand INP input delay, processing duration, and presentation delay.
- Whether you know LoAF measures frames over 50 milliseconds and exposes script attribution and rendering timings.
- Whether you correlate interactions, LoAF, page version, and device context instead of uploading every raw event.
- Whether you handle browser support, buffers, cross-origin scripts, and privacy risk.
- Whether you connect data to code fixes, regression checks, and alerting.
Questions to clarify first
- Is the goal INP diagnosis, animation smoothness, long-task monitoring, or all three?
- What are the sampling rate, daily users, reporting budget, and retention period?
- May you record URLs, script sources, interaction types, and page versions?
- Which browsers must work, and what is the fallback when LoAF is unavailable?
- Which team owns alerts and fixes, and should thresholds use p75, p95, or device cohorts?
A 30-second answer
“I would put INP phase breakdown and LoAF observation in one RUM correlation path. Use PerformanceObserver for long-animation-frame, keep only frames intersecting high-INP interaction windows, and retain duration, blockingDuration, renderStart, styleAndLayoutStart, and script attribution. Detect support, redact fields, sample dynamically, and batch reports with page version, device cohort, and an anonymous session key. Aggregate by interaction and release, then link alerts to sourceURL and function. Validate each fix with the same cohorts and sampling.”
Step-by-step deep dive
1. Split the INP phases
Input delay is time from queuing to handler start, processing duration is handler execution, and presentation delay is time from processing end to the next painted frame. LoAF does not replace INP; it adds frame context to locate the slow phase.
2. Observe LoAF entries
Observe long-animation-frame with PerformanceObserver instead of repeatedly reading the performance timeline. The threshold is 50 milliseconds, and entries include duration, blockingDuration, renderStart, styleAndLayoutStart, firstUIEventTimestamp, and scripts.
if (PerformanceObserver.supportedEntryTypes.includes("long-animation-frame")) {
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
queueFrameForCorrelation(entry);
}
});
observer.observe({ type: "long-animation-frame", buffered: true });
}3. Correlate interactions and releases
Keep a short-lived INP interaction summary and a ring buffer of LoAF entries. When an interaction ends, use firstUIEventTimestamp, startTime, and duration to find intersecting frames and retain only the most explanatory few. Attach page version, experiment cohort, device class, and anonymous session key, never the complete input.
4. Explain script and rendering cost
blockingDuration estimates time that blocks input or high-priority work; renderStart and styleAndLayoutStart help separate pre-render, style/layout, and other phases. scripts can identify main-thread URL, function, and invoker type, but cross-origin iframes, workers, and extensions may have incomplete attribution.
5. Design sampling and privacy controls
Report high INP, anomalous long frames, or a small random sample by default; rate-limit each anonymous session. Allowlist or hash script domains, strip query parameters, user input, and DOM text, and disable detailed attribution on sensitive pages. Enforce retention, access, deletion, and a versioned sampling policy on the server.
6. Close the aggregation and fix loop
Aggregate p75/p95 by interaction, release, device, network, and script source instead of a single site average. Alerts show input, processing, and presentation phases plus common attribution. Compare before and after using the same sampling and cohorts to ensure the issue did not move to another device or interaction.
Example of a strong answer
“I would first use INP phase breakdown to decide whether input, processing, or presentation dominates, then add LoAF evidence. The client feature-detects and observes long-animation-frame, retaining only entries intersecting high-INP interactions with duration, blockingDuration, rendering timings, and available script attribution. Correlation uses release, experiment cohort, device, and an anonymous session key, not user input. Detailed attribution is sampled and redacted with a retention limit; unsupported browsers still report basic INP. The server aggregates by interaction, release, and device, alerts on likely source code, and validates fixes with cohort-level regression checks.”
Common mistakes
- Reporting only one INP number → no phase or code diagnosis → correlate INP phases with LoAF frames.
- Uploading every long frame raw → high cost and exposed context → sample, redact, and keep frames intersecting high INP.
- Treating 50 milliseconds as an INP pass line → frame threshold is confused with a product metric → explain thresholds and percentile targets separately.
- Assuming every script has attribution → cross-origin frames and workers are incomplete → mark gaps and analyze with release and device cohorts.
- Looking only at a site average → severe device-specific issues disappear → segment by interaction, device, network, and release.
Follow-ups and responses
Will LoAF replace the Long Tasks API?
Not directly. LoAF measures frames and supplies richer context, while Long Tasks remains useful for existing monitoring and compatible browsers. Compare both during migration instead of deleting the old signal abruptly.
Why not upload every script URL?
URLs can contain identifiers, query parameters, or internal paths, and they increase volume. Strip parameters, restrict domains, hash values, or keep only versioned source mappings according to page sensitivity.
How do you tell layout cost from script execution?
Compare renderStart, styleAndLayoutStart, duration, and script entries. If script time is small but the style/layout interval is large, inspect DOM size, selectors, and synchronous layout; confirm with a lab trace.
What about browsers without LoAF?
Feature-detect and fall back to basic INP, Event Timing, or Long Tasks, tagging the observation version server-side. Do not exclude those users from overall experience metrics; disclose the diagnostic capability difference in segmented reports.