C贸mo optimizar WooCommerce y mejorar la velocidad de carga

Como optimizar WooCommerce para mejorar 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!

como optimizar woocommerce para mejorar la velocidad de carga

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.
datos de Google sobre C贸mo optimizar WooCommerce y mejorar la velocidad de carga

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:

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.

GTMetrix como medir velocidad de carga de Woocommerce

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:

como optimizar woocommerce cliente de anaislab
como optimizar woocommerce cliente de anaislab

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

siteground el mejor hosting para woocommerce

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

astra el mejor tema para woocommerce

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.

spectra el mejor maquetador para Woocommerce

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.

mal uso de ajax en woocommerce

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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.
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”
como optimizar woocommerce optimizando la creacion de la cuenta
  • Genera autom谩ticamente la contrase帽a
    A帽ade el siguiente snippet a tu plugin de modificaciones o al archivo functions.php de tu tema:
馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.
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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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”
    como optimizar woocommerce desactivando los pingbacks
  • 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

como optimizar woocommerce limitar comentarios en paginas
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.

como opimizar woocommerce desactivar avatares comentarios

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

Temas que NUNCA deber铆as usar en WooCommerce

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
optimizar im谩genes de producto en woocommerce

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.

como optimizar miniaturas woocommerce

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.
    como optimizar miniaturas en woocommerce
  • 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.
    recortar miniaturas para optimizar woocommerce
  • 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“.
    regenerar miniaturas en woocommerce

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.

como funciona la cach茅

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.

wp rocket cache woocommerce

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
    wp rocket excluir paginas de la cache

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
comprobar estado cach茅 de una p谩gina en woocommerce

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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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.聽

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.
驴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 鈥渕i cuenta鈥, 鈥渕i 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.

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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:

eliminar scripts que woocommerce no usa

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:

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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:

ejemplo mini carrito woocommerce

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
    configurar carrito en astra
  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.

馃敀 Este contenido es visible solo para alumnos del Curso Optimizaci贸n WordPress de Anaislab.

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.

Bunny net el mejor CDN para WordPress

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:

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!

Deja un comentario

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Scroll al inicio