Skip to content

Imaginea principală, găsită fără să se aștepte JavaScript-ul

Vitalie requested to merge 21_lcp-discovery into develop

Cel mai mare element al magazinului e imaginea din bannerul paginii de start, deci LCP-ul e momentul în care se termină ea. Adresa ei nu se putea afla decât după ce se descărca pachetul de intrare, se executa, și răspundea /api/banners: măsurat pe producție, cererea imaginii pornea la 1.265 ms, în urma tuturor pozelor de mai jos din pagină, către un domeniu căruia nu i se făcuse încă nici rezoluția DNS, nici negocierea TLS.

Ce s-a schimbat

Adresa imaginii ajunge în antetul paginii. Randarea scrie deja <head>-ul și știe care banner e primul, deci scrie și <link rel="preload" as="image"> pentru el — un decupaj per prag (portret sub 750px, peisaj peste), ca telefonul să descarce unul singur, nu amândouă. Doar primul banner: restul caruselului e la cinci secunde distanță.

Originul API-ului e citit din același /config.js pe care îl citește și browserul, nu dintr-o a doua variabilă pe server care ar putea rămâne în urmă.

Conexiunea către domeniul API se deschide cât timp pagina încă se parsează — preconnect, scris la pornirea containerului din API_URL, nu fixat în index.html: domeniul API e o valoare per mediu, iar o copie făcută la build ar lăsa dev-ul să se conecteze la producție. Paginile randate îl moștenesc, pentru că backendul injectează chiar în acest fișier.

fetchpriority="high" pe imaginea din hero.

Pozele din panou se cache-uiesc un an, marcate immutable. Fiecare încărcare primește un nume nou (randomUUID), deci o adresă existentă nu-și schimbă niciodată conținutul; origin-ul trimitea max-age=0 și imaginea principală se descărca la fiecare vizită.

Ce rămâne din issue

  • Mărimea pachetului de intrare — nu intră aici. Separarea resurselor de traducere adaugă un drum dus-întors înaintea primei vopsiri dacă nu se emite și preload-ul pentru limba paginii respective; e o schimbare mai mare, cu risc propriu, și merită issue-ul ei.
  • Browser Cache TTL din Cloudflare pe „Respect existing headers" — fără el antetul de un an rămâne suprascris. Cere accesul lui Vitalie în panou.

Verificare

  • Scriptul de pornire rulat într-un container nginx:alpine, ca în producție: preconnect injectat corect, o singură copie după două rulări, preload-urile de fonturi neatinse
  • Pagina randată local: două preload-uri pe pagina de start în toate trei limbile, niciunul pe pagina de produs sau pe colecție
  • curl -sI pe /uploads/<fișier> → public, max-age=31536000, immutable
  • backend: npm run build, npm test — 448 de teste trec, cinci noi în tests/hero-preload.test.ts
  • frontend: npm run lint, npm run build, npm test — 196 de teste trec

Refs #21 (closed)

Merge request reports