Cómo optimizar WooCommerce y mejorar la velocidad de carga

En esta lección vamos a tratar un tema que a todos los propietarios de una tienda online les interesa: cómo optimizar WooCommerce y mejorar la velocidad de carga de tu tienda online.
Como sabes, WooCommerce se ha convertido en la plataforma más popular para crear tiendas en línea, gracias a su facilidad de uso y a sus numerosas funcionalidades. Sin embargo, muchos usuarios se enfrentan al problema de que WooCommerce tarda mucho en cargar, lo cual puede afectar negativamente la experiencia del usuario y las conversiones. Pero no te preocupes, ¡aquí estoy yo para ayudarte a solucionar este inconveniente!

En esta lección descubrirás trucos y consejos prácticos para optimizar WooCommerce y acelerar la velocidad de carga de tu tienda. Aprenderás cómo reducir el tamaño de las imágenes, optimizar los scripts y minimizar los tiempos de carga. Como también la importancia de elegir un tema ligero y optimizado, así como de utilizar plugins adecuados que no sobrecarguen tu tienda online.

Aquí tienes un resumen de los temas que abordaremos en esta lección:

• Optimización de imágenes en WooCommerce.
• Minimización y combinación de scripts.
• Elección de un tema ligero y optimizado para WooCommerce.
• Uso de plugins de rendimiento recomendados.
• Estrategias para mejorar la velocidad de carga de tu tienda WooCommerce.

¡No te pierdas esta completísima lección de WPO WooCommerce y descubre cómo mejorar la velocidad de carga de WooCommerce de forma rápida y eficiente!
Ahora sí, ¡vamos a optimizar WooCommerce juntos y a mejorar esa velocidad de carga que tanto importa!

Recuerda que la clave está en mantenernos fieles a la filosofía minimalista, simplificar al máximo y aprovechar las herramientas y técnicas adecuadas para lograr una experiencia de usuario excepcional.

¡No pierdas más ventas debido a una tienda lenta! Sigue leyendo para descubrir cómo optimizar WooCommerce y mejorar la velocidad de carga de tu tienda en línea.

¿Por qué necesitamos mejorar la velocidad de carga de WooCommerce? 

La velocidad de carga es un factor crucial para el rendimiento de una tienda online. Optimizar y mejorar la velocidad de carga de WooCommerce son aspectos fundamentales para ofrecer una experiencia de usuario satisfactoria y lograr un mejor posicionamiento en los motores de búsqueda. Si no me crees aquí te dejo unos datos reales y estudiados:

1. Experiencia del usuario: Los usuarios tienen expectativas cada vez mayores en cuanto a la velocidad de carga de los sitios web. Según un estudio de Google, el 53% de los usuarios móviles abandonan un sitio si tarda más de 3 segundos en cargarse. Una carga rápida mejora la satisfacción del usuario y fomenta la interacción con el sitio.
2. Tasa de conversión: La velocidad de carga influye directamente en la tasa de conversión de un sitio de comercio electrónico. Un estudio realizado por Akamai reveló que un retraso de tan solo 1 segundo en el tiempo de carga de una página puede reducir la tasa de conversión en un 7%. Al mejorar la velocidad de carga de WooCommerce, se aumenta la probabilidad de que los usuarios completen sus compras.
3. SEO y posicionamiento en los motores de búsqueda: Como optimizar WooCommerce y mejorar su velocidad de carga también tiene un impacto en el posicionamiento en los resultados de búsqueda. Google ha confirmado que la velocidad de carga de un sitio web es un factor que influye en el posicionamiento. Un sitio más rápido tiene más posibilidades de obtener una clasificación más alta en los motores de búsqueda. Esto se debe a que Google considera que la velocidad de carga es un indicador de la calidad y la relevancia del sitio para los usuarios.

Recuerda que mejorar la velocidad de carga de WooCommerce requiere una combinación de prácticas y técnicas efectivas que aprenderás en esta lección. Puedes encontrar más información y guías detalladas en los siguientes enlaces, pero en esta lección aprenderás todo lo que necesitas saber sobre WPO WooCommerce:

• 7 Effective Ways to Speed Up WooCommerce – WP All Import
• How to Speed up a Slow WooCommerce Website – FixRunner.com
• How to Improve WooCommerce Performance: Speed and Usability – ThemeParrot
• 17 Powerful Ways To Speed Up Your WooCommerce Store (2023 … – Kinsta
• Speed Up Your Slow WooCommerce Site In 20 Steps [2023]
• How to Speed up a Slow WooCommerce Site (2022 Ultimate Guide) – WP Rocket

Recuerda que anteriormente vimos qué es y para qué sirve el WPO en WordPress, donde aprendimos la importancia de la velocidad de carga y buenas notas en nuestra web.

Cómo medir la velocidad de carga de WooCommerce

¿Has notado que WooCommerce carga lento y no sabes identificar el motivo? El primer paso es aprender a analizar y medir la velocidad de carga de WordPress.
Debemos aprender a saber en qué estado está el paciente. De nada sirve intentar arreglar algo si no tenemos un diagnóstico sobre qué falla realmente.

¿Pero cómo puedes medir esa velocidad de carga? Aquí viene la respuesta: GTMetrix.

En este mismo curso de Optimización WordPress tienes preparada una lección especial para enseñarte cómo analizar correctamente tu WordPress con GTmetrix, que incluye vídeos explicativos y contenido detallado que te guiará paso a paso.

Pero espera, ¿qué es GTMetrix? Es una herramienta potente y fácil de usar que te proporciona todos los datos necesarios sobre el rendimiento de tu tienda online. Con GTMetrix, podrás medir métricas importantes como el tiempo de carga, el tamaño de la página, peticiones a la base de datos, scripts que carga la web y muchos otros factores clave que afectan la velocidad y la experiencia del usuario.

Aquí te muestro algunos ejemplos de webs con WooCommerce de clientes que he optimizado:

Mi principal objetivo es que optimices tu tienda WooCommerce y logres una carga rápida que haga felices a tus clientes. Así que no pierdas tiempo y visita la lección Cómo analizar WordPress con GTMetrix. Allí encontrarás toda la información que necesitas para analizar correctamente tu tienda y mejorar su rendimiento.

Motivos por los cuales WooCommerce carga lento

Si has notado que tu sitio web con WooCommerce tarda mucho en cargar, es importante identificar las posibles causas para poder mejorar la velocidad y brindar una mejor experiencia a tus usuarios. A continuación, te explicaré algunos motivos comunes que pueden afectar el rendimiento de WooCommerce:

Hosting no especializado en WooCommerce

El alojamiento web juega un papel crucial en el rendimiento de tu tienda online. Si estás utilizando un hosting genérico que no está optimizado para WooCommerce, es posible que experimentes tiempos de carga más lentos. Considera migrar a un hosting especializado en WooCommerce, que ofrezca servidores rápidos y configuraciones optimizadas para este tipo de plataforma.

Recomendado: Siteground

Sé que parece un consejo genérico y que en todos las blogs que has encontrado sobre el tema dicen lo mismo.
Pero debo decirte que es de los puntos más importantes (si no el que más) que afectan directamente a la velocidad de carga, TTFB y notas de PageSpeed.

No me cansaré nunca de decir que elegir un buen hosting especializado es la clave para mejorar la velocidad de carga de WooCommerce.

⚠️Cuidado con Webempresa ⚠️

Desde hace un tiempo todos mis clientes que tienen alojadas sus webs en Web empresa están sufriendo una bajada muy importante de rendimiento en sus webs, empeorando notas en PageSpeed y su velocidad de carga.

Lo más preocupante es el mal funcionamiento del Cron de WordPress en los servidores de Webempresa.
El mal funcionamiento del Cron acarrea problemas importantísimos como la imposibilidad de que la limpieza de caché se ejecute correctamente o que la opción de WP Rocket Remove Unused CSS no se aplique correctamente.

No recomiendo el hosting de Webempresa

Tema pesado

El tema que elijas para tu tienda también puede afectar la velocidad de carga. Algunos temas de WooCommerce pueden ser demasiado pesados debido a la inclusión de múltiples funciones y estilos complejos. Es recomendable seleccionar un tema ligero y optimizado, que se centre en la funcionalidad esencial y evite el exceso de elementos innecesarios.

Recomendado: Astra

Maquetador pesado

Si estás utilizando un maquetador visual o constructor de páginas para diseñar tu tienda en WooCommerce, debes tener en cuenta que algunos de estos plugins pueden generar código adicional y ralentizar la carga de tu sitio. Asegúrate de utilizar un maquetador ligero y optimizado, y evita el uso excesivo de elementos visuales que puedan afectar negativamente el rendimiento.

No maquetes tu tienda online con Elementor, usa Spectra.

Excesivo uso de plugins

Si has instalado una gran cantidad de plugins en tu tienda, es posible que esto esté afectando su velocidad de carga. Cada plugin añade una carga adicional a tu web.

Revisa la lista de plugins que utilizas y desactiva o elimina aquellos que no sean necesarios. Prioriza la calidad sobre la cantidad y elige plugins bien optimizados y actualizados regularmente.

Excesivo uso de Ajax

WooCommerce utiliza Ajax para mejorar la experiencia de usuario al actualizar los carritos de compra y otros elementos sin necesidad de recargar la página completa. Sin embargo, un uso excesivo de Ajax puede generar una sobrecarga en el servidor y ralentizar la carga de tu tienda. Evalúa cuidadosamente el uso de Ajax en tu sitio y considera reducir su implementación o utilizar técnicas de optimización para minimizar su impacto en el rendimiento.

El principal motivo suelen ser los plugins de Wishlist (lista de deseados). Valora si realmente es necesario su uso y desactívalo para comprobar si mejora el rendimiento web.

En este ejemplo podemos ver como tenemos 2 llamadas muy pesadas de 1,2 y 1,9 segundos y las dos pertenecen a Ajax.

Para optimizar estas llamadas Ajax seguiremos estos pasos:

Recuerda que estos son solo algunos de los motivos más comunes que hacen que Woocommerce carga lento. Si deseas obtener más detalles sobre cada uno de estos factores y conocer otras posibles causas, te invito a visitar la lección en qué afecta a la velocidad de mi web.

Cómo optimizar WooCommerce para acelerar la carga

Y ahora sí, vamos a ponernos manos a la obra. Si quieres aprender cómo optimizar WooCommerce a continuación te enseñaré todos los con consejos y técnicas WPO para mejorar la velocidad de carga de WooCommerce.

Optimiza la configuración de WooCommerce

Desactiva la geolocalización 

La geolocalización puede consumir recursos innecesarios y ralentizar tu tienda. Si no necesitas ofrecer servicios específicos según la ubicación del cliente, desactivar esta función puede ayudar a agilizar la carga de la página.

Además, la geolocalización de WooCommerce no es compatible con la caché y puede dar bastantes errores, como la famosa URL acabada en algo así:

https://tuweb.com/tienda/?v=xxxxxxxx

Para desactivar la geolocalización es tan sencillo como:

Desactiva el comprobador de contraseñas

WooCommerce incluye un comprobador de contraseñas que verifica la fortaleza de las contraseñas de los usuarios. Sin embargo, esta función puede aumentar la carga de la página, especialmente durante el proceso de registro o inicio de sesión. Si confías en tus medidas de seguridad actuales, puedes desactivar esta opción para mejorar el rendimiento.

Si has seguido el curso y tienes instalado Perfmatters puedes desactivar el comprobado de contraseñas de forma muy sencilla:

Automatizar creación de cuentas en WooCommerce

Para ofrecer una experiencia de usuario al comprar más fluida y tener una buena gestión de seguridad sigue los siguientes pasos:

• Ve a WooCommerce > Ajustes > Cuentas y privacidad
• No activar “Permitir a los clientes hacer pedidos sin tener una cuenta”
• Activar “Permitir a los clientes acceder a una cuenta existente al finalizar compra”
• Activar “Permitir a los clientes crear una cuenta al finalizar compra”
• Activar “Al crear una cuenta, generar automáticamente un nombre de usuario para el cliente basado en su nombre, apellido o correo electrónico”
• No activar “Al crear una cuenta, enviar al nuevo usuario un enlace para establecer su contraseña”

• Genera automáticamente la contraseña
  Añade el siguiente snippet a tu plugin de modificaciones o al archivo functions.php de tu tema:

Ventajas automatizar creación de cuentas en WooCommerce

• Evitas al usuario rellenar más datos innecesarios, que solo hará que aumentar la posibilidad de que abandone el proceso de compra
• Aumentas la seguridad de las cuentas. Los usuarios, por norma general, eligen contraseñas muy cortas e inseguras
• Si más adelante el usuario quiere poner su propia contraseña podrá

Cambiar la URL de acceso

Casi de las primeras cosas que deberíamos hacer al crear por primera vez nuestro WordPress: cambiar la URL de acceso.

Todo el mundo en internet sabe que el acceso a WordPress es /wp-login.php
¡Cámbialo cuanto antes para evitar posibles hackeos y ataques de fuerza bruta!

Además, poca gente cae en este detalle: pero los ataques de fuerza bruta consumen muchísimos recursos del servidor (aunque fallen en el intento de acceder), pudiendo hacer caer la web por completo. ¡Protégete!

Si has seguido el curso ya tendrás instalado y configurado Perfmatters, este gran plugin nos permite cambiar la URL de acceso de forma súper sencilla:

Deshabilitar los pingbacks

Los pingbacks son notificaciones que se generan cuando otro sitio web enlaza a tu tienda online. Si recibes muchos pingbacks puede afectar negativamente al rendimiento de tu web, ya que requiere tiempo y recursos del servidor para procesar estas notificaciones.

Deshabilitar los pingbacks puede ayudar a acelerar la carga de WooCommerce, para hacerlo sigue los siguientes pasos:

• Ve a Ajustes > Comentarios
• Desactiva la opción “Permitir avisos de enlaces de otros blogs (pingbacks y trackbacks) en las nuevas entradas”
  
• Guarda los cambios

Optimiza los comentarios

Si permites que los usuarios de tu tienda online dejen comentarios en los productos, es importante optimizar esta función para mejorar el rendimiento.

Limitar comentarios por página

Establece límites en la cantidad de comentarios que se muestran por página y activa la moderación para evitar comentarios no deseados. Además, puedes utilizar herramientas de caché para acelerar la carga de las páginas con comentarios.

Limita los comentarios por página a 10 – 20

Desactivar avatares

En webs con un número bajo de comentarios no afectará tanto, pero imagina una página de producto con 50 comentarios, cada uno de ellos con su avatar propio y sin activar el Lazy Load para las imágenes… Un auténtico desastre que hará reducir drásticamente la velocidad de carga de WooCommerce.

Recuerda que tienes una mini lección donde explico cómo optimizar los comentarios y avatares.

Utiliza un tema optimizado para WooCommerce

Si estás buscando cómo optimizar WooCommerce un tema optimizado para WooCommerce puede marcar la diferencia en la velocidad de carga, la funcionalidad y la apariencia de tu tienda, lo que se traduce en una mejor experiencia para tus clientes y en un mayor potencial de conversiones.

¿Cuál es el mejor tema para WooCommerce? Aquí es donde entra en juego la importancia de elegir un tema optimizado específicamente para este plugin. No todos los temas están diseñados teniendo en cuenta las necesidades y peculiaridades de una tienda online, por lo que es fundamental tomar la decisión correcta.

Un tema optimizado para WooCommerce se caracteriza por los siguientes aspectos:

1. Velocidad de carga:
   El tema debe estar optimizado para una carga rápida, lo que garantizará una experiencia de compra ágil y sin interrupciones. Los tiempos de carga lentos pueden frustrar a los usuarios y hacer que abandonen tu tienda antes de completar una compra.
2. Diseño responsive:
   Asegúrate de que el tema sea totalmente responsive, es decir, que se adapte y se vea bien en todos los dispositivos, desde ordenadores de escritorio hasta tablets y teléfonos móviles. Esto es especialmente importante, ya que cada vez más personas realizan compras en línea desde el móvil.
3. Personalización:
   El tema debe permitir una amplia personalización para que puedas adaptarlo a la identidad de tu marca y resaltar tus productos de la mejor manera posible. Busca opciones de diseño flexibles y una interfaz intuitiva que te permita realizar cambios sin complicaciones.
4. Evita temas multipropuesta:
   Los famosos temas de la famosísima tienda Themeforest que nunca, bajo ningún concepto, recomiendo usar jamás. Estos temas están pensandos, diseñados y desarrollados como un todo terreno que pueda adaptarse a todas las necesidades, esto se resume en miles de funcionalidades que al final jamás usarás, temas pesados llenos de scripts con una malísima codificación, incompatibilidad con optimización de scripts y un largo etcétera terrorífico.
5. Evita temas diseñados con maquetadores visuales:
   La gran mayoría de maquetadores visuales, como Elementor, WP Bakery, Thrive Architect, etc., son increíblemente pesados y hacen caer en picado las notas de nuestra web en PageSpeed. El único maquetador recomendado es aquel que funciona con Gutenberg, como Spectra.
6. Evita diseñar páginas de producto y archivos con maquetadores:
   Las páginas de productos, archivos, tienda, blog, archivo de blog, etc. deben ser siempre responsabilidad del tema, nunca de un maquetador visual.

Las funcionalidades se deben añadir con plugins, jamás deben estar integradas en el tema.

Temas recomendados para WooCommerce

• Astra
• Kadence
• Botiga
• Storefront

Temas que NUNCA deberías usar en WooCommerce

• Avada
• X Store
• WoodMart
• Newspaper

Mantén tus plugins actualizados y elimina aquellos que no sean necesarios

Los plugins desempeñan un papel fundamental en la funcionalidad y personalización de tu web. Sin embargo, es crucial mantenerlos actualizados y seleccionar cuidadosamente los que realmente necesitas. ¿Por qué? Permíteme explicártelo con más detalle:

• 🔧 WooCommerce carga lento:
  Una de las preocupaciones comunes que muchos propietarios de WooCommerce enfrentan es la lentitud de carga. Si tu tienda online tarda en cargar puedes perder valiosos clientes potenciales y afectar negativamente tus conversiones. Aquí es donde entra en juego la importancia de los plugins actualizados y la eliminación de los innecesarios.
• ➡️ Actualización constante:
  Los desarrolladores de plugins lanzan actualizaciones periódicas para mejorar la seguridad, solucionar errores y optimizar el rendimiento. Al mantener tus plugins actualizados, estarás aprovechando las últimas mejoras y correcciones, lo que puede marcar la diferencia en la velocidad de carga de tu web.
• ✂️ Elimina los plugins innecesarios:
  A veces, acumulamos plugins que en su momento parecían útiles, pero que con el tiempo han quedado obsoletos o simplemente no los utilizamos. Estos plugins innecesarios pueden ralentizar tu web y consumir recursos valiosos. Por eso, es crucial realizar una auditoría regular de tus plugins y eliminar aquellos que ya no sean necesarios. De esta manera, estarás aligerando tu web y permitiendo que cargue de forma más rápida y eficiente.
• 🚀 Optimiza el rendimiento:
  Al mantener tus plugins actualizados y eliminar los innecesarios, estarás mejorando significativamente el rendimiento de tu web en términos de velocidad de carga y capacidad de respuesta. Esto no solo beneficiará la experiencia del usuario, sino que también puede ayudarte a posicionarte mejor en los buscadores, como Google, que valora los sitios web rápidos y eficientes.

La clave está en encontrar el equilibrio perfecto entre funcionalidad y rendimiento. Utiliza solo los plugins que necesites y mantenlos actualizados para aprovechar al máximo sus beneficios.

Si necesitas ayuda para mantener tu web al día ofrezco un servicio de mantenimiento y seguimiento WordPress con un precio especial para alumnos y clientes del servicio de optimización.

Optimiza y comprime tus imágenes antes de subirlas a WooCommerce

Tienes una lección completa sobre la optimización de imágenes en WordPress que te recomiendo visitar y leer.

A modo de resumen te indico los mejores consejos:

• No subas las imágenes en cualquier resolución
  Si tu web tiene programada una imagen de producto de 600 x 600 píxeles no subas la imagen en resolución 4K o FULL HD
• No subas las imágenes sin reducir su peso
  Usa herramientas gratuitas online para comprimir el peso de tus imágenes antes de subirlas a WordPress
• No subas tus imágenes en cualquier formato
  Recuerda que las imágenes de una web deben ser en formato webp, usa convertidores online

Configura correctamente las miniaturas de los productos en WooCommerce

Las miniaturas de los productos son esas imágenes en miniatura que se muestran en las páginas de categorías, listados y resultados de búsqueda. Son una ventana al atractivo visual de tus productos y juegan un papel crucial en captar la atención de los usuarios.

Pero también pueden jugarte una mala pasada si no se configuran correctamente añadiendo más peso extra si no asignamos el tamaño correcto en las opciones de nuestro tema o descuadrando la lista de productos porque cada imagen tiene un alto distinto.

Aquí te dejo algunos consejos para configurar correctamente las miniaturas:

• Asigna el ancho y alto exacto de tu imagen de producto
  Ve a Apariencia > Personalizar > WooCommerce > Imágenes de producto y en Anchura de la miniatura indica el tamaño exacto que tu web muestra la imagen de producto.
  
• Activa el recorte de la imagen en 1:1
  Para evitar que se descuadre la lista de productos activa el recorte 1:1, de esta forma todas las imágenes tendrán el mismo alto y ancho y mejorará la estética de tu tienda online.
  Ve a Apariencia > Personalizar > WooCommerce > Imágenes de producto y activa la opción 1:1 en Recorte de la miniatura.
  
• Regenera las miniaturas de WooCommerce
  Si has hecho cambios en las miniaturas de WooCommerce como te he indicado deberás regenerar las miniaturas de forma súper sencilla con el plugin Regenerate Thumbnails.
  Instala el plugin, ve a Herramientas > Regenerar las miniaturas, deja activa solo la opción “Omitir la regeneración si existe el tamaño correcto de miniatura” y haz clic en el botón “Regenerar miniaturas para todos los adjuntos“.
  

Usa la caché para WooCommerce

Seguimos adelante con el proceso de optimizar y acelerar la carga de WooCommerce. En esta sección, vamos a hablar de una técnica poderosa que te ayudará a mejorar significativamente el rendimiento de tu tienda online: ¡el uso de la caché para WooCommerce!

La caché es una forma inteligente de almacenar temporalmente los datos de tu web para que se carguen más rápidamente la próxima vez que alguien acceda a ella.

Pero aplicar la caché en una tienda online tiene algunas opciones extras que una web “normal” no tiene. ¿Entonces cómo se configura la caché en WooCommerce? Aquí tienes algunos consejos que ahora veremos en profundidad:

1. Utiliza un plugin de caché
2. No cachées las páginas cruciales
3. Activa la caché de usuario
4. Misma caché para todos los usuarios
5. Deshabilitar limpieza automática de caché
6. Desactivar caché para usuarios logueados
7. Activa el Memcached

Utiliza un plugin de caché

En WordPress existen varias opciones de plugins de caché disponibles, pero el que te recomiendo 100% es WP Rocket.
Recuerda que tienes una guía completísima sobre WP Rocket y cómo configurarlo.

Sencillamente instálalo y actívalo en tu WordPress para que empiece a trabajar y generar la caché de tu web.

WP Rocket es compatible con varios plugins de ecommerce: 

• WooCommerce
• BigCommerce
• Easy Digital Download
• iThemes Exchange
• Jigoshop
• WP-Shop

No cachées las páginas cruciales

Es importante tener en cuenta que no todas las páginas de tu tienda deben ser almacenadas en caché. Por ejemplo, las páginas de pago, carrito y checkout deben mantenerse dinámicas para asegurar que no haya problemas con los datos y privacidad de los usuarios. Asegúrate de configurar tu plugin de caché para excluir estas páginas cruciales.

WP Rocket excluye automáticamente las páginas “Carrito”, “Finalizar compra” y “Mi cuenta” de la caché de los plugins de la lista anterior, pero si tienes checkouts personalizados o alguna página que necesites excluir de la caché puedes hacer desde:

• WP Rocket > Ajustes > Reglas avanzadas
• Añadir las URLs de las páginas que quieras excluir
  

Esto es realmente importante ya que si no podríamos tener problemas al cachear páginas con contenido dinámico de nuestros usuarios. 

Imagina el desastre que sería que a un usuario se le mostrará el carrito del usuario anterior, o mucho peor: ¡su página de mi cuenta con sus datos!

Podemos comprobar si realmente se está excluyendo la caché de la siguiente forma:

1. Ve a la página de carrito o mi cuenta
2. Abre la consola del navegador
3. Ve a la pestaña Network 
4. Haz click en la primera página de la lista (tendrá el nombre de la página que estés visitando, en este ejemplo “carro”) 
5. Busca en la pestaña Headers cache-control
6. Si pone no-cache quiere decir que está excluído y está configurado correctamente

Y recuerda: excluir estas páginas con datos de usuarios es necesario para poder cumplir con la Ley de protección de datos.

Activa la caché de usuario

La caché  de usuario es muy útil cuando hay contenido exclusivo para usuarios registrados, como es el caso de una tienda online o un sitio de membresías.  

Si tenemos una tienda online o membership site debemos activar la caché de usuario. 

¿Por qué? Porque cada vez que un usuario hace login en nuestra web, sin tener la caché de usuario activa, se le mostrará toda la página sin cachear. Esto lleva a un alto consumo de recursos.

Antes de activar la caché de usuario es recomendable previamente haber excluido todas aquellas páginas que contengan contenido dinámico del usuario: mi cuenta, mi carrito, finalizar compra, etc.

Para activar la caché de usuario es tan sencillo como:

Misma caché para todos los usuarios

La caché de usuarios es muy beneficiosa, pero si tenemos 200 clientes se crearán 200 cachés, una por cada usuario. 
A medida que nuestro negocio vaya escalando más cachés se crearán y a la larga más recursos necesitaremos para el hosting. 

Hay una solución para tener todos los beneficios de la caché de usuarios y no sobrecargar nuestro hosting con cientos de cachés: una única caché para todos los usuarios logueados. 

Esta opción solo es válida si no hay contenido personalizado para cada uno de nuestros usuarios. 
Si todos nuestros usuarios ven lo mismo una vez se loguean entonces sí podemos activar esta opción. 

¿Cómo sé si todos comparten el mismo contenido? 

Sencillo, pongamos de ejemplo mi web: haces login en la web como alumno y puedes acceder al curso y sus contenidos. 

Todos los alumnos del curso accedéis a la misma información y esta no varía entre vosotros, por lo tanto podéis compartir todos los alumnos la misma caché. 

En una tienda online donde se venden, por ejemplo zapatillas de deporte, una vez el cliente haya hecho login accede al mismo contenido que todos los demás clientes. 

Recordemos que las páginas como “mi cuenta”, “mi carrito”, etc. no cuentan como páginas cacheadas para usuarios, ya que estas están siempre excluidas de caché.

Si por el contrario tuviese una tienda online de zapatillas de deporte y ciertos clientes tuviesen acceso vip a unos productos en concreto entonces no podríamos hacer uso de la caché compartida de usuarios, ya que hay diferencias entre ellos. 

Deshabilitar limpieza automática de caché

WP Rocket vacía la caché de forma automática cuando se llevan a cabo ciertas acciones como:

• Registro de un usuario
• Un usuario modifica su cuenta
• Se edita una entrada
• Se modifica el inventario de un producto
• etc. 

Imaginemos que tenemos 500 alumnos y cada uno de ellos modifica su nombre o hace algún cambio en su cuenta. 

¡Se estaría purgando la caché y creando la nueva 500 veces por minuto!

Esto es algo que queremos evitar y podemos hacerlo con un plugin que ha creado el equipo de WP Rocket. 
Con este plugin podremos decidir cuándo sí y cuándo no se vaciará la caché de forma automática.

Activa el Memcached

Memcached, o caché de objetos, es un sistema de caché que mejora la conexión entre la web y la base de datos. 
Esta caché es extremadamente útil y recomendable para mejorar la carga del contenido dinámico (carritos de compra, página de usuarios, backends, etc.).

Si tienes una tienda online activar la memcached es casi obligatorio. 

Si tu hosting no ofrece memcached y estás haciendo uso de WooCommerce o algún otro plugin de tienda online sería recomendable cambiarse a un servidor que sí ofrezca memcached. Recuerda que Siteground, el hosting que recomiendo 100%, ofrece memcached y se activa con tan solo 1 clic. 

Cómo activar memcached

Lo ideal es no hacer uso de plugins y activar la memcached desde el hosting. 
Activar la memcached en Siteground es tan sencillo como:

En cada hosting será diferente, y es posible que algunos de ellos no ofrezcan este tipo de caché.
Ponte en contacto con el servicio técnico del hosting y pídeles que te ayuden a activar la caché memcached.

Optimiza los archivos CSS y JavaScript 

Cuando hablamos de archivos CSS y JavaScript nos referimos a esos scripts fundamentales que hacen que tu web se vea y funcione de manera espectacular. Sin embargo, si no los gestionas correctamente, pueden convertirse en un lastre para el rendimiento y la velocidad de carga de tu sitio.

La optimización de estos archivos consiste en minimizar su tamaño y número y reducir al máximo su impacto en el tiempo de carga de la página. A continuación, te mostraré algunos consejos para optimizarlos y mejorar la velocidad de carga de WooCommerce:

Visita la Guía de WP Rocket para aprender cómo activar todas estas opciones y optimizar WooCoommerce de forma súper sencilla.

Quita los scripts no utilizados

Seguramente al analizar tu tienda online con PageSpeed te haya aparecido el aviso de Reduce el contenido de JavaScript que no se use o Reduce el contenido CSS que no se use:

Si quieres aprender a identificar los scripts que WordPress no usa y cómo desactivarlos para mejorar las notas de PageSpeed y la velocidad de carga visita la lección de Perfmatters, dónde te explico con todo lujo de detalles y en vídeo cómo identificar y desactivar estos archivos.

Optimiza los scripts de WooCommerce

WooCommerce es genial y nos permite de forma gratuita montar nuestro negocio online, pero algo malo tenía que tener: WooCommerce carga en todas y cada una de nuestras páginas sus scripts aunque no se esté usando el plugin.

Así que vamos a aprender cómo optimizar WooCommerce para que cargue sus scripts sólo en las páginas en las que esté presente con Perfmatters:

Con la última actualización de WooCommerce se ha mejorado mucho la velocidad de carga y la velocidad de consulta a la base de datos y en algunos casos no es necesario activar esta opción. Si al activar esta opción ves que los bloques de WooCommerce se “ven mal” vuelve a desactivar esta opción y borrar la caché.

Optimiza el carrito

Pues sí, el carrito de WooCommerce también hay que optimizarlo. Vamos a aprender cómo optimizarlo y algunos consejos para mejorar el rendimiento y experiencia de usuario en tu tienda online.

Evita el uso del mini carrito

Se puede programar que se habrá una previsualización del carrito al hacer clic en él o al pasar el ratón por encima de él:

Esto es algo que desaconsejo totalmente ¿Por qué?

• Obligas al usuario a hacer más clics de los necesarios para llegar a la página de finalizar compra.
  ¿Por qué el usuario necesita una preview del carrito si va a tener que ir al carrito de todos modos?
• Cuanto más tarde el usuario en llegar al checkout menos probabilidades habrá de que termine la venta
• No es una filosofía muy minimalista 
• Perderemos la optimización Get Refreshed Fragments
• Perderemos la optimización de los archivos de Woocommerce
• Añadiremos peticiones extra a la base de datos
• Y lo más importante: haremos más lenta a nuestra web y bajaremos las notas de PageSpeed

Lo más aconsejable es ser sencillo y práctico y evitarle este paso innecesario al usuario llevándolo directamente a la página de carrito. 

¡Ojo! Si en tu tienda el mini carrito es una funcionalidad muy usada por los usuarios o tiene una estrategia planificada no lo desactives. Debemos ser minimalistas, pero el equilibrio en la optimación y funcionalidad es muy importante.

¿Cómo lo desactivamos y optimizamos correctamente? Lo vemos a continuación.

Quita el mini carrito del menú

Si deseas agilizar el proceso de compra quitando el paso extra del mini carrito tan solo debes activar una opción con Astra, tema con el que te recomiendo haber creado tu tienda online:

1. Ve a Apariencia > Personalizar para abrir la configuración del tema Astra
2. Ve a Maquetador de cabeceras y haz clic en el módulo de carrito
3. Activa la opción Página de Carrito en la sección Acción al hacer clic en el carrito
   
4. Guarda los cambios y borra la caché

Desactiva el cart fragmentation

Al analizar nuestra web con GTMetrix u otra herramienta online es muy posible que veamos una petición a la base de datos tipo:

https://example.com/?wc-ajax=get_refreshed_fragments

Esta petición ralentiza mucho la carga de nuestra web y nos hace empeorar bastante nuestras notas en PageSpeed. 
La manera más sencilla de solucionar esto es con Perfmatters, activando la opción Disable Cart Fragmentation de la sección de WooCommerce.

No olvides guardar los cambios, vaciar la caché y comprobar la web en una pestaña de incógnito. 

Solucionando posibles problemas

Si estás usando un tema recomendado, como Astra, no tendrás ningún problema con el carrito de Woocommerce, ya que el de Astra funciona con AJAX. 

Si tienes problemas con el carrito puede ser debido a 2 cosas: 

• No está activado el uso de AJAX para el carrito
• El tema está usando un carrito basado en PHP 

Activar AJAX en carrito de WooCommerce

Es muy sencillo de activar:

• Ir a WooCommerce > Ajustes > Productos
• Activar la opción Activar botones AJAX de añadir al carrito en los archivos
• ¡No olvides guardar los cambios!

Carrito basado en PHP

Si es tu caso lo recomendable sería cambiar de tema
Ya no solo por el carrito, si tu tema no tiene un carrito basado en AJAX seguramente esté anticuado y no sea compatible con unas buenas notas de PageSpeed. 

Si aún así no quieres cambiar el tema otra solución es usar un plugin de carrito basado en AJAX, aunque no es lo más recomendable.

Consejos para un correcto uso del carrito en Woocommerce

• No crear la cabecera con Elementor y no usar su módulo de carrito
• Usar siempre la cabecera y el carrito del tema instalado
• Activar el uso de AJAX en el carrito, como te he enseñado arriba
• No hacer uso del mini carrito

Configura una CDN

En esta sección vamos a hablar de una poderosa herramienta que te ayudará aún más a cómo optimizar WooCommerce: una CDN (Content Delivery Network).

¿Qué es una CDN y por qué la necesitas? Muy sencillo. Una CDN es una red de servidores distribuidos estratégicamente en diferentes ubicaciones alrededor del mundo. Su objetivo es almacenar copias de tu sitio web en estos servidores para que, cuando un usuario visite tu página, se le sirva el contenido desde el servidor más cercano a su ubicación. Esto reduce la distancia física que debe recorrer la información y, por ende, acelera la carga de tu web.

Ahora bien, déjame decirte que he descubierto una CDN especialmente efectiva y fácil de configurar para WordPress: Bunny.net. Esta CDN ha demostrado ser una excelente opción para mejorar la velocidad de carga de WooCommerce en todo el mundo. ¡Y lo mejor de todo es que su integración con WordPress es realmente sencilla!

¿Por qué te recomiendo Bunny.net? Bueno, además de ser una solución potente y confiable, tiene una interfaz intuitiva que facilita su configuración. Simplemente tendrás que seguir unos simples pasos para activar Bunny.net en tu web y empezar a disfrutar de los beneficios de una carga más rápida y eficiente.

Pero espera, no quiero adelantarme demasiado. Te invito a visitar la Guía de Bunny.net, donde profundizaremos en cómo configurar Bunny.net en tu WordPress. Descubrirás los pasos detallados, consejos útiles y todos los secretos para aprovechar al máximo esta increíble CDN.

Optimiza la base de datos

La optimización de la base de datos es crucial para mejorar el rendimiento y la velocidad de carga de WooCommerce. Además, te ayudará a reducir el espacio que ocupa en tu servidor y a mantener todo en orden para que tu WordPress funcione como una máquina bien engrasada.

Tienes una lección sobre la optimización de la base de datos dónde te cuento en detalle qué plugins recomiendo para esta tarea y cómo aprender a programar una limpieza semanal.

Activar compresión GZip

Si estás buscando cómo optimizar WooCommerce, activar la compresión GZip es una estrategia efectiva para mejorar la velocidad de carga de tu tienda online.

La compresión GZIP es una técnica que permite reducir el tamaño de los archivos de tu web antes de ser enviados al navegador del usuario. Esto significa que se comprimen los archivos, como HTML, CSS y JavaScript, para que ocupen menos espacio y se descarguen más rápidamente en el dispositivo del visitante, lo que se traduce en una mejora velocidad de carga en WooCommerce.

La compresión GZIP solo se puede aplicar a los archivos alojado en tu propio servidor, no a los de terceros: Facebook, Google, etc.

Comprobar si GZip está activo

Lo primero será comprobar si tenemos activada la compresión GZip, cosa que podemos hacer de forma muy sencilla y gratuita desde la siguiente página web:

• https://www.giftofspeed.com/gzip-test/

Cómo activar la compresión GZip

En los servidores Apache/LiteSpeed, WP Rocket agrega automáticamente reglas de compresión GZIP en su archivo .htaccess.

Si no usas WP Rocket y quieres activar la compresión GZip es muy sencillo de hacerlo: 

• Asegúrate de tener acceso al archivo .htaccess de tu sitio de WordPress.
  Puedes acceder a este archivo a través de FTP o utilizando el administrador de archivos de tu panel de control de alojamiento.
• Abre el archivo .htaccess utilizando un editor de texto.
• Agrega las siguientes líneas de código al archivo .htaccess y guarda los cambios: 

<IfModule mod_deflate.c>
# Enable GZIP compression
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Si tu hosting no tiene compresión GZip lo mejor es cambiar de hosting a uno más moderno y recomendado como Siteground.

Aumentar el límite de memoria de WordPress

En esta última sección vamos a abordar un aspecto importante para optimizar WooCommerce: aumentar el límite de memoria de WordPress.

Cuando ejecutas una tienda en línea con WooCommerce, es crucial garantizar que tu sitio web tenga suficiente memoria para funcionar sin problemas. Esto es especialmente importante cuando tienes una gran cantidad de productos, imágenes y complementos activos.

Para asegurarte de que WordPress tenga suficiente memoria asignada, debes aumentar el límite predeterminado con estos sencillos pasos:

1. Accede a los archivos de tu sitio web a través de un cliente FTP o el administrador de archivos de tu panel de control.
2. Busca el archivo wp-config.php, que se encuentra en el directorio raíz de tu instalación de WordPress.
3. Abre el archivo con tu editor de texto preferido.
4. Y añade la siguente línea de código define( 'WP_MEMORY_LIMIT', '256M' );
5. Guarda los cambios en el archivo y ciérralo.

¡Y eso es todo! Has aumentado con éxito el límite de memoria de WooCommerce. Esto permitirá que tu sitio web tenga más recursos disponibles y pueda manejar de manera eficiente todas las operaciones relacionadas con la tienda en línea.

Recuerda que el aumento del límite de memoria puede mejorar la velocidad de carga de WooCommerce, especialmente si experimentas problemas de carga lenta o errores relacionados con la falta de memoria.

Conclusión

En conclusión, si deseas mejorar la velocidad de tu tienda WooCommerce y optimizarla para obtener mejores ventas y conversiones, es muy importante seguir los pasos que te he enseñado. A través de esta lección, hemos aprendido diversas técnicas sobre cómo optimizar WooCommerce y mejorar las notas en PageSpeed.

Es importante recordar que WooCommerce tarda mucho en cargar debido a varios factores, como el uso excesivo de plugins, un tema pesado o un maquetador antiguo y no basado en Gutenberg. Sin embargo, con las acciones correctas, puedes marcar la diferencia y brindar a tus visitantes una experiencia de compra fluida y rápida.

Hemos destacado la importancia de utilizar un hosting especializado en WooCommerce, optimizar la configuración del mismo y desactivar características innecesarias como la geolocalización o el comprobador de contraseñas. Asimismo, hemos hablado sobre la importancia de elegir un tema y un maquetador optimizados para WooCommerce, mantener los plugins actualizados y eliminar los innecesarios.

Además, mencionamos la importancia de optimizar y comprimir las imágenes antes de subirlas a la tienda, configurar correctamente las miniaturas de los productos y utilizar la caché de WooCommerce para acelerar la carga. También abordamos la necesidad de optimizar los archivos CSS y JavaScript y eliminar scripts no utilizados.

En resumen, al implementar estas estrategias y seguir todos los pasos de esta lección sobre cómo optimizar WooCommerce, podrás mejorar la velocidad de carga de WooCommerce y ofrecer una mejor experiencia de usuario. No te conformes con una tienda lenta, ¡toma medidas para optimizar WooCommerce y potenciar la tasa de conversión y ventas de tu tienda online!

Recuerda que cada paso que das hacia la optimización y mejora de tu tienda en línea te acerca más a tus objetivos. ¡No dudes en aplicar estas recomendaciones y disfrutar de una experiencia más fluida y rápida en tu tienda WooCommerce!

¡Optimiza WooCommerce y alcanza el máximo rendimiento!