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.
Domænet: performance
Perf-domænet internaliserer de statisk afgørbare dele af Lighthouse: billedformater og -vægt, render-blokerende ressourcer, dimensioner mod layout shift og selvhostede fonte. Målet er ikke en score men disciplin — siden er hurtig, fordi den ikke kan bygges langsom. Netop derfor hører lazy-loading hjemme her: kravet kan afgøres maskinelt, og dermed kan det håndhæves i stedet for blot at blive anbefalet.
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
Tilbage til oversigten over alle 86 regler.