# perf/lazy-loading

Below-fold images lazy-load; the LCP candidate does not. Reglen perf/lazy-loading kører i page-scope med severity 'warning' og indgår i performance-domænet sammen med 7 andre kontrakter i frameworket.

## Hvorfor lazy-loading findes

Images outside the initial viewport should carry loading="lazy" so they never compete with the LCP resource. Conversely, lazy-loading the LCP image itself delays it by design — a classic self-inflicted Core Web Vitals wound. Heuristic: the first image in <main> is treated as the LCP candidate; the rest should be lazy.

## Sådan håndhæves lazy-loading

Reglen lazy-loading evalueres på hver enkelt renderet HTML-side for sig, så et fund altid kan føres tilbage til én konkret side og én konkret rettelse i data eller template. Fejler en side, får agenten en finding, hvor fix-instruktionen for lazy-loading er formuleret som en konkret arbejdsordre med filnavne og målbare krav — aldrig et vagt råd. Severity 'warning' betyder at et brud på lazy-loading rapporteres uden at blokere builds — men guld-standarden er først nået, når også advarslerne er væk.

## Test og fixtures

Som alle kontrakter i frameworket har perf/lazy-loading en mutant-test, der beviser at reglen fejler, når kravet brydes — en regel uden en fejlende test er ikke en regel. Golden-fixturet beviser omvendt, at en fuldt compliant side består lazy-loading sammen med de øvrige 85 regler, og denne demoside er selv underlagt hele kontrakten.

## Relaterede regler

- [perf/image-weight](https://pseo.mikkelkrogsholm.dk/regler/perf/image-weight/)
- [perf/self-hosted-fonts](https://pseo.mikkelkrogsholm.dk/regler/perf/self-hosted-fonts/)
- [perf/img-dimensions](https://pseo.mikkelkrogsholm.dk/regler/perf/img-dimensions/)