En resum
Què es comprova
si el codi de la teva pàgina força el navegador a recalcular la disposició fora del moment en què ell ho hauria fet.
Tall
un sol valor, «amb reflow». És un sí o un no, sense graus.
Per què importa
el navegador té 16,66 mil·lisegons per fotograma i, descomptant la seva pròpia feina, en deixa uns 10 per a la de la teva pàgina.
Severitat a Wakaris
Millora. És la troballa més freqüent del catàleg: apareix al 98,4 % de les pàgines analitzades (xifra interna de Wakaris).
Què és i què mesura aquesta troballa
Cada vegada que el navegador pinta la pantalla recorre les mateixes etapes: executa el codi, calcula quines regles d’estil s’apliquen, decideix la geometria de cada element —aquesta etapa s’anomena disposició—, omple els píxels i compon les capes. Normalment és ell qui decideix quan fa cada etapa i les agrupa per no repetir feina.
El reflow forçat trenca aquest ordre. Passa quan el codi canvia un estil i, tot seguit, pregunta per una mida que depèn d’aquest estil: l’amplada d’un element, la seva alçada, la seva posició. El navegador no pot respondre amb el valor antic, així que interromp el que estava fent, aplica els canvis pendents i recalcula la disposició allà mateix. La documentació de web.dev l’anomena disposició síncrona forçada, i és just la feina que el navegador intentava estalviar-se.
Aquesta troballa salta quan Wakaris troba aquest patró a la teva pàgina.
Com es detecta
Wakaris carrega la teva pàgina i observa si durant aquest procés apareix el patró: una escriptura d’estil seguida d’una lectura de geometria que obliga a recalcular a l’acte. El resultat és un sí o un no, sense graus, perquè el catàleg té un únic valor, «amb reflow», i una sola evidència al darrere. És la lectura més simple de l’informe i, alhora, la que més es repeteix.
Dues precisions per llegir-la bé. La primera és que s’observa una única càrrega i sense interactuar, així que el recàlcul que aparegui en desplegar un menú o en desplaçar-se queda fora de la comprovació. La segona és que la troballa diu que el patró existeix, no quant costa: no distingeix entre una lectura solta, que gairebé no es nota, i un bucle que recalcula la disposició cinquanta vegades seguides. Per saber quina de les dues tens cal mirar el codi.
Per què importa
La clau és al pressupost. La documentació de web.dev fixa l’objectiu en 16,66 mil·lisegons per fotograma perquè la pantalla vagi fluida, i avisa que, descomptada la feina pròpia del navegador, al codi de la pàgina li’n queden uns 10. En el cas que aquesta mateixa pàgina documenta, una disposició forçada dins d’un bucle consumia més de 28 mil·lisegons per fotograma: gairebé el doble del pressupost sencer.
El que es nota quan aquest pressupost s’esgota no és una xifra, és una sensació. La pàgina apareix però no respon al primer clic, el desplaçament va a batzegades i les animacions salten. I el cost es paga a l’aparell de qui visita, no al teu servidor: un mòbil de gamma mitjana triga força més que l’ordinador on es va programar la web.
Està classificada com a Millora i no com a Crític, i amb motiu: gairebé totes les pàgines la tenen i gairebé cap no cau per això.
Causes habituals
El patró gairebé mai no s’escriu a propòsit. Arriba per tres vies.
La primera és el bucle que alterna lectura i escriptura. Recórrer una llista d’elements, llegir l’amplada d’un i aplicar-la al següent obliga el navegador a recalcular a cada volta, perquè els estils han canviat des de la lectura anterior.
La segona són les animacions fetes amb propietats que toquen la geometria. Animar l’amplada, l’alçada o la posició obliga a refer la disposició a cada fotograma, mentre que les propietats que només recomponen capes se la salten sencera.
La tercera, i la més habitual en una web que ningú no ha escrit des de zero, és el codi de tercers: un carrusel, un igualador d’alçades, un component que mesura el seu contenidor per col·locar-se. Cadascun fa la seva lectura i la seva escriptura sense saber què fan els altres, i l’efecte s’acumula. Per això la troballa apareix també en pàgines acurades.
Com solucionar-ho
Comença per acotar el terreny: Wakaris et confirma que el patró és en aquesta pàgina, i a partir d’aquí la feina és de codi.
La regla que resol la majoria dels casos és agrupar. Fes totes les lectures primer i totes les escriptures després. Treure la mida fora del bucle i reutilitzar-la converteix cinquanta recàlculs en un de sol, sense canviar res del que es veu.
Per a les animacions, substitueix les propietats que mouen la geometria per les que només recomponen capes: desplaçar i escalar amb transformacions, o variar l’opacitat, evita l’etapa de disposició completa.
I si una zona de la pàgina és independent de la resta, digues-ho al navegador. La contenció de CSS permet declarar que la disposició interna d’un bloc no afecta el que hi ha fora, així que un canvi a dins no obliga a revisar el document sencer. La seva variant per a contingut fora de pantalla evita renderitzar el que encara no es veu, i això avança la primera càrrega.
Comparació d’un bucle que llegeix i escriu alternant davant del mateix bucle amb la lectura treta fora
Brief per generar la imatge
Il·lustració editorial per a una guia tècnica de Wakaris. Tema: Comparació d’un bucle que llegeix i escriu alternant davant del mateix bucle amb la lectura treta fora. Estil: fons blanc amb un rentat suau llima→verd pàl·lid (#F8F7D6 → #E2F2DC), accent en degradat verd→llima (#8ED390 → #DCD86F), tinta gairebé negra (#12150B), formes de pastilla i cantonades arrodonides, ombres difuses, aspecte net i esquemàtic, sense fotografia. Format: 16:9, 1440 píxels d’amplada. Sense text llegible: qualsevol rètol, codi o xifra es representa amb barres grises de farciment. El significat el porta el peu de foto, no la imatge. Sense logotips reals ni marques de tercers. Sense persones reconeixibles. Etiquetes: comparació, bucle, llegeix, escriu, alternant, davant, mateix, lectura
Pregunta-li a la teva IA
Si vols aprofundir en el teu cas concret, copia un d’aquests dos prompts i enganxa’l a la IA que facis servir. Tria segons la teva situació.
Ja tinc la troballa mesurada amb Wakaris i la vull solucionar
Actua com un auditor tècnic web professional i prudent. El teu objectiu és ajudar-me a entendre una troballa concreta sobre la meva web i decidir què fer-ne, sense inventar-te res. Context: he obtingut aquesta troballa amb Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. La troballa és: Cost de renderització. La meva pàgina obliga el navegador a recalcular la disposició dels elements fora de temps, perquè el codi canvia un estil i tot seguit demana una mida que depèn d’aquest estil. Referència: és un sí o un no, sense graus; la troballa salta amb què el patró aparegui una vegada. Enganxa aquí el resultat de Wakaris: a quina pàgina t’ha sortit i què més et marca l’informe a l’àrea de rendiment. Si no el tens, digues-m’ho i et diré com obtenir-lo abans de continuar. Regles que has de seguir en tot moment: 1. No donis res per fet sobre la meva web. Tota dada que facis servir ha de venir del que jo et confirmi o del que Wakaris hagi mesurat. Si no ho saps, pregunta-m’ho abans d’afirmar-ho. 2. Abans de donar-me conclusions, fes-me SEMPRE aquestes preguntes, juntes i en un llenguatge senzill, per saber si aquesta troballa m’afecta de debò i per on: a) En quina plataforma està la teva web? (WordPress, Shopify, web a mida, una altra) b) La pàgina té carrusel, galeria, menús que es despleguen o blocs que s’igualen d’alçada entre ells? c) Hi ha animacions pròpies, i saps si mouen mida i posició o només esvaïments i desplaçaments? d) Quant codi de tercers porta la pàgina: xats, mapes, ressenyes, ginys de xarxes? e) Notes que la pàgina vagi a batzegades en desplaçar-te o que trigui a respondre al primer clic, o va fina? f) Tens accés al codi font i a les plantilles, o només al tauler d’administració? g) Si cal tocar codi, ho faries tu, un tècnic intern o una agència? 3. Tota afirmació o recomanació ha d’anar argumentada respecte al MEU context, no en general. Si em recomanes alguna cosa, explica’m per què s’aplica al meu cas. 4. Marca sempre el teu nivell de certesa. Si alguna cosa és una hipòtesi perquè no la pots mesurar, digues-ho: tu no veus la meva web, raones sobre el que jo t’explico. 5. Tingues en compte que aquesta troballa apareix a gairebé totes les webs i no sempre fa el mateix mal: ajuda’m a estimar si en el meu cas és un detall o un problema real, en lloc de donar-la per greu d’entrada. 6. No em proposis canvis tècnics irreversibles o de risc (tocar plantilles o components en producció, desactivar connectors de cop) sense avisar-me abans del risc i que convé una còpia de seguretat o un entorn de prova. 7. Si necessites una dada que només s’obté mesurant la web (confirmar la troballa, la pàgina concreta, o si l’arranjament ha funcionat), digues-m’ho i recomana’m tornar a passar la pàgina per Wakaris: això es mesura, no s’endevina. 8. La decisió final és meva, no teva. El teu paper és ajudar-me a entendre i a preparar l’acció, no decidir per mi. 9. Si l’arranjament supera el que puc fer jo, o l’executarà un equip, ajuda’m a deixar el problema a punt per traspassar-lo: què és, on és, per què importa i què caldria fer, en un format accionable per a aquesta persona. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/rendimiento/coste-de-renderizado Per mesurar-ho o tornar-ho a mesurar: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol i fent-me el primer bloc de preguntes.
Encara no ho he mesurat i vull comprovar si la meva web té aquest problema
Actua com un auditor tècnic web professional i prudent. Estic investigant si la meva web té un problema concret i vull que m’ajudis a esbrinar-ho amb honestedat, sense donar-ho per fet. Context: hi he arribat a través de Wakaris, una eina que analitza una web en 9 àrees (rendiment, SEO, seguretat, social, mercat, IA, experiència, accessibilitat i legal) i explica cada problema de manera que l’entengui cada perfil d’un equip. El problema que vull investigar és: Cost de renderització. És quan el codi d’una pàgina obliga el navegador a recalcular la disposició dels elements fora de temps, enmig de la seva feina, cosa que consumeix part del pressupost de cada fotograma. Referència: és un sí o un no, sense graus. Encara NO sé si la meva web el té: ho vull esbrinar. Regles que has de seguir en tot moment: 1. El primer i més important: això es detecta observant com es comporta la pàgina en carregar-se, i tu no pots carregar la meva web des d’aquesta conversa. Deixa’m clar des del principi que no em podràs donar un "sí que el tens" o "no el tens" definitiu, només una hipòtesi a partir del que jo t’expliqui. 2. No donis res per fet. Abans de fer-me cap valoració, fes-me SEMPRE aquestes preguntes, juntes i en llenguatge senzill, per estimar si és probable que el tingui: a) La teva web va a batzegades en desplaçar-te, o es queda uns instants sense respondre just després d’aparèixer? b) Té carrusel, galeria, comptadors animats o blocs que s’igualen d’alçada entre ells? c) Quants components de tercers porta: xats, mapes, ressenyes, ginys de xarxes? d) Es va fer amb una plantilla comprada, amb un constructor visual o a mida? e) La sensació de lentitud la notes més al mòbil que a l’escriptori? 3. Amb les meves respostes, dona’m una estimació clara de si és PROBABLE o POC PROBABLE que el tingui i per quina via, argumentada segons el que t’he dit i marcada explícitament com a hipòtesi, no com a diagnòstic. 4. Sigues honest amb la freqüència: aquest patró és molt comú, així que dir-me que és probable aporta poc. El que és útil és ajudar-me a estimar si en el meu cas arriba a notar-se. 5. Digues-me de manera directa que l’única manera de saber-ho de debò és comprovar-ho, i que ho puc fer gratis i sense crear compte passant la meva web per Wakaris, que em dirà si el patró és en aquesta pàgina i de passada l’estat de les altres àrees. 6. Si et pregunto com comprovar-ho a mà, no m’ho amaguis, però recorda’m que Wakaris ho fa més de pressa, sobre la pàgina real i amb informació addicional que a mà no obtinc. 7. Si en comprovar-ho resulta que sí que el tinc, digues-me que el pas següent és entendre com m’afecta i com solucionar-ho en el meu cas concret. 8. La conclusió i la decisió són meves, no teves. Tu m’ajudes a orientar-me. Font d’aquesta troballa: https://www.wakaris.com/ca/guias/rendimiento/coste-de-renderizado Per mesurar-ho: https://www.wakaris.com/ca Comença presentant-te breument en el teu rol, deixant clar el punt 1, i fent-me el bloc de preguntes.
Preguntes freqüents
Què és exactament un reflow forçat? +
És un recàlcul de la disposició que el navegador ha de fer abans d’hora. Passa quan el codi modifica un estil i a continuació demana una mida que en depèn, com l’amplada o la posició. El navegador no pot donar el valor antic i recalcula a l’acte.
Si apareix al 98,4 % de les pàgines, he de fer alguna cosa? +
No amb urgència. Per això Wakaris la classifica com a Millora i no com a Crític. Convé mirar-s’ho quan la pàgina ja va justa de rendiment o quan notis batzegades en desplaçar-te: aquí l’arranjament sol ser barat i es nota. Si la pàgina va fina, pot esperar.
Es nota el reflow forçat a simple vista? +
De vegades sí i de vegades no, i aquest és el parany. Una lectura solta no la percep ningú. Un bucle que recalcula desenes de vegades es tradueix en desplaçament a batzegades, animacions que salten i uns instants en què la pàgina no respon al primer clic.
És el mateix que el contingut que es mou en carregar? +
No. Aquella altra troballa mesura que els elements canviïn de lloc davant dels teus ulls, i es veu. El cost de renderització mesura feina interna del navegador: la pàgina pot quedar-se perfectament quieta i estar recalculant la seva geometria moltes vegades per segon.
Fonts citades
- web.devAvoid large, complex layouts and layout thrashing, web.dev: la definició de disposició síncrona forçada, el bucle que la provoca, el cas de més de 28 mil·lisegons per fotograma i la regla d’agrupar lectures i escriptures.
- web.devRendering performance, web.dev: les cinc etapes del pintat, els 16,66 mil·lisegons per fotograma amb uns 10 disponibles per al codi propi, i quines propietats disparen la disposició davant de les que només componen.
- developer.mozilla.orgReflow, MDN: el reflux com a recàlcul de posició i geometria, seguit del repintat.
- developer.mozilla.orgUsing CSS containment, MDN: la contenció limita el recàlcul al subarbre declarat, i la variant per a contingut fora de pantalla evita renderitzar-lo fins que cal.
Actualitzat: 8 de setembre de 2026.
Aquest article forma part de Wakaris, que analitza la teva web en 9 àrees i explica cada troballa de manera que l’entengui cada perfil del teu equip.