1.6 KiB
1.6 KiB
Purpose
Define responsive image delivery requirements that reduce layout shift and improve deterministic performance outcomes for Lighthouse.
Requirements
Requirement: Card thumbnails have explicit dimensions
All card thumbnail images MUST include explicit width and height attributes matching the rendered aspect ratio.
Scenario: Thumbnail dimensions are present
- WHEN a crawler or browser loads a listing surface with content cards
- THEN each card thumbnail
<img>includeswidthandheightattributes
Requirement: Above-the-fold imagery is optimized
The site MUST ensure above-the-fold images are optimized for performance:
- avoid unnecessarily large image payloads for the requested viewport
- prefer modern image formats when first-party controlled
- avoid layout shift caused by late image dimension discovery
Scenario: Above-the-fold images do not cause layout shift
- WHEN a user loads the home page on a mobile viewport
- THEN the hero/top content area does not shift vertically due to image loading
Requirement: Third-party image variability is controlled for the Lighthouse gate
If a gated page depends on third-party images (e.g., external thumbnails), the gate MUST either:
- ensure those images do not block reaching 100s by design (e.g., not above-the-fold, lazy-loaded), or
- provide a first-party controlled alternative for gated pages.
Scenario: Gated pages avoid third-party image volatility
- WHEN Lighthouse runs against the gated URL set
- THEN third-party image delivery does not prevent meeting the required scores