config.js blochează randarea: 565 de octeți care costă 620 ms
Fișierul cu configurația de rulare are 565 de octeți și e cel mai scump lucru de pe pagină înainte de prima vopsire: browserul se oprește din construit pagina până îl descarcă și îl execută, pentru că e cerut ca script obișnuit, fără nicio marcare care să spună „poți continua".
Ce am găsit
Măsurat pe dev cu Lighthouse 13.4.1 mobil, după livrarea lui #36 (closed):
render-blocking-insight — Est savings of 370 ms
/assets/index-fmvJl_xk.css 14.429 B 248 ms
/config.js?v=6a6058e3 565 B 622 ms
frontend/index.html îl cere așa:
<script src="/config.js"></script>
<script type="module" src="/src/main.tsx"></script>
Un <script src> fără defer oprește parsarea documentului. Modulul de sub el e amânat automat, deci pagina așteaptă un fișier pe care nimeni nu îl citește până când rulează modulul.
Soluția
defer pe el. Scripturile clasice amânate și modulele se execută în ordinea documentului, amândouă după ce documentul e parsat — deci config.js rulează în continuare înaintea lui main.tsx, exact ca acum, dar fără să blocheze nimic. window.__RUNTIME_CONFIG__ e citit doar din modul (frontend/src/lib/api.ts:7), niciodată în timpul parsării.
De verificat la implementare: frontend/docker/render-runtime-config.sh rescrie adresa fișierului cu un sed care caută src="/config.js". Potrivirea nu se schimbă dacă defer stă în altă parte a etichetei, dar merită confirmat rulând scriptul într-un container nginx:alpine, cum s-a făcut la #21 (closed).
De făcut
-
deferpe<script src="/config.js">înfrontend/index.html -
Confirmă că render-runtime-config.shîncă rescrie adresa, rulat într-un containernginx:alpine -
Confirmă în browser că window.__RUNTIME_CONFIG__există înainte ca aplicația să citească adresa API-ului — magazinul se golește dacă nu (aceeași clasă de defect ca antetele moștenite de pagina randată) -
Fișierul de stiluri rămâne blocant pe drept: e ce previne pagina nestilizată. Nu se atinge în acest issue
Criteriu de acceptare
Raportul Lighthouse pe mobil nu mai listează config.js printre resursele care blochează randarea, iar FCP-ul măsurat pe producție scade față de acum. Magazinul se încarcă normal în toate trei limbile, iar o schimbare de API_URL la pornirea containerului ajunge în continuare la vizitator.