Cómo acelerar WooCommerce con WP Rocket y Botiga

¿Luchas como acelerar WooCommerce y crear una tienda de carga rápida? Es esencial tener una tienda rápida, porque el tiempo de carga de su tienda afectará las experiencias de los compradores, las clasificaciones de SEO e incluso las tasas de conversión de su tienda. Pero al mismo tiempo, las tiendas WooCommerce son más difíciles de optimizar que los sitios de WordPress comunes, lo que podría decepcionarlo de los tiempos de carga de su tienda. Hay varias razones, pero dos de las más grandes son que las tiendas de WooCommerce usan muchas más bases de datos que los sitios de WordPress ordinarios y no puede almacenar todas las páginas de su tienda en caché.
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 requerir conocimientos técnicos especiales. En este tutorial, lo guiaré optimizando la velocidad de WoCommerce de la manera más simple que sé: con el complemento WP Rocket y algunas otras herramientas y ajustes. Durante el curso, compartiré datos de pruebas de rendimiento reales, para que pueda ver cómo cada cambio afecta el tiempo de carga de la tienda. Hasta el final, debe tener una tienda de carga mucho más rápida, y no necesitará un título en computadora para configurar todo.
¿Suena bien? Aceleremos a WooCommerce juntos. Dos tácticas fundamentales de optimización de velocidad de WooCommerce antes de WP Rocket en la siguiente sección, le diré todo sobre cómo puede usar WP Rocket para acelerar WoCommerce y obtener una tienda de carga más rápida. Sin embargo, si desea una tienda WooCommerce de carga rápida, aún debe 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 continuará haciendo su tienda más rápido. Pero si la base es demasiado lenta para comenzar, aún tendrá una tienda lenta. Solo será un poco … “menos lento”. Debe conocer estos dos detalles: 1. Elija un tema de WooCommerce más rápido que su tema de la tienda desempeñará un papel importante en lo rápido que se carga. Los temas grandes y completos cargarán más recursos, lo que retrasará su sitio. Por otro lado, un tema rápido de WooCommerce hará lo contrario: solo cargará el mínimo necesario para crear una tienda agradable y amigable con los compradores. Tenemos una publicación dedicada en la que hemos probado muchas opciones para encontrar los temas de WooCommerce más rápidos. Pero si desea ahorrar tiempo, puede usar nuestro tema de botiga gratuito:
Desde cero, Botiga está construido para el rendimiento. Utiliza solo JavaScript Vanilla (sin adicciones a JQuey), minimiza su código automático y tiene menos de 44.3 kb en el cuadro. Además, todos los sitios de demostración están construidos con el editor de bloques nativos, lo que significa que no tiene que sopesar su tienda con un enchufe de generación de páginas solo para que su sitio se vea como una demostración. Al mismo tiempo, Botiga ofrece muchas funciones de comercio electrónico útiles, incluidas las siguientes: estilos de múltiples páginas y carritos

Búsqueda de productos instantáneos para ayudar a los compradores a encontrar rápidamente productos
Recomendaciones de productos elegantes
Variantes de productos
Múltiples aspectos de la galería de productos
Listas de deseos
Barra pegajosa que se agrega al carrito
Botiga tiene una versión gratuita completamente funcional, así como una edición US 69 que agrega más funciones.
Por estas razones, utilizaremos Botiga como ejemplo para acelerar nuestra tienda. Puede descargar la botiga desde aquí o explorar las demostraciones para ver algunos ejemplos. 2. Use el alojamiento de WooCommerce optimizado para el rendimiento, además de usar un tema rápido, también querrá elegir el alojamiento optimizado de WordPress. Aunque puede ser tentador optar por el alojamiento más barato posible, el intercambio barato, generalmente no tiene los recursos para administrar WooCommerce, lo que conducirá a los tiempos de carga y un bajo rendimiento, sin importar lo que haga.
Nuevamente, tenemos un artículo en el que hemos probado muchos proveedores de alojamiento para encontrar el alojamiento de WordPress más rápido. Si tiene prisa, aquí hay algunas buenas opciones a considerar:
Kinsta – Lea nuestra revisión completa del motor Kinstawp – Recomiendo especialmente los planes de comercio electrónico dedicados que incluyen Elasticsearch (que mejorará en gran medida el rendimiento de búsqueda de productos)
Cloudways – Lea mis reseñas de nubes completas
Cómo acelerar WoCommerce con WP Rocket ahora, es hora de usar WP Rocket para arreglar su refuerzo y hacer que WooCommerce se carga aún más rápido.
Debido a que usamos alojamiento sólido y el tema rápido para nuestra tienda, ya está cargado consigo mismo. Aquí hay una captura de pantalla de los valores de rendimiento WebPageTest que muestran dónde comenzamos en la página inicial:
Sin embargo, con WP Rocket, podemos cargarlo más rápido. Hay muchos complementos de optimización de rendimiento de WordPress, entonces, ¿por qué recomendar WP Rocket para WooCommerce? Bueno, puedes leer mi revisión completa de WP Rocket para averiguar por qué me gusta, pero aquí hay un resumen rápido de los puntos importantes:

Tiene compatibilidad fuera de la caja con WooCommerce. Si WP Rocket ve que usa WooCommerce, se configurará automáticamente de una manera óptima cuando se trata de elementos básicos, como el almacenamiento en caché. Esta es una gran ventaja, porque la configuración inapropiada del almacenamiento en caché en una tienda WooCommerce puede destruir la funcionalidad clave.
Es muy fácil de usar. Además del punto anterior, WP Rocket generalmente tiene una interfaz simple, documentación detallada y soporte premium.

Hace que su sitio sea mucho más rápido. Mantuve lo mejor para el final. WP Rocket funciona simple y hace un gran trabajo al hacer tiendas de WooCommerce para cargar más rápido (y otros sitios de WordPress). También tiene características únicas, como la capacidad de eliminar CSS no utilizada y retrasar la ejecución de JavaScript.wp Rocket es un complemento premium, pero el pago de $ 49 es un precio bajo por una tienda de WooCommerce más rápida. Existe una relación directa entre el tiempo de carga de la página y las tasas de conversión, por lo que acelerar la 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í está cómo configurarlo para WooCommerce. 1. Instale el complemento para activar las optimizaciones básicas para comenzar, vaya a su tienda WooCommerce (o configúrelo primero si no tiene una más) e instale y active WP Rocket:
Tan pronto como active el complemento WP Rocket, activará automáticamente las siguientes características para acelerar su tienda:
Cache de página: WP Rocket excluirá automáticamente el contenido de la clave de WooCommerce para evitar problemas, manteniendo el mayor contenido posible. Por ejemplo, excluirá la canasta y las páginas de finalización de la compra, entre otros cambios de compatibilidad.
El caché del navegador en caché
compresión gzip

Soporte de Cross-Oirin para fuentes web
Optimización de archivos de Google Fonts
En una tienda WooCommerce, WP Rocket optimizará automáticamente la solicitud AJAX GET_REFRESHED_FRAGMENTS. Esto es lo que WooCommerce usa para actualizar el contenido de un comprador dinámicamente.
Nuevamente, todas estas optimizaciones tienen lugar automáticamente, por lo que su tienda ya debe cargarse más rápido tan pronto como active WP Rocket. He aquí cómo cargar la página inicial de nuestra tienda ahora sin alcanzar una sola configuración en WP Rocket: puede ver que el tiempo al primer byte se ha reducido en aproximadamente 450 ms (de 0.509 a 0.043 segundos), lo que conduce a una reducción similar de Casi todos los demás valores, incluida la pintura de contenido más grande (LCP). La mayor duración de pintura llena de contenido ha disminuido de ~ 1.1 segundos a ~ 0.7 segundos. Esta reducción es principalmente el resultado de la página de WooCommerce en caché que implementa el cohete WP, aunque los otros cambios también ayudan.
2. Configure las optimizaciones de archivos Si bien WP Rocket activa muchas funciones útiles de forma predeterminada, hay algunas importantes que tendrá que activar manualmente. Para comenzar, acceda a la pestaña de optimización de archivos en el área de configuración del cohete WP (configuración → cohete WP). Aquí 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 del faro).
Aquí están la configuración que recomiendo: Archivos CSS:
Reduzca los archivos CSS: el tema Botiga ya minimiza el código de forma predeterminada, pero esto puede ser útil para minimizar el código en los complementos que utiliza.
Optimizar CSS → Entrega de entrega Eliminar CSS no utilizado: esto eliminará 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. JavaScript:
Reducir los archivos JavaScript

Carga JS retrasada
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 al conjunto de retraso de JavaScript. Esto esencialmente retrasa la carga de todo el JavaScript hasta que un usuario interactúa con su sitio (por ejemplo, clics o pergaminos). Esto es genial para mejorar su tiempo de pintura de contenido más alto, pero es posible que tenga algo que JavaScript desee cobrar de inmediato, como el seguimiento de los scripts (por ejemplo, Google Analytics o Google Tag Manager) o algunos complementos que usa. WP Rocket mantiene una página detallada de todas las exclusiones potenciales para que no necesite descubrir las Escrituras para excluirlo. Simplemente puede copiarlos de este artículo de ayuda de WP Rocket y pegarlos en los archivos JavaScript excluidos. Por ejemplo, si desea excluir a Google Analytics, configúrelo así:
Después de hacer estos cambios, puede ver más mejoras. El tamaño de nuestra página inicial se redujo en aproximadamente 80 kb, y el tiempo de contenido de pintura más alto ha disminuido y más de ~ 0.7 segundos a ~ 0.5 segundos.

3. Optimice su promedio en este momento, ha apretado la mayor parte del valor del rendimiento en WP Rocket. Sin embargo, hay algunas otras áreas de configuración que puede explorar para hacer algunos cambios adicionales. En la pestaña de medios, le recomiendo que active la carga perezosa y las dimensiones de la imagen que falta. El primero lo ayudará con el rendimiento, y el segundo puede reducir los problemas acumulativos de desplazamiento de diseño (CLS) para mejorar el rendimiento de la red central de la web: 4. Agregue una red de entrega de contenido (para tiendas globales) Una red de entrega de contenido (CDN) le permite acelerar el tiempo de carga de su tienda memorizando activos estáticos, como imágenes y scripts, en una red de servidores globales. Luego, los visitantes pueden descargar esos archivos estáticos del servidor que está físicamente más cerca de ellos, lo que reduce el tiempo de descarga y acelera la tienda. Si su tienda solo se dirige a los compradores en un área geográfica particular, por ejemplo, en el Reino Unido, probablemente no notará demasiados beneficios de un CDN. Pero si está apuntando a compradores de todo el mundo, por ejemplo, en el Reino Unido y EE. UU., Entonces un CDN es otra excelente opción para acelerar WooCommerce. En la sección CDN, WP Rocket le ofrece dos opciones para agregar un CDN a su tienda:
Puede usar el servicio oficial RocketCDN, que cuesta solo $ 7.99 por mes para un ancho de cinta ilimitado. Se basa en la red global de StackPath. Esta es la opción más simple porque ofrece una configuración automática.
Puede integrarse con cualquier CDN de terceros, pidiéndole a WP Rocket que reescriba su URL.Las opciones populares son StackPath, KeyCDN, Bunny CDN, CloudFront y otras. Si no se siente seguro de configurar su CDN, le recomiendo usar el servicio RocketCDN, ya que ofrece un valor bastante bueno, porque obtiene un ancho de banda ilimitado a un precio fijo a un precio fijo. :
Los problemas de resolución de problemas con WP Rocket en WoCommerce, mientras siguen las instrucciones anteriores, deberían conducir a una tienda de WooCommerce más rápido, sin problemas, hay algunos escenarios raros en los que podría encontrar problemas menores. El ejemplo más común sería problemas con un cierto tipo de contenido dinámico, como listas de deseos de usuarios, artículos recientemente vistos o contenido específico de ubicación (por ejemplo, diferentes precios para diferentes países). Por ejemplo, si un usuario visita un producto que agregó a la lista de deseos, es posible que desee mostrarlo en la página del producto. Pero en algunos casos, memorizar en caché puede conducir a un comportamiento no deseado aquí. Entonces, ¿cómo puedes resolver eso? Pasemos por 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 usando JavaScript o AJAX en lugar de PHP. Si no está seguro, puede comunicarse con el desarrollador de arado en el que tiene problemas. Algunos complementos incluyen herramientas de compatibilidad incorporadas. Por ejemplo, el complemento y la lista de deseos de WooCommerce tiene una configuración para activar AJAX, que resolverá cualquier problema con la caché. El equipo de WP Rocket también creó algunos complementos/herramientas de compatibilidad para WooCommerce popular que podría causar problemas: complemento con la lista de deseos de WooCommerce
Widget Native para productos vistos WooCommerce reciente

Complemento y los productos de WooCommerce vistos recientemente

Si los remedios anteriores no son una opción, otro posible remedio es agregar una regla para excluir el caché que se dirige a la cookie que establece el complemento. Está más avanzado, pero le permitirá evitar el caché para los usuarios que necesitan ver contenido dinámico. Puede intentar encontrar información sobre las cookies de la documentación del complemento o contratar a un desarrollador para que lo descubra para usted, puede configurar reglas para excluir el caché en el área de reglas avanzadas en 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á muchas imágenes de productos. Y si no tiene cuidado, esas imágenes de los productos pueden retrasar su tienda (especialmente las tiendas y páginas de la tienda). La solución es optimizar las imágenes de su sitio comprimiéndolas y cambiantes. Puede hacerlo automáticamente utilizando 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 principales 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 grandes tiendas es un tipo de solución de búsqueda de productos. Si tiene muchos productos, la búsqueda de productos puede consumir muchos recursos, ya que causa muchas consultas pesadas en la base de datos. Puede resolver esto utilizando soluciones de búsqueda fuera del servidor, como ElasticSearch (a través del complemento ElasticPress) o la búsqueda en jetpack (que también se basa en elasticsearch, pero más simple de implementar). Acelere su tienda WooCommerce hoy si desea que su tienda WooCommerce tenga éxito, es importante cobrar rápidamente. Para preparar su tienda de éxito, es importante poner primero una base sólida: elija un WooCommerce de carga rápida, como el tema de Botoga gratuito.

Use el alojamiento de WordPress optimizado para el rendimiento como Kinsta o WP Engine.
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, incluidas la caché compatible con WooCommerce, CSS y JavaScript Optimization. Si también agrega un complemento de optimización de imágenes para optimizar las imágenes del producto, debe estar configurado para usar una tienda de WooCommerce fácil y rápida. ¿Todavía tiene alguna pregunta sobre cómo acelerar WooCommerce con WP Rocket y Botiga? ¡Dinos en los comentarios!