Cómo mantener un ecommerce rápido

Ya sea que estés añadiendo nuevas características a tu web a través de un plugin, un tema o llevando a cabo un desarrollo a medida, es importante revisar los cambios que realices y el impacto que tienen en el rendimiento de tu web.

Para cualquier web, pero especialmente para las de comercio electrónico, el rendimiento es extremadamente importante. La velocidad de tu web tiene un impacto en cómo se clasifica en los motores de búsqueda y en la experiencia que tienen tus clientes cuando compran en tu tienda. Las webs lentas provocan menos visitas a la página, una reducción en la satisfacción del cliente y, finalmente, menos conversiones.

Configurar una web que esté optimizada para tener una buena velocidad no es cosa de un día. A medida que tu web va creciendo, cualquier cambio que realices puede afectar el trabajo hecho anteriormente. Si has realizado un cambio que parece estar afectando el rendimiento, debes abordarlo de inmediato para que la web vuelva a funcionar como antes.

Poniendo los cimientos

Antes de entrar en todas las consideraciones al realizar ajustes en tu web, es muy importante empezar con una base sólida. Para los fines de este artículo, asumiremos que estás usando WordPress, pero gran parte del proceso es aplicable trabajando con otras plataformas.

Asegúrate desde el principio de alojar la web en un proveedor de alto rendimiento como SiteGround. Debes activar algún tipo de caché (con SiteGround puedes activar SuperCacher) para que todo se mantenga con una buena velocidad. Para la caché, aunque existen algunas sorprendentes técnicas que harán que todo vaya más rápido para la gran mayoría de las personas que accedan a tu web, debes tener en mente que los visitantes aún reciben contenido que no se encuentra almacenado en la caché. La caché no es la solución para todos los problemas de rendimiento, especialmente porque no todo el contenido se puede almacenar en la caché.

Es importante empezar con una base optimizada para las áreas clave de tu web, como la página de inicio, la de producto, el carrito y las páginas de pago. También deberías tener un entorno de staging para llevar a cabo futuras pruebas de forma segura.

Creando un nuevo punto de referencia

En primer lugar querrás conseguir un punto de referencia del rendimiento actual para saber con qué estás trabajando.

Para hacer esto, recomiendo usar una selección de distintas herramientas, algunas de las cuales cumplen la misma función, pero aseguran que los resultados sean más representativos de tus visitantes. Todas estas herramientas son gratuitas.

• GTMetrix proporciona un análisis a fondo de las puntuaciones de velocidad de tu página, tiempos de carga completa, tamaño de la página e incluso las solicitudes totales generadas en la página además de soluciones.
• Pingdom, este sirve para el mismo propósito que GTMetrix, pero el uso de múltiples versiones de una herramienta similar aumenta la precisión de los resultados.
• Google PageSpeed Insights proporciona información sobre cómo se carga tu página junto con auditorías adicionales y cómo resolver los problemas que haya.
• Query Monitor, un plugin de WordPress que da información sobre lo que tu web está haciendo en segundo plano, cuánta memoria está usando, cuántas consultas a la base de datos está haciendo, cuántas solicitudes externas realiza y mucho más.
• Chrome Developer tools, son herramientas integradas en el navegador Chrome que permiten revisar, monitorizar y depurar ciertas áreas de alto rendimiento e incluso probar cosas como la velocidad de la página por ti mismo. Si nunca has usado estas herramientas, haz clic derecho en una web en Chrome y selecciona Inspeccionar.

Comienza usando las tres primeras herramientas anteriores para recorrer tu página de inicio y una página de producto. Estos primeros pasos son más fáciles de hacer directamente en el navegador, sin necesidad de conocimientos técnicos.

Una vez esté hecho y haya anotados el tiempo de carga que corresponda, el tamaño de página, etc., es hora de pasar a probar el carrito de compra, finalizarla y añadirla al carrito en tu navegador. Para hacerlo, dirígete a una de las páginas de tus productos y abre las herramientas del desarrollador (puedes hacerlo como se indica arriba, pulsando F12 o la opción + comando + I)

Limpia el registro de cualquier entrada usando el icono de stop en el lado izquierdo, activa preservar el registro y desactiva la caché. Una vez lo hayas hecho, añade un artículo al carrito y toma nota de la información a lo largo de la barra inferior, repite los mismos pasos para el carrito y la finalización de la compra, asegurándote de tener al menos un artículo en el carrito cuando lo hagas.

Incluso puedes usar el menú resaltado en la imagen de arriba para limitar la velocidad de tus pruebas. Esto es útil cuando se trata de usuarios de dispositivos móviles que, probablemente, tengan conexiones más lentas, como 3G (recuerda siempre de volver a activarlo en modo online si lo cambias).

Construyendo el futuro

Ahora que tienes un punto de referencia con el que trabajar, puedes usarlo en el futuro cada vez que realices cambios significativos en tu web. También puedes usarlo para crear ciertos objetivos de cuán rápida debe ser la web.

Si los números de referencia parecen lentos, te recomiendo leer el artículo de Andrea Zoellner que proporciona un brillante punto de partida para aumentar el rendimiento en todos los aspectos.

En el futuro, puedes usar tu web en el entorno de staging para probar nuevos plugins, temas o códigos personalizados, asegurándote de que te dan lo que estás buscando. Asegúrate de que no estén causando ningún retroceso en el rendimiento o ejecutando las pruebas de nuevo. Es posible que te sorprendas de lo que puede afectar la velocidad de tu web. Cuando empresas como Amazon observan que por cada 100ms adicionales de tiempo de carga, les cuesta un 1% en ventas, es importante estar al tanto de estas cosas.

Un ejemplo real de un desarrollo ingenuo hecho a medida

Ahora que hemos visto algunos de los conceptos básicos, te proporcionaré un ejemplo del mundo real de un código muy pequeño que tuvo un impacto significativo en la velocidad al añadir un producto al carrito, verlo y usar la página de pago. Esto es un poco más técnico, pero proporciona una buena idea de cómo un fragmento de código aparentemente menor puede tener un gran impacto.

En este ejemplo, abordé el rendimiento general de la web, pero rápidamente noté que todavía había un problema importante con el carrito y el pago. Estas dos páginas tardaron en cargarse entre 5 y 20 segundos, lo que está muy lejos de un nivel aceptable (si es posible, tienes que aspirar a que tarden de 1 a 3 segundos como máximo). A cambio, esto estaba causando una disminución importante en las compras. Si un cliente puede navegar por la web, añadir artículos al carrito pero después llegan al carrito o a la página de finalización de la compra y tarda mucho en cargar, es probable que lo dejen después de 5 segundos y tus tasas de conversión bajen significativamente.

En este punto, decidí instalar el plugin Query Monitor en la web para ver si aparecía algo obvio. Después de instalar el plugin y activarlo, fui al carrito para ver qué información de diagnóstico me daba. Lo primero que resaltó fue que la página estaba usando una gran cantidad de memoria, ¡60mb de hecho! Puede no parecer mucho, pero aumenta rápidamente cuando tienes una gran cantidad de visitantes en la web. Este alto uso de memoria me llevó a creer que quizás la página estaba cargando una gran cantidad de datos de la base de datos. Cambié la pestaña del monitor de consultas a consultas y me desplacé por la lista para encontrar una consulta en particular que tenía un recuento de filas muy alto y estaba tardando mucho tiempo en procesarse. Esto confirmó mis sospechas iniciales por el uso elevado de memoria.

A continuación, desactivamos todos los plugins excepto WooCommerce, repetimos nuestra prueba y aún persistía el problema. Cambiamos el tema, repetimos nuestra prueba y el problema desapareció. Ahora sabíamos que el problema estaba relacionado con el tema.

Sabiendo esto, volvimos a activar los plugins, realizamos una prueba adicional y descubrimos que todo funcionaba sin problemas y a un nivel mucho más aceptable: 2 segundos de tiempo de carga en el carrito. Después volvimos a activar el tema hecho a medida y empezamos a profundizar en él, comenzando con el archivo functions.php.

Durante este tiempo, también tuve una charla con el cliente para saber si recientemente habían añadido algo en particular, porque este problema era relativamente nuevo. Señalaron que se había desarrollado alguna funcionalidad para ellos. La nueva característica era que un cupón en particular se añadiría automáticamente al carrito si un cliente había iniciado sesión y no había realizado una compra previa.

Como puedes imaginar, hubo un poco de ir de aquí para allá, pero no tardé mucho tiempo a encontrar lo que parecía ser el código transgresor. Marqué el código como si fuera un comentario y ejecuté otra prueba: de nuevo, 2 segundos de tiempo de carga. ¡Bingo! Encontramos el problema. Pero ahora, ¿cómo lo resolvemos?

El código antes y después

Antes:

Tras la inspección inicial, este código en particular parecía bastante inocente. Primero, carga todos los pedidos completados del cliente actual en función de su id de usuario, los cuenta y después devuelve verdadero o falso dependiendo de cuántos pedidos contó.

Sin embargo, destaquemos algunos problemas:

• Carga todos los pedidos, observa el -1 en los numberposts
• Carga todos los pedidos incluso si el cliente no ha iniciado sesión (uno de los requisitos era que sólo era para usuarios registrados)

El mayor problema con la carga de todos los pedidos, especialmente para un invitado, es que para cada nuevo pedido realizado por un invitado, esta función empezará a ser exponencialmente más lenta, ya que tiene que consultar todos los registros de la base de datos. Debido a que está usando la función get_posts, WordPress analizará todos esos elementos en un objeto WP_Post.

Así pues, el primer problema se solucionó modificando los numberposts a sólo 1, porque sólo necesitamos cargar un pedido completado para saber si ya han realizado un pedido anteriormente. Tampoco es necesario ejecutarlo si son invitados, por lo que podemos añadir una verificación adicional al inicio para volver rápidamente si no han iniciado sesión. Esto a su vez significa que la consulta no se ejecutará. También podemos cambiar esto para usar WP_Query en lugar de get_posts. Por lo general, es más correcto usar WP_Query y proporciona una característica adicional. Por último, podemos reducir los campos que devuelve la consulta porque no los necesitamos todos para saber que tampoco hay una entrada.

Después:

Después de esta corrección, el carrito y la caja se cargaron en un tiempo aceptable, de 1 a 2 segundos, tanto para los invitados como para los clientes registrados. La mejor parte es que la web no sólo volvió a sus números de ventas habituales, ¡sino que superó las expectativas al duplicarlas! Esto demuestra que, al final, cuidar el rendimiento puede producir un impacto importante en el resultado final, y que vale la pena la inversión. Puedes hacerlo tú mismo o que lo haga un tercero realizando una auditoría y trabajando contigo para optimizar tu web.

Ten cuidado al copiar y pegar códigos

Solo por diversión, decidí ver si podía encontrar este código problemático en otra parte, para ver si había sido copiado de algún lugar. Por casualidad lo encontré en Stack Overflow, lo que, sin ninguna duda, significa que simplemente se copió y pegó sin pensar en cómo podría afectar a la web.

Incluso eché un vistazo a algunas de las respuestas de ese hilo en particular y, aunque generalmente son de mayor calidad, todas aún sufren el mismo problema de carga de más datos de los necesarios. Esto no quiere decir que el nuestro no pueda mejorarse, de hecho, podríamos escribir una consulta de base de datos en bruto, pero la mejora sería muy pequeña, por lo que se volvería considerablemente menos práctico. Hay una línea muy fina entre la optimización del código y al mismo tiempo mantenerlo comprensible.

Escalando correctamente para mantener la velocidad

Cambiar tu web con cuidado es una parte importante a la hora de mantener un negocio online de forma exitosa. Los consejos anteriores, como crear una fuerte base sólida, con un buen host que tenga almacenamiento en caché, usar la opción de staging para probar cualquier cambio y evaluarlos con pruebas de velocidad, pueden ayudarte a evitar errores importantes. No implementes nunca ningún código cuestionable sin probarlo antes y, en caso de duda, busca una segunda opinión. Con el tiempo, podrás escalar tu web y tus ingresos sin preocupaciones.

Ésta fue la duodécima entrega de nuestra serie Black Friday. ¿Quieres obtener más consejos sobre cómo optimizar el rendimiento de tu comercio electrónico? Estate atento para más publicaciones como ésta con expertos de la industria y algunos de nuestros socios. Aprende cómo mejorar el diseño de tu sitio web, las conversiones, el marketing online y más.