¿Qué es el Tiempo Interactivo y cómo mejorarlo?

La mayoría de las empresas tienen prisa por establecer una presencia en Internet, ampliar su audiencia y, posiblemente, convertir a parte de su público en clientes de pago.
Sin embargo, no basta con establecer una presencia en línea y crear contenidos con los que los usuarios puedan interactuar.
En un mundo cada vez más digital, se necesita un sitio web más interactivo para captar clientes, generar su confianza y, finalmente, convertirlos.
Para mantener al día el rendimiento y la interactividad de tu sitio web, tienes que prestar mucha atención a diversas métricas.
Estas métricas proporcionan información clave a los desarrolladores, administradores web o a cualquiera que se preocupe por la experiencia del usuario y el rendimiento de una página web durante los momentos clave de la carga de la página.
Aparte de las métricas convencionales de tiempo de carga, hay tres métricas centradas en el usuario a las que merece la pena prestar atención, y son la Primera Pintura (FP), la Primera Pintura de Contenido (FCP) y el Tiempo hasta Interactivo (TTI).
El Tiempo hasta la Interactividad es quizás una de las métricas centradas en el usuario más importantes que debes procurar obtener correctamente.
Esta métrica garantiza que no te centres en la visibilidad del contenido a expensas de la interactividad y la usabilidad.
En este artículo hablaremos del Tiempo para Interactuar, de cómo medirlo, calcularlo, mejorar el TTI en sitios WordPress y de cómo 10Web mejora el TTI.

¿Qué es el Tiempo Interactivo?

El Tiempo de Interacción (TTI) es una métrica utilizada para medir el tiempo que tarda una página en ser totalmente interactiva y utilizable después de cargarse.
El TTI pretende evaluar el tiempo que transcurre desde que el navegador renderiza el primer fragmento de contenido del DOM (FCP) hasta que los usuarios pueden llevar a cabo su primera interacción con la página, como hacer clic en un botón.
Se sabe que el TTI es mucho mejor y más preciso que las típicas métricas de rendimiento, como Onload y carga de página.

¿Qué mide el Tiempo para Interactuar?

Según Google Lighthouse, se dice que un sitio web es totalmente interactivo cuando:

• Muestra contenidos útiles al usuario.
  Esto se mide por la Primera Pintura de Contenido (FCP)
• Se registran todos los controladores de eventos de los elementos mostrados.
• Y que los manejadores de eventos puedan responder fácilmente a las peticiones de los usuarios en menos de 50 milisegundos.

De las afirmaciones anteriores se desprende que un estado «interactivo» sólo puede conseguirse después de FCP.
Una vez que la página web empieza a mostrar los primeros contenidos útiles, los controladores de eventos deben ser capaces de responder a eventos como el desplazamiento y los clics, y hacerlo sin demora.
La respuesta oportuna a las acciones del usuario mejora su experiencia y reduce la frustración.
El TTI es una métrica importante en este proceso, ya que te permite medir cuánto tarda la página web en ser consistentemente interactiva.

Tiempo de carga vs. Tiempo de interactividad

El tiempo de carga es el tiempo que tarda una página web en aparecer en tu pantalla una vez que has enviado la URL de esa página.
En términos más sencillos, significa el tiempo que tardan en descargarse todos los elementos de la página, incluidos HTML, CSS, javascript, imágenes y recursos de terceros.
El tiempo de carga es igualmente una métrica importante y puede afectar significativamente al rendimiento de tu página web.
Un tiempo de carga mayor significa que los usuarios tienen que esperar un poco más antes de ver tu página, lo que provoca frustración.
Los usuarios frustrados repercutirán en tus ventas y tasas de conversión.
Sin embargo, existe una clara distinción entre el tiempo de carga y el TTI, que puede no resultar obvia a primera vista.
Aunque el tiempo de carga es importante y debe optimizarse, centrarse en el tiempo de carga a expensas de la interactividad es una mala idea.
Es probable que los usuarios piensen que el sitio web está roto si no es responsivo, aunque el contenido se muestre en un tiempo récord.
Supervisar y optimizar el tiempo de carga y el TTI garantizará a los usuarios una experiencia fluida.
Por otra parte, no hay que esperar a que se cargue todo el contenido de la página para que ésta sea interactiva y utilizable.

¿Cómo se calcula el Tiempo para interactuar?

El Tiempo hasta la Interactividad es una métrica que mide el tiempo que transcurre desde que la página web renderiza su primer fragmento de contenido hasta que puede responder de forma fiable a las acciones del usuario.
Según Google Lighthouse, el TTI puede calcularse a partir de la traza de rendimiento de una página web siguiendo los pasos que se indican a continuación:

1. Empieza por la Primera Página de Contenido (PCC).
2. Busca hacia adelante en el tiempo una ventana tranquila de al menos cinco segundos.
   Una ventana tranquila se produce cuando no hay tareas largas en ejecución en el navegador y no hay más de dos solicitudes GET de redes en vuelo.
3. Busca hacia atrás la última tarea larga antes de la ventana de silencio, deteniéndose en FCP si no se encuentra ninguna tarea larga.
4. TTI es la hora de finalización de la última tarea larga antes de la ventana de silencio (o el mismo valor que FCP si no se encuentran tareas largas).

Aquí tienes una visualización de los pasos descritos anteriormente.

¿Qué es una buena puntuación TTI?

Un rendimiento del TTI igual o inferior a 3,8 segundos se considera rápido.
Sin embargo, para que el rendimiento de tu página web esté en el percentil 99, se requiere un rendimiento TTI de unos 2,2 segundos.
Las páginas con una puntuación TTI de entre 3,8 y 7,3 segundos son moderadas, pero deberías plantearte una mejora.
El TTI se mide mejor utilizando herramientas de laboratorio.
Algunas de las herramientas más conocidas para esta tarea son.

• El Faro de Google
• WebPageTest

Aparte de medir el tiempo hasta la interactividad de tu página web, estas herramientas también te dan varios diagnósticos y sugerencias sobre cómo puedes mejorar la puntuación de rendimiento.

Cómo afecta la ITT a la puntuación de rendimiento

Lighthouse combina seis métricas para generar la puntuación global de rendimiento de tu página web.
La puntuación de la métrica TTI representa el 10% de la puntuación PageSpeed global de tu página web.
Por lo tanto, mejorar la puntuación TTI podría tener un impacto significativo en la experiencia del usuario y en cómo los usuarios valoran tu página web.

Cómo mejorar la puntuación TTI en sitios WordPress.

Reducir la puntuación del Tiempo para interactuar puede suponer un impulso significativo en el rendimiento de tu página web.
En esta sección se analizan algunas prácticas que pueden ayudar a mejorar la puntuación del TTI de tu sitio y, en consecuencia, la puntuación general de rendimiento.

1. Retraso JS

El uso de Javascript en la web ha crecido exponencialmente casi 5 veces en los últimos seis años.
El proceso de analizar y ejecutar Javascript consume la mayor parte de los recursos de la CPU.
Se ha observado que a medida que crece el uso de Javascript en las páginas web, también aumenta el tiempo de CPU del navegador.
Por estas razones, optimizar Javascript mejorará casi con toda seguridad la puntuación TTI de tu sitio.
Las técnicas para retrasar el JS, incluido el aplazamiento de JS, pueden mejorar el rendimiento de tu página web y la puntuación TTI.
Aplazar el análisis sintáctico de Javascript implica ordenar al navegador que ignore el análisis sintáctico y la ejecución de Javascript no esencial hasta que se haya visualizado parte de la página.
Ejemplos de JS no crítico que debería retrasarse son los servicios de chat, las API de redes sociales, los scripts de pruebas A/B y el consentimiento de cookies.
En la práctica, la mayoría de los JS pueden cargarse después de que el visitante empiece a interactuar con la página (por ejemplo, al pasar el ratón por la página).
Algunas excepciones notables son los sliders o scripts que cargan contenido y lo muestran en la parte superior de la página web de forma dinámica mediante peticiones asíncronas.
Las herramientas de laboratorio como Lighthouse de Google identifican estos problemas, y en la sección Oportunidades, verás sugerencias como «eliminar los recursos que bloquean la renderización» y «reducir el javascript no utilizado».
Se pueden utilizar varios métodos para aplazar el JS no esencial en los sitios de WordPress.
Entre ellos están:

1. Plugins

Hay varios plugins gratuitos y premium que puedes aprovechar para aplazar el código JS no esencial.
Uno de los plugins más populares es el plugin Async Javascript de Frank Goosens.
Este plugin te da el control sobre el Javascript que bloquea la renderización y la libertad de determinar a qué scripts añadir un atributo async o defer.
Para instalar el plugin:

• Sube el archivo zip y descomprímelo en el directorio /wp-content/plugins/.
• Activa el plugin a través del menú «Plugins» de WordPress
• Ve al menú Configuración > Async JavaScript para configurar el plugin.

En la parte superior de la página, puedes activar el enchufe y el proceso para permitir la funcionalidad de aplazamiento en la parte inferior de esa página, entre otras funcionalidades.

2. Editar el archivo Functions.php

Los que tengan conocimientos de tecnologías web pueden editar el archivo functions.php y añadir el atributo defer que se muestra a continuación. El atributo defer indica a WordPress que añada el atributo defer a todos tus archivos JS excepto a JQuery.

3. Editar directamente el código del sitio WordPress

Si tienes experiencia en codificación, también puedes editar directamente el código de tu sitio WordPress, como recomienda Patrick Sexton de Varry.
Aquí tienes el fragmento, pero recuerda cambiar el nombre «aplazar.js» por el nombre real del archivo Javascript cuyo código quieres aplazar.

2. Minificación y compresión.

La minificación es el acto de eliminar los signos de puntuación, comentarios y espacios en blanco innecesarios y conservar sólo el código que es válido y no necesariamente legible a efectos de despliegue.
La minificación del código puede reducir drásticamente el tamaño de tus archivos HTML, CSS y JS y mejorar así la velocidad y accesibilidad de tu sitio.
Las puntuaciones de Tiempo de Interacción (TTI) y Retraso en la Primera Entrada (FID) están estrechamente ligadas al tiempo de ejecución de los archivos Javascript.
Por tanto, minificar Javascript puede mejorar la interactividad de tu sitio y, por tanto, la puntuación TTI.
Con la herramienta Lighthouse, puedes identificar que necesitas minificar los archivos HTML, CSS y JS cuando se planteen cuestiones como «Reducir el tiempo de ejecución de Javascript», «Minimizar el trabajo del hilo principal»,» Minificar JS» y «Minificar CSS». Hay bastantes opciones a la hora de minificar tus archivos CSS o JS.
Para empezar, puedes optar por editar manualmente tus archivos utilizando editores de código.
Alternativamente, puedes aprovechar las plataformas de minificación en línea en las que introduces archivos CSS, HTML o JS y obtienes versiones minificadas de tus archivos.
Los plugins son una forma estupenda de minificar los archivos HTML, CSS y JS de tus sitios WordPress.
Por ejemplo, el plugin 10Web Booster puede ayudar a minificar tus archivos HTML, CSS y JS y, en última instancia, aumentar tu puntuación de Google PageSpeed.
10Web Booster elimina todos los datos innecesarios de los archivos HTML, CSS y JS y deja sólo la información obligatoria que utiliza el navegador para mostrar la página.
Los archivos grandes requieren un mayor tiempo de carga.
La compresión de archivos puede reducir significativamente el tiempo de carga y mejorar la puntuación PageSpeed de tu sitio web.
Por lo tanto, también deberías considerar la compresión de tus archivos JS, HTML y CSS, además de la minificación. Brotli es un formato de compresión de código abierto que ha ganado popularidad recientemente debido a su capacidad para comprimir archivos mucho mejor que otras alternativas más establecidas, como GZIP.
10Web ha habilitado la compresión Brotli por defecto para garantizar la mejor compresión posible y mejorar la optimización del frontend.
Si no utilizas el alojamiento de 10Web, asegúrate de que tu alojamiento soporta la compresión Brotli.
Utilizando la compresión GZIP, puedes reducir significativamente el tamaño de tus archivos CSS, HTML y JS, reduciendo el tiempo de carga de estos recursos.
GZIP es un algoritmo de compresión sin pérdidas basado en el algoritmo deflate.
Con 10Web Booster, puedes aplicar la compresión GZIP a los sitios que funcionan con Apache.
Debes confirmar si tu host tiene activada la compresión GZIP por defecto.

3. Optimizar la entrega de CSS y Reducir el CSS no utilizado.

La introducción de CSS ha contribuido enormemente a la apariencia de las páginas web.
Sin embargo, si no se optimiza bien, el CSS puede aumentar el tiempo de carga de tu página web y hacerla lenta.
Optimizar la entrega de CSS incluye compresión, minificación y generación de CSS crítico.
Generar CSS crítico implica seleccionar el CSS mínimo necesario para mostrar las partes iniciales de la página.
Generar CSS crítico e inluirlo con los archivos HTML permite que tu página se cargue más rápido, mejorando así la puntuación TTI.
Los archivos CSS no utilizados son precisamente eso, no utilizados; no modifican ningún elemento de tu página web.
La presencia de estos archivos CSS o parte de ellos no tiene ninguna consecuencia y pueden eliminarse con seguridad sin ningún efecto en tu página web.
A pesar de no tener ningún efecto sobre el aspecto de tu página, los archivos CSS no utilizados afectan al tiempo de carga de tu página web y a su rendimiento.
Puedes utilizar diferentes herramientas para detectar archivos CSS no utilizados, entre otras cuestiones.
La pestaña de cobertura de las herramientas de Chrome y PageSpeed insights son algunos de los métodos más utilizados para detectar CSS no utilizados.
Lighthouse de Google también puede detectar e informar del CSS no utilizado en la sección de oportunidades mediante una bandera roja o naranja. Hay diferentes formas que puedes elegir para gestionar los archivos CSS no utilizados.
Si tienes algunos conocimientos de CSS y HTML, puedes identificar y eliminar manualmente todos los archivos CSS que consideres inservibles.
Para acelerar este proceso, puedes optar por utilizar una herramienta como PurifyCSS para identificar el código CSS no utilizado y eliminarlo.
También hay una lista de plugins de WordPress que puedes utilizar para optimizar la entrega de CSS y eliminar el CSS no utilizado.

4. Prefijar peticiones DNS.

Es habitual que los sitios web muy robustos dependan de recursos alojados a menudo en otros dominios.
Los recursos de terceros incluyen bibliotecas de frameworks, fuentes personalizadas, contenido publicitario, análisis de marketing y mucho más.
Estos recursos de terceros suelen estar alojados en servidores externos sobre los que tienes poco o ningún control.
La idea principal de la precarga DNS es ordenar al navegador que realice peticiones a los dominios de terceros donde se alojan estos recursos antes de que se necesiten.
Esta acción garantiza que, para cuando el usuario solicite el recurso, la resolución DNS ya se haya completado.
Aunque la caché DNS puede ocuparse de la latencia, la resolución DNS podría añadir aún más latencia.
Existen distintas soluciones al problema de la latencia de la resolución DNS.
Por ejemplo, puedes añadir manualmente el <enlace> a la cabecera junto con DNS-prefetch como valor para el elemento rel y el enlace al dominio que queremos prefijar.

<enlace rel="dns-prefetch" href="https://fonts.googleapis.com/" />

Esto nos permite enmascarar la latencia de precarga del DNS.

5. Precargar fuentes.

La precarga es una gran herramienta para optimizar el rendimiento de las páginas web, ya que te da más control sobre cómo se cargan los recursos de tu sitio WordPress.
Por defecto, los navegadores cargan los recursos en función de cómo estén ordenados en tu sitio web, lo que a menudo no es la forma óptima.
Sin embargo, utilizando la precarga, puedes controlar cómo se renderizan estos recursos y su efecto en el rendimiento de tu página web.
Por defecto, los navegadores tienen que esperar a que la fuente esté lista antes de cargar el contenido para que lo vean tus usuarios.
Cargar las fuentes en el momento en que se necesitan puede retrasar el tiempo de carga y degradar la experiencia del usuario.
Con la precarga de fuentes, puedes cargar antes las fuentes esenciales para que estén disponibles cuando la página web muestre el contenido.
Si ejecutas una prueba de Lighthouse en un sitio web, es probable que te encuentres con la recomendación de «Precargar las solicitudes clave».
La precarga de fuentes es una de las formas que puedes utilizar para precargar las peticiones clave. Puedes hacerlo manualmente añadiendo las etiquetas rel = «preload» entre los elementos de cabecera de tus páginas HTML.

<enlace rel="preload" href="https://fonts.googleapis.com/" />

También puedes utilizar plugins de WordPress para precargar tus fuentes.
10Web booster tiene una función integrada que te permite optimizar la entrega de fuentes.

6. Reduce el tiempo de respuesta del servidor y el tiempo hasta el primer byte (TTFB).

Un servidor rápido es clave para reducir el tiempo de respuesta de tus páginas web y, a su vez, disminuir la puntuación TTI.
Otras soluciones que puedes utilizar para reducir el tiempo de respuesta del servidor son:

• Optimizar tu base de datos eliminando registros innecesarios, como comentarios de spam, y programando limpiezas automáticas.
  También puedes optimizar las consultas enviadas a la base de datos o migrar a una base de datos más rápida.
• Minificar y comprimir tus archivos CSS y JS utilizando la compresión GZIP.
• Opta por un alojamiento fiable y rápido.
• Utilizar el almacenamiento en caché – El almacenamiento en caché es una herramienta útil para reducir el TTI.
  El almacenamiento en caché permite a tu navegador descargar y almacenar recursos localmente, de modo que cuando el usuario vuelva a tu sitio web, el navegador no tenga que pedir al servidor que cargue de nuevo los recursos.
  Existen diferentes opciones de almacenamiento en caché, como se describe en este artículo.
• Utilizando la última versión de PHP.

El plugin 10Web puede ayudarte a conseguir algunas de las soluciones anteriores, como ya hemos comentado.
Por ejemplo, puedes comprimir tus archivos JS y CSS utilizando 10Web.
También puedes optimizar tu backend y realizar un almacenamiento en caché avanzado para tu sitio de WordPress.

Cómo 10 Web mejora la TTI.

Con 10Web Booster, obtienes una optimización completa del frontend y del backend, así como diagnósticos exhaustivos sobre lo que afecta a la velocidad de tu sitio.
10Web Booster optimiza automáticamente la velocidad del frontend de cualquier sitio WordPress, ayudando a pasar Core Web Vitals y obtener 90+ PageSpeed.
Aquí tienes soluciones de 10Web que pueden ayudarte a mejorar tu TTI y el PageSpeed general de tu sitio WordPress.

1. Minificación y compresión de CSS y HTML

   La minificación y fusión de CSS y HTML es el procedimiento de reducir el tamaño de los archivos en un par de bytes.
   La importancia de esto radica en el hecho de que los archivos más grandes requieren más recursos, lo que puede ralentizar el tiempo de carga del sitio web y aumentar tu puntuación TTI.
   10Web Booster elimina todos los datos innecesarios del HTML y de los archivos, como puntuación, comentarios, espacios en blanco, etc.

2. Minificación y compresión JS

   La compresión de códigos JS algorítmicos largos es una práctica habitual.
   La compresión del código JS, es decir, la eliminación de todos los espacios y comentarios adicionales, reduce el tiempo de descarga de JavaScript, mejorando directamente la velocidad de WordPress.

3. Optimización de la imagen

   Las imágenes pueden afectar a la capacidad de respuesta de carga de la página y, por extensión, a la puntuación del TTI de tu sitio web.
   Una forma de reducir el efecto de las imágenes o los vídeos en el Tiempo para interactuar es mediante la carga perezosa.
   La carga lenta evita la carga inmediata de todas las imágenes.
   La optimización de imágenes también se basa en minimizar el tamaño de los archivos mediante la compresión de imágenes, preservando al mismo tiempo su calidad.
   Las optimizaciones de imagen de 10Web consiguen eso y más.
   10Web utiliza tres técnicas de carga perezosa, como la técnica nativa del navegador y un plugin de JQuery, para garantizar que las imágenes funcionen perfectamente evitando conflictos con temas y otros plugins y eliminando dependencias de otros plugins.

4. Retrasar la ejecución de JS

   Tener contenido inmediatamente visible cuando un usuario abre tu sitio web sólo es posible con la optimización de la carga de archivos mediante el retardo de JavaScript.
   10Web Booster proporciona una solución elegante para los archivos JavaScript de terceros.
   Entendiendo que los archivos JavaScript son recursos que bloquean el renderizado, 10Web elimina todos los archivos JavaScript de la página, utiliza la API Web Workers en segundo plano, descarga los archivos JavaScript y los integra en la página más tarde.

5. Cargar primero sólo el CSS crítico

   Descargar archivos CSS completos dificulta la velocidad percibida de tu sitio web WordPress.
   Cuando el usuario visita las páginas web, se cargan las hojas de estilo mínimas necesarias para renderizar correctamente el contenido visible de la página web, mientras que el resto se sirve según las necesidades.
   El CSS crítico no bloquea la renderización de la página y ayuda a superar las Core Web Vitals.

6. Intercambio de fuentes

   La reducción y optimización del modo en que se cargan las fuentes web podría ayudarte a superar la evaluación Core Web Vitals y, por tanto, beneficiar tu puntuación TTI.
   Dado que la competencia está por las nubes, cada milisegundo cuenta.
   Por ello, tu contenido se mostrará en una fuente genérica, para así, puentear el tiempo hasta que se configure tu estilo de fuente original.

7. Optimización del backend

   También puedes optimizar la velocidad de tu backend en el alojamiento 10Web utilizando 10Web Booster pro.
   10Web utiliza versiones actualizadas de PHP y MySQL para un mayor rendimiento, eficacia y seguridad.
   Utiliza la red ultrarrápida Google Cloud Premium Tier Network optimizada para la base de datos de WordPress alojada en las máquinas virtuales C2 de mayor rendimiento optimizadas para el cálculo y discos SSD para ofrecer sitios web con la mejor velocidad y funcionalidad posibles.
   10Web también proporciona actualizaciones automatizadas del núcleo y los plugins de WordPress y copias de seguridad en tiempo real, y garantiza que el tiempo hasta el primer byte (TTFB) sea superior a 200 ms.

Conclusión

El TTI es una importante métrica centrada en el usuario que representa el 10% de la puntuación PageSpeed global de tu sitio web.
Por tanto, sin duda, se trata de una métrica a la que debe prestar mucha atención cualquiera que busque mejorar la interactividad y la experiencia de usuario de sus usuarios.
Una página con un buen TTI se traduce en una buena experiencia de usuario y puede conseguir que los usuarios pasen más tiempo en tu página, lo que se traduce en mayores tasas de conversión.
Hay muchas causas de una mala puntuación TTI, con el código Javascript no optimizado encabezando la lista.
Sin embargo, con las herramientas de plugin adecuadas, como 10Web, puedes optimizar tus páginas web con un solo clic.