¿Alguna vez te has enfrentado al desafío de descubrir las razones detrás de la lentitud en la carga de una página web? Cada página puede presentar numerosos problemas que afectan su velocidad. Tal vez hayas experimentado esto personalmente durante una exhaustiva auditoría de Lighthouse. Nadie desea optimizar múltiples aspectos sólo para descubrir que ninguno ha tenido impacto.

¿Cuáles son las métricas que definen la velocidad de carga? La velocidad se mide mediante tres métricas clave:

• TTFB (Tiempo hasta el primer byte): Es el tiempo desde que el usuario solicita la página hasta que el navegador recibe el primer byte de datos del servidor.
• FCP (Primer contenido pintado): Comienza con TTFB y termina cuando el contenido inicial se muestra en la pantalla.
• LCP (Mayor elemento de contenido pintado): También inicia con TTFB y concluye cuando el bloque de texto o la imagen más grande es totalmente visible para el usuario.

Ahora que has identificado las brechas en tu sitio, ¿Cuál es el siguiente paso? En este artículo, exploraremos las causas comunes de bajo rendimiento en Shopify para cada una de estas métricas. Si bien estas no son las únicas posibles, son las más frecuentes 👇👇

Un buen TTFB se produce en 0,8 s, un buen FCP se produce en 1,8 s y un buen LCP se produce en 2,5 s.

Liquid muy complejo:

El lenguaje de plantillas Liquid en Shopify está diseñado para un rendimiento eficiente, pero problemas como bucles anidados pueden ralentizar el procesamiento. Si tienes un mega menú complejo, considera renderizar lo visible de inmediato con Liquid y usar JavaScript para cargar datos adicionales, manteniendo así la percepción de velocidad del usuario.

Problemas temporales con el servidor de Shopify:

Aunque Shopify optimiza continuamente sus servidores, eventos raros pueden afectar el TTFB. Si notas una disminución reciente en el rendimiento junto con otros sitios de Shopify, podrían estar experimentando problemas temporales.

HTML muy extenso:

Grandes "mega menús" y múltiples versiones del DOM pueden afectar la velocidad de carga. Simplifica el HTML, diseñando menús para dispositivos móviles y de escritorio con el mismo marcado, utilizando CSS moderno. Renderiza lo visible primero y utiliza JavaScript para cargar datos adicionales en segundo plano.

Banners de cookies prominentes:

Los banners de cookies, cargados a través de JavaScript, a veces se convierten en el elemento LCP. Asegúrate de que sean más pequeños que el contenido principal para evitar retrasos en el evento LCP.

Ventanas emergentes antes de la interacción del usuario:

Modales o popups de correo electrónico y promociones que aparecen antes de que el usuario interactúe pueden convertirse en el elemento LCP. Configura estas ventanas para cargar después de la interacción del usuario, mejorando así la experiencia.

🔥En conclusión, al conocer las causas comunes de las brechas de rendimiento, puedes optimizar estratégicamente la velocidad de carga de tu página. Este artículo te ha presentado los problemas más frecuentes, no siendo una lista exhaustiva, pero abordando los casos más comunes que encontramos.

Lograr un rendimiento web óptimo no es sencillo, pero con comprensión, herramientas adecuadas y un proceso eficiente, puedes alcanzar una velocidad de carga más rápida. ¡Adelante, optimiza tu sitio y mejora la experiencia de tus usuarios!