Prompt
The largest contentful paint element is usually a responsive hero image. Design an optimization using fetchpriority, loading, preload, and srcset, including experiment, rollback, and accessibility requirements.
Scenario and constraints
Desktop and mobile use different LCP images, while the page also loads fonts, critical CSS, and analytics. The browser schedules resources itself and priority is a hint; implementations do not behave identically everywhere.
What this tests
The candidate should separate discovery timing, loading strategy, and request priority. fetchpriority=high raises a resource's relative queue priority, loading=eager/lazy controls deferral, and preload declares a resource early. Combining them can duplicate requests or starve CSS and fonts.
Reference approach
Use field data and the performance panel to identify the LCP element and request chain. Set high priority only on the confirmed above-the-fold LCP image. Use srcset and sizes to select one appropriate asset; do not preload both desktop and mobile candidates. Avoid high priority on image lists and do not lazy-load the hero. Experiment on LCP, critical-CSS completion, total bytes, and long tasks before expanding traffic.
Critical details
Responsive candidates must match preload imagesrcset and imagesizes; otherwise one image may be preloaded and another rendered. Inspect Network priority, initiator, cache hits, and request order on low-end devices and slow networks. Keep a feature switch and rollback version.
Common traps
Treating high as a forced download; marking every image high; using preload instead of correct image markup; checking only Lighthouse; ignoring alt, dimensions, and cross-origin caching; or claiming an improvement without a baseline.
Evaluation rubric
Strong answers explain LCP selection, priority conflicts, responsive consistency, experiment metrics, and rollback gates while acknowledging browser differences. Weak answers name one attribute without validating the request queue or field outcomes.
Follow-up questions
When would you use preload without fetchpriority?
Consider preload when a resource cannot be discovered early in HTML and genuinely needs an early request. If the browser already discovers the image promptly, a smaller priority hint may be easier to roll back; measure either choice.
What if LCP improves but fonts become slower?
Compare request order and bandwidth for critical CSS, fonts, and images. Lower non-critical image priority or remove duplicate preload, adjust font loading, and measure again.
How do you preserve accessibility while optimizing images?
Keep accurate alt text and explicit dimensions or aspect-ratio placeholders to prevent layout shifts. Ensure meaningful content remains at low bandwidth or with images disabled, and test with assistive technology.