Cómo acelerar WooCommerce con WP Rocket y Botiga

¿Tiene dificultades para acelerar WooCommerce y crear una tienda de carga rápida?

Tener una tienda rápida es esencial porque los tiempos de carga de su tienda afectarán las experiencias de sus compradores, sus clasificaciones de SEO e incluso las tasas de conversión de su tienda.

Pero al mismo tiempo, las tiendas de WooCommerce son más difíciles de optimizar que los sitios regulares de WordPress, lo que podría decepcionarte con los tiempos de carga de tu tienda.

Hay varias razones, pero dos de las más importantes son que las tiendas WooCommerce requieren mucha más base de datos que los sitios regulares de WordPress y no puede almacenar en caché todas las páginas de su tienda.

Sin embargo, eso no significa que no tenga opciones para crear una tienda más rápida.

Con las herramientas adecuadas, puede acelerar su tienda sin necesidad de ningún conocimiento técnico especial.

En este tutorial, lo guiaré a través de la optimización de la velocidad de WooCommerce de la manera más simple que conozco: con el complemento WP Rocket y algunas otras herramientas y ajustes.

En el camino, compartiré datos de pruebas de rendimiento reales para que puedas ver cómo cada ajuste afecta el tiempo de carga de la tienda.

Al final, debería tener una tienda que cargue mucho más rápido, y no necesitará un título en informática para configurar todo.

¿Suena bien? Aceleremos WooCommerce juntos.

Dos tácticas fundamentales de optimización de velocidad de WooCommerce antes de WP Rocket

En la siguiente sección, le contaré todo sobre cómo puede usar WP Rocket para acelerar WooCommerce y obtener una tienda que cargue más rápido.

Sin embargo, si desea una tienda WooCommerce de carga rápida, aún necesita tener una base de rendimiento sólida. De lo contrario, usar WP Rocket es como poner lápiz labial en un cerdo.

Básicamente, WP Rocket aún hará que su tienda sea más rápida . Pero si su base es demasiado lenta para comenzar, aún tendrá una tienda lenta. Solo será un poco... "menos lento".

Entonces, ¿cuál es una base sólida para el rendimiento de WooCommerce?

Necesitas clavar estos dos detalles:

1. Elija un tema de WooCommerce más rápido

El tema de tu tienda jugará un papel muy importante en la rapidez con la que se carga. Los temas grandes e inflados cargarán más recursos, lo que ralentizará su sitio.

Por otro lado, un tema rápido de WooCommerce hará lo contrario: solo cargará lo mínimo necesario para crear una tienda atractiva y amigable para los compradores.

Tenemos una publicación dedicada donde probamos un montón de opciones para encontrar los temas de WooCommerce más rápidos. Pero, si quieres ahorrar tiempo, puedes usar nuestro tema Botiga gratuito:

Desde cero, Botiga está diseñada para el rendimiento. Utiliza solo JavaScript estándar (sin dependencias de jQuery), minimiza su código automáticamente y tiene menos de 44,3 KB de fábrica.

Además, todos los sitios de demostración están creados con el editor de bloques nativo, lo que significa que no necesita sobrecargar su tienda con un complemento de creación de páginas solo para que su sitio se vea como la demostración.

Al mismo tiempo, Botiga ofrece un montón de funciones útiles de comercio electrónico, incluidas las siguientes:

• Múltiples estilos de página de pago y carrito
• Búsqueda instantánea de productos para ayudar a los compradores a encontrar productos rápidamente
• Recomendaciones de productos con estilo
• Muestras de variaciones de productos
• Múltiples diseños de galería de productos
• Listas de deseos
• Barra adhesiva para agregar al carrito

Botiga tiene una versión gratuita completamente funcional, así como una edición Pro de $ 69 que agrega más funciones.

Por esas razones, vamos a usar Botiga como ejemplo para acelerar nuestra tienda.

Puedes descargar Botiga aquí o navegar por las demostraciones para ver algunos ejemplos.

2. Utilice alojamiento de WooCommerce optimizado para el rendimiento

Más allá de usar un tema rápido, también querrá elegir un alojamiento de WordPress optimizado para el rendimiento.

Si bien puede ser tentador optar por el alojamiento más barato posible, el alojamiento compartido barato generalmente no tiene los recursos para manejar WooCommerce, lo que conducirá a tiempos de carga y rendimiento mediocres, sin importar lo que haga.

Aquí nuevamente, tenemos un artículo en el que probamos un montón de proveedores de alojamiento para encontrar el alojamiento de WordPress más rápido. Si tiene prisa, aquí hay algunas buenas opciones para considerar:

• Kinsta: lea nuestra revisión completa de Kinsta
• WP Engine: recomiendo especialmente los planes de alojamiento de comercio electrónico dedicados que incluyen Elasticsearch (que mejorará en gran medida el rendimiento de búsqueda de productos de su tienda)
• Cloudways: lea mi revisión completa de Cloudways

Cómo acelerar WooCommerce con WP Rocket

Ahora es el momento de usar WP Rocket para activar los refuerzos y hacer que WooCommerce se cargue aún más rápido.

Debido a que estamos utilizando un alojamiento sólido y el veloz tema Botiga para nuestra tienda, ya se carga bastante rápido por sí solo. Aquí hay una captura de pantalla de las métricas de rendimiento de WebPageTest que muestra desde dónde comenzamos en la página de inicio:

Sin embargo, con WP Rocket, aún podemos hacer que se cargue más rápido. Hay muchos complementos excelentes de optimización del rendimiento de WordPress, entonces, ¿por qué recomiendo WP Rocket para WooCommerce?

Bueno, puedes leer mi revisión completa de WP Rocket para saber por qué me gusta, pero aquí hay un resumen rápido de los puntos más importantes:

1. Tiene compatibilidad con WooCommerce lista para usar . Si WP Rocket ve que está utilizando WooCommerce, se configurará automáticamente de manera óptima cuando se trata de aspectos básicos como el almacenamiento en caché. Esta es una gran ventaja, ya que configurar incorrectamente el almacenamiento en caché en una tienda WooCommerce puede romper la funcionalidad clave.
2. Es muy fácil de usar . Además del punto anterior, WP Rocket generalmente tiene una interfaz simple, documentación detallada y soporte premium.
3. Hace que su sitio sea mucho más rápido . Guardé lo mejor para el final. WP Rocket simplemente funciona, y hace un gran trabajo al hacer que las tiendas WooCommerce se carguen más rápido (y también otros sitios de WordPress). También tiene características únicas, como la capacidad de eliminar CSS no utilizado y retrasar la ejecución de JavaScript.

WP Rocket es un complemento premium, pero pagar $ 49 es un pequeño precio a pagar por una tienda WooCommerce más rápida. Existe una relación directa entre los tiempos de carga de la página y las tasas de conversión, por lo que acelerar su tienda puede recuperar fácilmente su dinero en forma de mayores tasas de conversión.

Para comenzar, asegúrese de comprar una copia de WP Rocket. Luego, aquí se explica cómo configurarlo para WooCommerce.

1. Instale el complemento para activar las optimizaciones básicas

Para comenzar, diríjase a su tienda WooCommerce (o configúrela primero si aún no tiene una), e instale y active WP Rocket:

Tan pronto como active el complemento WP Rocket, automáticamente activará las siguientes funciones para acelerar su tienda:

• Almacenamiento en caché de la página : WP Rocket también excluirá automáticamente el contenido clave de WooCommerce para evitar problemas mientras almacena en caché la mayor cantidad de contenido posible. Por ejemplo, excluirá su carrito y las páginas de pago, entre otros ajustes de compatibilidad.
• almacenamiento en caché del navegador
• Compresión GZIP
• Soporte de origen cruzado para fuentes web
• Optimización de archivos de fuentes de Google

En una tienda WooCommerce, WP Rocket también optimizará automáticamente la solicitud AJAX get_refreshed_fragments . Esto es lo que usa WooCommerce para actualizar dinámicamente el contenido del carrito de un comprador.

Nuevamente, todas estas optimizaciones ocurren automáticamente, por lo que su tienda ya debería cargarse más rápido tan pronto como active WP Rocket.

Así es como se carga la página de inicio de nuestra tienda ahora sin tocar una sola configuración en WP Rocket:

Puede ver que el tiempo hasta el primer byte se ha reducido en alrededor de 450 ms (de 0,509 a 0,043 segundos), lo que conduce a una reducción similar en casi todas las demás métricas, incluida la mayor pintura con contenido (LCP). El tiempo de mayor pintura con contenido se redujo de ~1,1 segundos a ~0,7 segundos.

Esta reducción se debe principalmente al almacenamiento en caché de la página compatible con WooCommerce que implementa WP Rocket, aunque los otros ajustes también ayudan.

2. Configurar optimizaciones de archivos

Si bien WP Rocket activa muchas funciones útiles de forma predeterminada, también hay algunas importantes que deberá habilitar manualmente.

Para comenzar, vaya a la pestaña Optimización de archivos en el área de configuración de WP Rocket ( Configuración → WP Rocket ).

Aquí es donde puede optimizar el código CSS y JavaScript de su tienda, lo que puede marcar una gran diferencia en el rendimiento de su tienda (especialmente cuando se trata de Core Web Vitals y la puntuación de rendimiento de Lighthouse).

Estos son los ajustes que recomiendo:

Archivos CSS :

• Minificar archivos CSS : el tema Botiga ya minimiza su código de forma predeterminada, pero esto puede ser útil para minimizar el código de los complementos que está utilizando.
• Optimizar la entrega de CSS → Eliminar CSS no utilizado : esto eliminará el CSS innecesario página por página para reducir el tamaño del archivo de cada página.

No recomiendo combinar archivos CSS, ya que esto no es realmente útil ahora que la mayoría de los hosts de calidad usan HTTP/2.

Archivos JavaScript :

• Minificar archivos JavaScript
• Cargar JS diferido
• Retrasar la ejecución de JavaScript

Al igual que con CSS, no recomiendo combinar archivos JavaScript.

Para garantizar el funcionamiento de su tienda, es posible que desee agregar algunas exclusiones a la configuración de retraso en la ejecución de JavaScript . Básicamente, esto retrasa la carga de todo JavaScript hasta que un usuario interactúa con su sitio (por ejemplo, hace clic o se desplaza).

Esto es excelente para mejorar el tiempo de mayor pintura con contenido, pero es posible que tenga JavaScript que desee cargar de inmediato, como secuencias de comandos de seguimiento (por ejemplo, Google Analytics o Google Tag Manager) o algunos complementos que podría estar utilizando.

WP Rocket mantiene una página detallada de todas las posibles exclusiones para que no necesite averiguar los scripts para excluirse. Simplemente puede copiarlos de este artículo de ayuda de WP Rocket y pegarlos en el campo Archivos JavaScript excluidos .

Por ejemplo, si desea excluir Google Analytics, lo configuraría así:

Después de realizar estos ajustes, puede ver aún más mejoras. El tamaño de la página de nuestra página de inicio se redujo en alrededor de 80 KB y el tiempo de pintura con contenido más grande se redujo aún más de ~ 0,7 segundos a ~ 0,5 segundos.

3. Optimice sus medios

En este punto, ha exprimido la mayor parte del valor de rendimiento de WP Rocket. Sin embargo, hay algunas otras áreas de configuración que quizás desee explorar para realizar algunos ajustes adicionales.

En la pestaña Medios , recomiendo habilitar la carga diferida y las dimensiones de imagen faltantes. El primero lo ayudará con el rendimiento y el segundo puede reducir los problemas con el cambio de diseño acumulativo (CLS) para mejorar aún más el rendimiento de Core Web Vitals:

4. Agregue una red de entrega de contenido (para tiendas globales)

Una red de entrega de contenido (CDN) le permite acelerar los tiempos de carga de su tienda almacenando en caché activos estáticos como imágenes y secuencias de comandos en una red de servidores globales.

Luego, los visitantes pueden descargar esos archivos estáticos del servidor que se encuentra físicamente más cerca de ellos, lo que reduce los tiempos de descarga y acelera su tienda.

Si su tienda solo se dirige a compradores en un área geográfica específica, por ejemplo, dentro del Reino Unido, probablemente no notará muchos beneficios de una CDN.

Pero si te diriges a compradores de todo el mundo, por ejemplo, en el Reino Unido y los EE. UU., una CDN es otra excelente opción para acelerar WooCommerce.

En la sección CDN , WP Rocket te da dos opciones para agregar un CDN a tu tienda:

1. Puede usar el servicio oficial RocketCDN, que cuesta solo $ 7.99 por mes para ancho de banda ilimitado. Se basa en la red global de StackPath. Esta es la opción más sencilla porque ofrece una configuración automática.
2. Puede integrarse con cualquier CDN de terceros haciendo que WP Rocket reescriba sus URL. Las opciones populares son StackPath, KeyCDN, Bunny CDN, CloudFront y otras.

Si no se siente seguro al configurar su propia CDN, le recomiendo usar el servicio RocketCDN, ya que ofrece un valor bastante bueno ya que obtiene ancho de banda ilimitado por un precio fijo:

Solución de problemas con WP Rocket en WooCommerce

Si bien seguir las instrucciones anteriores debería conducir a una tienda WooCommerce más rápida y sin problemas, hay algunos escenarios raros en los que podrías encontrarte con problemas menores.

El ejemplo más común serían problemas con algún tipo de contenido dinámico, como listas de deseos de usuarios, elementos vistos recientemente o contenido específico de la ubicación (por ejemplo, precios diferentes para diferentes países).

Por ejemplo, si un usuario visita un producto que agregó a su lista de deseos, es posible que desee mostrarlo en la página del producto. Pero en algunos casos, el almacenamiento en caché puede provocar un comportamiento inestable aquí.

Entonces, ¿cómo puedes arreglar esto? Veamos algunos consejos.

En primer lugar, intente usar complementos de contenido dinámico que estén codificados de manera compatible con caché. Esencialmente, esto significa que el complemento genera su contenido dinámico utilizando JavaScript o AJAX en lugar de PHP.

Si no está seguro, puede comunicarse con el desarrollador del complemento donde tiene problemas. Algunos complementos incluyen herramientas de compatibilidad integradas. Por ejemplo, el complemento YITH WooCommerce Wishlist tiene una configuración para habilitar la carga de AJAX, lo que solucionará cualquier problema con el almacenamiento en caché.

El equipo de WP Rocket también ha creado algunos complementos/herramientas de compatibilidad para complementos populares de WooCommerce que pueden causar problemas:

• Complemento de lista de deseos de YITH WooCommerce
• Widget nativo de productos vistos recientemente de WooCommerce
• YITH WooCommerce Complemento de productos vistos recientemente

Si las correcciones anteriores no son una opción, otra posible solución es agregar una regla de exclusión de caché que apunte a la cookie que establece el complemento. Esto es más avanzado, pero le permitirá omitir el caché para los usuarios que necesitan ver contenido dinámico.

Puede intentar encontrar información sobre las cookies en la documentación del complemento o contratar a un desarrollador para que lo averigüe por usted. Luego, puede configurar reglas de exclusión de caché de cookies en el área de Reglas avanzadas de WP Rocket:

Otros complementos útiles de optimización de velocidad de WooCommerce más allá de WP Rocket

WP Rocket puede hacer casi todo lo que necesita para optimizar el rendimiento de WooCommerce. Pero hay una excepción principal:

¡Imágenes!

Su tienda probablemente tendrá un montón de imágenes de productos. Y si no tiene cuidado, esas imágenes de productos pueden ralentizar su tienda (especialmente sus páginas de productos y tiendas).

La solución es optimizar las imágenes de su sitio comprimiéndolas y redimensionándolas. Puede lograr esto automáticamente mediante el uso de un complemento de optimización de imágenes.

Tenemos una publicación completa sobre los mejores complementos de optimización de imágenes de WordPress, pero estas son algunas de las mejores opciones:

• Imagify: este complemento proviene del mismo desarrollador que WP Rocket
• ShortPixel: este es el complemento que uso en mis propios sitios
• WP Compress: otra opción de alta calidad; Obtenga más información en nuestra revisión de WP Compress

Más allá de las imágenes, otra herramienta útil para las grandes tiendas es algún tipo de solución de búsqueda de productos.

Si tiene muchos productos, la búsqueda de productos puede requerir muchos recursos porque genera muchas consultas de base de datos.

Puede solucionar esto utilizando soluciones de búsqueda fuera del servidor como Elasticsearch (a través del complemento ElasticPress) o Jetpack Search (que también se basa en Elasticsearch, pero es más fácil de implementar).

Acelere su tienda WooCommerce hoy

Si desea que su tienda WooCommerce tenga éxito, es importante que se cargue rápidamente.

Para configurar su tienda para el éxito, es importante establecer primero una base sólida:

1. Elija un tema WooCommerce de carga rápida, como el tema gratuito Botiga.
2. Utilice alojamiento de WordPress optimizado para el rendimiento, como Kinsta o WP Engine.
3. Configure la base de su sitio de comercio electrónico.

A partir de ahí, WP Rocket puede ayudarlo a implementar una serie de optimizaciones de rendimiento de WooCommerce, incluido el almacenamiento en caché compatible con WooCommerce, la optimización de CSS y JavaScript, y más.

Si también agrega un complemento de optimización de imágenes para optimizar las imágenes de sus productos, debe estar listo para volar con una tienda WooCommerce liviana y rápida.

¿Aún tienes dudas sobre cómo acelerar WooCommerce con WP Rocket y Botiga? ¡Cuéntanos en los comentarios!