Qué significa este problema
TBT señala trabajo que mantiene ocupado al navegador cuando debería poder pintar y responder.
Cómo reducir Total Blocking Time y diagnosticar problemas de respuesta
Encuentra JavaScript y trabajo del main thread que puede hacer que la página responda lento durante la carga.
Respuesta breve
Total Blocking Time es una métrica de laboratorio que muestra cuánto trabajo largo bloquea el main thread durante la carga. INP es una métrica Core Web Vitals de respuesta y no es lo mismo que TBT. Aun así, un TBT alto ayuda a detectar JavaScript y trabajo del main thread que puede afectar la respuesta.
Por qué importa
El bloqueo del main thread hace que la página parezca congelada
Aunque el contenido sea visible, la interacción puede sentirse lenta si los scripts monopolizan el navegador.
Cómo ayuda ViewMend
Ejecuta una comprobación de una página pública, revisa la evidencia, entiende si el problema es prioritario y usa ViewMend AI solo cuando necesites una explicación, una tarea para desarrolladores o un AI Fix Plan.
Cómo verificar la corrección
Después de cambios en JavaScript, compara TBT, long tasks y hallazgos de third-party code.
Causas frecuentes
TBT suele ser JavaScript y trabajo del main thread
- Bundles JavaScript grandes.
- Tareas largas durante hidratación.
- Scripts de terceros costosos.
- Event handlers pesados.
- Renderizado en cliente antes de la interacción.
Qué revisar primero
Encuentra primero tareas largas y scripts innecesarios
- Revisa hallazgos de unused JavaScript.
- Identifica scripts de terceros costosos.
- Comprueba hidratación y tamaño de bundles.
- Busca long tasks del main thread.
- Compara especialmente resultados móviles.
Cómo corregirlo
Deja espacio al navegador para responder
- Divide bundles JavaScript.
- Aplaza scripts no críticos.
- Lazy load de funciones below the fold.
- Reduce coste de hidratación.
- Elimina o retrasa tags de terceros de bajo valor.
Cómo verificar la corrección
Vuelve a comprobar TBT y evidencia de interacción
Después de cambios en JavaScript, compara TBT, long tasks y hallazgos de third-party code.
Cómo funciona
Diagnostica el problema con un informe nuevo
- Introduce la URL pública que quieres comprobar.
- Ejecuta una comprobación de rendimiento en móvil y escritorio.
- Revisa la métrica, las capturas y la evidencia técnica relacionada con el problema.
- Comprueba si otros problemas relacionados empeoran el impacto.
- Crea una explicación de AI o una tarea para desarrolladores solo si la necesitas.
- Vuelve a comprobar la página después del cambio y compara el informe nuevo con el anterior.
Flujo de trabajo
Comprueba la página antes de adivinar
ViewMend te ayuda a inspeccionar una página pública real, comparar evidencia en móvil y escritorio, y decidir si merece la pena usar créditos en una salida de AI.
Ejemplo de tarea para desarrolladores
Ejemplo de tarea para TBT
Dividir bundles JavaScript y reducir long tasks para que el navegador responda antes durante la carga.
| Problema | TBT señala trabajo que mantiene ocupado al navegador cuando debería poder pintar y responder. |
|---|---|
| Corrección sugerida | Dividir bundles JavaScript y reducir long tasks para que el navegador responda antes durante la carga. |
| Criterios de aceptación | La siguiente comprobación de laboratorio muestra una mejora en la métrica afectada, no se rompe ningún comportamiento crítico en móvil o desktop, y la página sigue renderizándose correctamente. |
| Paso de retest | Después de cambios en JavaScript, compara TBT, long tasks y hallazgos de third-party code. |
Prioridades de corrección
Revisiones de capacidad de respuesta
| Qué revisar | Por qué importa | Siguiente acción |
|---|---|---|
| Long tasks | Bloquean el main thread y retrasan la respuesta. | Dividir trabajo y aplazar lógica no crítica. |
| Unused JavaScript | Sigue costando descarga, parse y compilación. | Eliminar, dividir o lazy load bundles. |
| Scripts de terceros | Compiten por el main thread. | Retrasar, eliminar o cargar tras consentimiento/interacción. |
FAQ
Preguntas frecuentes
¿TBT es lo mismo que INP?
No. TBT es una métrica de laboratorio sobre bloqueo durante carga; INP mide respuesta a interacciones.
¿Qué causa TBT alto?
JavaScript pesado, hidratación, long tasks y código de terceros costoso.
¿Cómo afecta JavaScript a la respuesta?
JavaScript usa el main thread y puede impedir respuestas rápidas.
¿Debo quitar scripts de terceros?
No a ciegas. Evalúa valor y coste, luego retrasa o elimina los de poco valor.
¿ViewMend puede crear una tarea para TBT?
Sí, ViewMend AI puede crear una tarea para desarrolladores cuando la solicitas explícitamente.