Meniul închis descarcă 17,9 KB de poze înaintea imaginii principale

Pe mobil, meniul închis își descarcă toate cele șase poze de categorie la fiecare încărcare de pagină — și le descarcă înaintea pozei pe care pagina o desenează. Sunt 17,9 KB luați din banda pe care o așteaptă LCP-ul, pentru un meniu pe care vizitatorul nu l-a deschis.

Ce am găsit

Măsurat pe producție, în raportul Lighthouse pe mobil al paginii /products/hypervolt-3-pro (Moto G Power emulat, 412 px):

615 ->  638   2.038 B  image/webp  /nav/shop-hypervolt.webp
615 ->  641   3.738 B  image/webp  /nav/shop-hyperboot.webp
615 ->  640   2.848 B  image/webp  /nav/shop-hyperice-x.webp
615 ->  641   3.391 B  image/webp  /nav/shop-normatec.webp
615 ->  641   2.638 B  image/webp  /nav/shop-venom.webp
615 ->  642   3.248 B  image/webp  /nav/shop-vibration.webp
776 ->  933  10.161 B  image/webp  /products/pdp/hypervolt-3-pro/1.webp   <- elementul LCP

Cele șase poze de meniu pleacă la 615 ms; poza pe care pagina o desenează abia la 776 ms.

Cauza

Pozele au deja loading="lazy" (frontend/src/components/MobileDrawer.tsx:54, :80, :257), dar atributul amână doar imaginile din afara ecranului. Sertarul e randat întotdeauna, iar când e închis se ascunde prin frontend/src/components/MobileDrawer.tsx:196:

open ? 'visible opacity-100' : 'invisible opacity-0'

visibility: hidden păstrează elementul în fluxul de aranjare, peste tot ecranul. Pentru browser pozele sunt în viewport, deci „lazy" nu amână nimic și le cere imediat.

Panoul de desktop nu are problema: Header.tsx:326 îl randează doar când activeItem?.menu există, adică după ce meniul e deschis.

De făcut

• Nu randa conținutul sertarului până la prima deschidere, sau scoate-l din aranjare când e închis, astfel încât loading="lazy" să își facă treaba. Atenție: display: none simplu anulează tranziția de opacitate — se păstrează animația de deschidere.
• Verifică pe producție, după deploy, că cele șase cereri /nav/shop-*.webp nu mai apar la încărcarea unei pagini pe mobil și că apar la prima deschidere a meniului.
• Verifică pe desktop că nimic nu se schimbă.

Criteriu de acceptare

Într-un raport Lighthouse pe mobil al unei pagini de produs, nicio cerere /nav/shop-*.webp înainte de elementul LCP. Meniul deschis pe mobil arată aceleași poze ca acum, cu aceeași animație.

Legat de #10 (closed): cei 17,9 KB sunt luați din banda pe care o așteaptă imaginea principală.