20/02/2026
Millora la performance de les teves aplicacions React amb Core Web Vitals (LCP, INP, CLS), eines com Lighthouse i DevTools, i bones pràctiques: imatges, lazy loading, memoització i molt més.
El rendiment web no és només “carregar ràpid”: també és respondre bé mentre l’usuari interactua. En React, una app pot semblar ràpida en la càrrega inicial però sentir-se lenta si després hi ha bloquejos, renders innecessaris o canvis visuals inesperats.
Optimitzar la performance impacta directament en l’experiència d’usuari, el SEO i l’accessibilitat.
Mètriques clau: Core Web Vitals
LCP (Largest Contentful Paint)
Objectiu: < 2,5 s.
INP (Interaction to Next Paint)
CLS (Cumulative Layout Shift)
Mesura en laboratori vs dades reals
Eines per mesurar el rendiment en React
Mesurar bé és la meitat d’optimitzar bé. Aquestes són les eines més útils per detectar colls d’ampolla i prioritzar millores.
Google Lighthouse
Ideal per a una primera auditoria ràpida: rendiment, accessibilitat i recomanacions accionables.
Chrome DevTools (Performance)
Per anar al detall: temps de scripting, ús de memòria, càrrega de recursos i tasques llargues que bloquegen el fil principal.
Real User Monitoring (RUM)
Estratègia per capturar dades reals en producció. En apps amb login, es recomana instrumentar utilitzant APIs del navegador i enviar mètriques a analítica per veure el rendiment per dispositiu, xarxa o segment.
Optimització d’imatges (el “quick win” més habitual)
Formats moderns: WebP i AVIF
- WebP: molt compatible.
- AVIF: millor compressió, però menor compatibilitat en navegadors antics.
Compressió i mides correctes
Comprimeix sense perdre qualitat i evita servir imatges gegants en pantalles petites.
Imatges responsives i fallback
Utilitza versions adaptades per dispositiu (media queries / mides) i fallback quan calgui.
Com funciona React internament (i per què afecta la performance)
React utilitza un Virtual DOM per calcular els canvis abans d’aplicar-los al DOM real. El procés de reconciliació compara l’arbre anterior amb el nou i aplica només les diferències.
Les versions recents milloren aquest procés permetent actualitzacions més fluides, però si la teva app provoca massa renders, igualment es notarà.
Bones pràctiques per optimitzar React (sense trencar res)
1) Memoització amb criteri
Desa resultats de funcions pures o components per evitar treball repetit. És útil en:
- props complexes
- càlculs costosos
- renders freqüents
Però compte: si s’utilitza “per defecte”, pot afegir complexitat sense benefici real.
2) Lazy Loading per millorar l’arrencada
Carrega components només quan fan falta per reduir el pes inicial.
Evita aplicar-lo a elements crítics que han d’aparèixer immediatament (si no, empitjora l’experiència).
3) Virtualització de llistes
Si hi ha llistes molt grans, renderitza només el que és visible. Resultat: menys consum i més fluïdesa, especialment en mòbil.
4) Gestió eficient de l’estat
- Evita duplicacions.
- Agrupa estats que canvien alhora.
- No desis valors derivats si els pots calcular al moment quan es necessiten.
Novetats de l’ecosistema React que influeixen en la performance
L’ecosistema evoluciona ràpid: apareixen utilitats per a l’asincronia, millores en formularis i en compilació/build que automatitzen optimitzacions.
La clau és mesurar, iterar i adoptar millores quan aporten impacte real, no per moda.
Conclusió
Optimitzar la performance en React no és un “check” puntual: és un procés continu.
Si et bases en les Core Web Vitals, utilitzes eines com Lighthouse i DevTools, i apliques bones pràctiques (imatges, lazy loading, memoització, virtualització i gestió d’estat), milloraràs l’UX, l’accessibilitat i el SEO de manera sostinguda.
tags:
Comparteix:
