Time to Interactive (TTI) a la web de la teva empresa: què mesura, llindars i com escurçar l'espera abans que la pàgina es pugui usar

Fas clic a «Contactar» al web d'un proveïdor i no passa res durant dos segons. El disseny ja es veu, però la pàgina encara no «escolta». Aquest buit entre es veu i es pot usar és el que resume el Time to Interactive (TTI). El 2026 continua apareixent en auditories Lighthouse i en informes que màrqueting i direcció revisen abans d'invertir en campanyes.

Aquest article explica què mesura el TTI, quins llindars usar com referència, com es relaciona amb el TBT, el Speed Index i l'INP, i quins canvis solen escurçar l'espera en webs d'empresa sense retallar funcionalitats clau.

Què és el Time to Interactive i què mesura exactament

El TTI és una mètrica de laboratori que marca el moment en què la pàgina ha mostrat contingut rellevant i el fil principal del navegador està prou lliure per respondre de manera fiable a la interacció de l'usuari (clics, taps, teclat).

• No mesura un sol botó: resume quan la pàgina en conjunt deixa d'estar bloquejada per JavaScript llarg.
• Sol arribar després del FCP i sovint després del LCP: primer es pinta, després es «desperta».
• En llocs molt pesats en JS (configuradors, comparadors, xat incrustat), el TTI pot ser el coll d'ampolla encara que el LCP sigui verd.
• Google ha anat relegant el TTI del panell principal de Lighthouse a favor de mètriques de camp com l'INP, però el TTI continua sent útil per diagnosticar bloquejos en laboratori.

La guia de web.dev sobre Time to Interactive descriu l'algorisme i la relació amb el fil principal.

Llindars orientatius el 2026

Com referència històrica de Lighthouse (mòbil simulat):

• Bon: 3,8 s o menys.
• A millorar: entre 3,9 s i 7,3 s.
• Dolent: per sobre de 7,3 s.

Tracta'ls com comparativa interna abans i després d'un desplegament. L'INP en dades reals d'usuaris (més al nostre article sobre INP) complementa aquesta foto de laboratori.

TTI davant TBT, Speed Index i INP

• TBT: suma quant temps el fil principal ha estat bloquejat; un TBT alt sol empènyer el TTI cap amunt.
• Speed Index: mesura el progrés visual; pots tenir bon índex visual i mal TTI si el JS tarda a hidratar formularis o menús.
• INP: mesura la latència d'interaccions reals en camp; un TTI dolent en laboratori sovint anticipa INP deficient en dispositius modestos.

Causes habituals en webs d'empresa

• JavaScript sense dividir que descarrega i executa tot el bundle abans d'habilitar menús o CTAs.
• Tercers síncrons (tag managers, mapes, ressenyes) que monopolitzen el fil principal a l'inici.
• Hidratació pesada en frameworks que re-renderitzen tota la pàgina al client.
• Fonts i CSS bloquejants que endarrereixen el moment en què els controls reben esdeveniments.
• Treball al fil principal després del LCP: sliders, calculadores o filtres de catàleg sense càrrega diferida.

Com mesurar el TTI amb eines accessibles

1. Lighthouse a Chrome DevTools (mode mòbil): revisa «Time to Interactive».
2. PageSpeed Insights per una URL pública; guarda l'informe PDF per comparar versions.
3. WebPageTest si necessites filmstrip i desglossament per tercers.
4. Repeteix la mesura amb la memòria cau neta i en horari de baixa càrrega del servidor.

Accions que solen millorar el TTI

• Divide el JavaScript per ruta i carrega sota demanda menús, modals i widgets no crítics.
• Retarda tercers fins després de l'esdeveniment load o de la primera interacció, com a scripts de tercers.
• Redueix treball al fil principal: evita parsear JSON enormes a l'arrencada; pagina dades de catàleg.
• Optimitza el camí crític amb preload i preconnect només per recursos que desbloquegen la interactuabilitat.
• Minifica i comprime actius segons les guies de minificació i compressió Brotli.

Errors que mantenen el TTI alt

• Mesurar només en escriptori amb xarxa ràpida i assumir que el mòbil corporatiu del visitant anirà igual.
• Afegir un plugin més «perquè pesa poc» sense mesurar l'impacte acumulat al fil principal.
• Amagar botons amb CSS però deixar listeners sense registrar fins que acaba un script d'analytics.
• Confondre TTI amb LCP: un hero optimitzat no arregla un formulari que tarda a validar.

Checklist ràpid abans del proper desplegament

• El menú mòbil i el CTA principal responen en els primers segons en Lighthouse mòbil?
• El TBT ha baixat o almenys no ha pujat respecte a la versió anterior?
• Els scripts de xat i mapes carreguen després del contingut crític?
• Hi ha una prova manual en un mòbil de gamma mitjana amb 4G?

Si el TTI segueix en vermell després d'optimitzar imatges i memòria cau, sol quedar treball en JavaScript i tercers: aquí encaixa una revisió tècnica abans d'escalar pressupost en anuncis que envien tràfic a una pàgina que encara no respon al primer clic.

Vols un diagnòstic de rendiment del teu web actual? A aatsoft auditem mètriques de laboratori i camp i prioritzem canvis amb impacte en conversió.