Time to Interactive (TTI)
¿Qué es TTI? #
La métrica TTI mide el tiempo que transcurre desde que se inicia la carga de la página hasta que se cargan sus principales recursos secundarios y es capaz de responder de manera confiable a la entrada del usuario rápidamente.
Para calcular la TTI a partir de un seguimiento de rendimiento de una página web, siga estos pasos:
- Comience en First Contentful Paint: Despliegue de la primera entrada (FCP).
- Busque en el tiempo una ventana tranquila de al menos cinco segundos, donde la ventana tranquila se define como: ninguna tarea larga y no más de dos solicitudes GET en la red de abordaje.
- Busque hacia atrás la última tarea larga antes de la ventana tranquila, que se detiene en FCP si no se encuentran tareas largas.
- TTI es la hora de finalización de la última tarea larga antes de la ventana tranquila (o el mismo valor que FCP si no se encuentran tareas largas).
El siguiente diagrama debería ayudar a visualizar los pasos anteriores:
Históricamente, los desarrolladores han optimizado las páginas para obtener tiempos de renderizado rápidos, a veces a expensas de TTI.
Técnicas como el renderizado del lado del servidor (SSR) pueden llevar a escenarios en los que una página parece interactiva (es decir, los enlaces y botones son visibles en la pantalla), pero en realidad no es interactiva porque el subproceso principal está bloqueado o porque el código JavaScript que controla esos elementos no se ha cargado.
Cuando los usuarios intentan interactuar con una página que parece interactiva pero que en realidad no lo es, es probable que respondan de una de estas dos formas:
- En el mejor de los casos, les molestará que la página tarde en responder.
- En el peor de los casos, asumirán que el enlace de la página está roto y probablemente se irán. Incluso pueden perder la confianza o la confianza en el valor de su marca.
Para evitar este problema, haga todo lo posible para minimizar la diferencia entre FCP y TTI. Y en los casos en que exista una diferencia notable, déjelo claro, mediante indicadores visuales, que los componentes de su página aún no son interactivos.
Cómo medir TTI #
TTI es una métrica que se mide mejor en el laboratorio . La mejor manera de medir TTI es ejecutar una auditoría de desempeño Lighthouse en su sitio. Consulte la documentación de Lighthouse sobre TTI para obtener información sobre su uso.
Herramientas de laboratorio #
¿Qué es una buena puntuación TTI? #
Para ofrecer una buena experiencia de usuario, los sitios deben esforzarse por tener un Time to Interactive inferior a 5 segundos cuando se prueban en el hardware de un dispositivo móvil promedio.
Para obtener más información sobre cómo la TTI de su página afecta a su puntuación de rendimiento de Lighthouse, consulte Cómo determina Lighthouse su puntuación TTI.
Cómo mejorar TTI #
Para aprender a mejorar TTI para un sitio específico, puede ejecutar una auditoría de desempeño Lighthouse y prestar atención a cualquier oportunidad específica que sugiera la auditoría.
Para saber cómo mejorar la TTI en general (para cualquier sitio), consulte las siguientes normas de rendimiento:
- Minificar JavaScript
- Preconectar a los orígenes requeridos
- Precargar solicitudes clave
- Reducir el impacto en el código de terceros
- Minimizar la profundidad de la solicitud crítica
- Reducir el tiempo de ejecución de JavaScript
- Minimizar el trabajo del subproceso principal
- Mantener la cantidad de solicitudes bajas y los tamaños de transferencia reducidos