Rendimiento web: por qué es tan importante y cómo optimizarlo

Si ya tienes una tienda en línea, o estás pensando en lanzar un proyecto de comercio electrónico, probablemente ya has oído hablar de la importancia del rendimiento. En general, se trata de la velocidad de carga de una página web. Existen indicadores para medir el rendimiento, y cada año, más o menos, aparecen nuevos términos técnicos para tratar de cuantificar el rendimiento de un sitio web: el tiempo de carga, y más recientemente Time to First Byte (TTFB) o First Contentful Paint (FCP), entre otros.

Estos términos técnicos pueden parecer un poco complicados, pero ten por seguro que buscan significan cosas buenas para ti y tus clientes.

¿Por qué es tan importante el rendimiento para una tienda online? 

A nadie le sorprende una página que carga rápidamente, pero una página lenta al cargar llama la atención. Es probable que queramos salir de la página antes que el contenido aparezca en nuestra pantalla. De hecho, la mayoría de los visitantes de un sitio abandonan la página si no carga completamente en menos de 3 segundos.

El comercio electrónico es un sector muy competitivo en el cual la inmediatez es primordial. Por lo tanto, garantizar un buen rendimiento web es esencial para convertir a tus visitantes en clientes, tanto en el móvil como en el desktop. Se estima que una ganancia de 0,1 segundos en el tiempo de carga de tu sitio de eCommerce puede aumentar tu tasa de conversión de 8%.

Tres argumentos para un mejor rendimiento de tu tienda online:

• Mejorará significativamente la experiencia de tus clientes y, naturalmente, aumentará tu tasa de conversión,
• Ganarás capacidad para alojar un número máximo de usuarios simultáneamente y evitarás perder valiosos clientes en los periodos de mayor afluencia,
• Ganarás visibilidad gracias a la óptima velocidad de carga de tu sitio que te permitirá mejorar tu posición en los resultados de los motores de búsqueda (SEO).

Así que, cuando pienses en el rendimiento de tu tienda en línea, debes pensar en:

1. La experiencia del usuario,
2. La conversión,
3. La visibilidad.

En cuanto a tu tienda, se tratará principalmente de aumentar su velocidad de carga, respetando por supuesto los requisitos técnicos de un sitio de comercio electrónico en 2021. 

¿Qué indicadores y cómo optimizarlos?

Tomamos en cuenta 5 indicadores clave. Entre ellos, el Time to First Byte y Speed Index son particularmente importantes porque influyen directamente tanto en el rendimiento de tu sitio como en la experiencia del usuario, y permiten comprender el rendimiento de un sitio en su conjunto.

1.Time to First Byte (TTFB) 

Este indicador corresponde al tiempo de respuesta del servidor, es el milisegundo más importante en la carga de una página. Algunos de los principales elementos que componen el tiempo de respuesta son la configuración del servidor (lenguajes utilizados, bibliotecas, etc. que optimizan el tiempo de carga y hacen que el sitio web sea robusto) y el tiempo de ejecución de las requests a la base de datos.

Es bueno saberlo: Google lo considera bueno si es menor o igual a 200 milisegundos y aceptable hasta 500 ms. Suele ser el único indicador que varía con el tiempo y suele estar por el tráfico.

Consejo: Utiliza un CDN (Content Delivery Network), que será especialmente útil para tus clientes extranjeros, y considera la posibilidad de permitir el almacenamiento en cache de los recursos estáticos.

2. First Contentful Paint

Se trata del primer punto clave en la experiencia del usuario, que puede enfrentar un tiempo de espera entre el momento en que hace clic en un enlace y el momento en que la página muestra un elemento. Esta medida corresponde principalmente al tiempo que tarda el navegador en cargar la respuesta del servidor y la visualización del primer elemento de contenido por parte del navegador. El primer elemento no es estrictamente estético, puede ser una imagen así como un bloque de color. 

Es bueno saberlo: El FCP califica como bueno si se hace en menos de 2,5 segundos (TTFB incluido), por lo que podemos estimar que el tiempo de carga de los archivos que bloquean la visualización debe hacerse en menos de 2 segundos.

Consejo: Comprime tus archivos HTML/CSS/JS y limita los archivos que bloquean la visualización.

3. Largest Contentful Paint (LCP)

El LCP es el segundo punto clave para el usuario, esta medida integra la mayoría de los elementos visibles de una página. Es el momento en el cual la página web toma forma y consigue su aspecto finalm o casi final. Este paso puede ser el más largo y pesado en función del contenido.

 Aquí una ilustración para entender mejor: 

Es bueno saberlo: Se considera bueno si se consigue en menos de 2,5 segundos (como el FCP) y aceptable hasta 4 segundos. Muchos estudios muestran que más allá de los 3 segundos, la tasa de rebote aumenta significativamente

Consejo: Optimiza las imágenes, genera varios formatos útiles (jpeg 2000, jpeg XR webp, etc.), proporciona diferentes tamaños de tus imágenes en el código HTML y configura el cache (navegador y servidor).

4. El First Input Delay 

Este indicador está relacionado con la interactividad de una página. Se trata del tiempo de respuesta del navegador cuando se realiza una acción sobre el primer elemento interactivo disponible. Por ejemplo, el momento en que se hace clic en un enlace o en un botón.

Es bueno saberlo: Este indicador mide el tiempo de “frustración” de  un usuario, es decir, el tiempo que un usuario esperará a que el navegador responda si hace clic en el primer elemento interactivo que le aparezca.

5. Time to Interactive

Este indicador a menudo se interpreta mal. Mide el tiempo que transcurre desde el inicio de la navegación hasta que carga el contenido de la página y el hilo principal del navegador está inactivo durante al menos 5 segundos, es decir, no ha habido una ejecución de script superior a 50 ms.

Es bueno saberlo: Tu sitio puede tener un buen rendimiento general, un buen FID y, a pesar de ello, un Time to Interactive bajo.

 

Consejo: Se aconseja aplazar los JavaScripts no esenciales para la carga y eliminar los scripts no necesarios para la página mostrada para no saturar el hilo principal. Para ello es necesario segmentar bien el código.

Línea de tiempo representativa del retraso entre indicadores, y de un buen sitio según los criterios de Google:

Indicador extra:  Speed Index o SI

Este indicador no es parte de la lista porque es muy dependiente del FCP y del LCP, a su vez dependientes del TTFB. Es el resultado de un cálculo basado en la velocidad y la progresividad de la parte visible de la página (por encima de la línea de flotación).

Mide lo que el usuario siente (potencialmente) durante la carga, al igual que el FID es uno de los indicadores más recientes de UX que Google utiliza para el SEO.

Conclusión 

Cada indicador se ve afectado por el anterior, por lo cual todos son  importantes. Como se mencionó al principio, el TTFB es particularmente importante y muy fluctuante ya que depende de la calidad de tu hosting y del tráfico. Por eso, un TTFB bajo puede afectar drásticamente al rendimiento de tu sitio. Este indicador no suele aparecer en la mayoría de las herramientas de medición de rendimiento (Page Speed Insights, GtMetrix) porque es una etapa compleja y técnica, de ahí viene la dificultad de acceder e interpretar la información para los no expertos. Si se vuelve demasiado técnico, puedes recurrir a servicios especializados, como PrestaShop Platform si tienes un sitio PrestaShop.

PrestaShop Platform, un servicio para impulsar el crecimiento de  tu tienda:

• Una solución de alojamiento dedicado especializada en Prestashop con 3 entornos
• Una interfaz con KPI técnicos claros
• Una interfaz para gestionar tus entornos (desarrollo/preproducción y producción)
• Migraciones simplificadas del entorno
• Apoyo al cliente para brindar serenidad