34 lines
1.6 KiB
Markdown
34 lines
1.6 KiB
Markdown
## 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>` includes `width` and `height` attributes
|
|
|
|
### 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
|