Cómo acelerar su sitio web de WooCommerce (Guía final de 2022)

¿Estás experimentando un sitio lento de WooCommerce? Muchos factores pueden ralentizar su sitio web de WooCommerce, pero afortunadamente compartimos las mejores técnicas para acelerarlo. El primer hecho: su sitio de WooCommerce necesita velocidad para generar ganancias. No solo el tiempo de carga más rápido mejora la experiencia del usuario, sino que también se traduce a través de SEO y mejores ventas para su negocio. Necesita un sitio web rápido o puede despertarse para perder a los clientes con corta atención, que tienen que elegir lo que está disponible ahora sin tener que esperar demasiado.

La velocidad influye en la tasa de rechazo. Fuente: Piense con Google
Es simple: ¿qué haría como visitante si llega a un sitio de comercio electrónico muy lento? ¿Prefiere quedarse o probar otro sitio web con una mejor experiencia de compra? Todos sabemos la respuesta.
Esta guía le mostrará cómo aumentar fácilmente la velocidad de su sitio de WooCommerce optimizando ciertos aspectos. Presentaremos las muchas razones por las que debe optimizar su sitio, junto con las técnicas y herramientas principales con las que puede trabajar para obtener un sitio rápido en todos los dispositivos. Como pequeña ventaja, también recibirá nuestra lista de corriente de rendimiento para evitar cualquier error, aprovechar al máximo su sitio web de WooCommerce y obtener una puntuación verde en Google PageSpeed ​​Insights.
<b class = "lwptoc_title" incluido
1. ¿Por qué debería optimizar su rendimiento de WooCommerce?
2. Cómo acelerar un sitio de WooCommerce: 11 consejos que funcionan
2.1. 1. Elija un buen proveedor de alojamiento
2.2. 2. Use http/2
2.3. 3. Use un complemento de caché
2.4. 4. Elija un tema rápido de WooCommerce
2.5. 5. Reduzca el tiempo de ejecución JS2.6. 6. Optimizar las imágenes de su producto
2.7. 7. Optimización de CSS (optimización de entrega de CSS y eliminación de CSS no utilizada)
2.8. 8. Carga perezosa para fotos y videos
2.9. 9. Optimización del código
2.10. 10. Use una red de entrega de contenido para proporcionar recursos estáticos
2.11. 11. Optimización de la base de datos
2.12. Bonificación: no olvide optimizar su optimización de vital web central
3. Cómo hacer que su WooCommerce sea más rápido con WP Rocket
3.1. Escenario #1: Medición de la velocidad de mi sitio de WooCommerce sin cohete WP
3.2. Escenario #2: Medición de la velocidad de mi sitio de WooCommerce con cohete WP
4. ¿Qué hacer si su sitio de WooCommerce es lento? (Nuestra lista de verificación)
5. Conclusión
¿Por qué debería optimizar su rendimiento de WooCommerce? La velocidad es importante para su sitio web de WooCommerce, debido a que el tiempo de carga de la página es un factor de clasificación principal, y ser realistas, no venderá sus productos si está en la página 5 de Google.
En un estudio realizado por Hubspot, vemos que "la disminución en el tiempo de carga de la página aumentó las conversiones del 3% al 17%". ¿Qué significa eso en términos de dinero? Hice el cálculo para usted: si su sitio web de WooCommerce gana $ 1,000 por día, ¡una página de un segundo de la página puede costarle $ 250,000 al año! Piense en todas las inversiones que puede hacer con $ 250,000 … Más, mira lo que encontré en el blog de Google. Uno de cada dos visitantes (que son compradores potenciales) saldrán de la tienda si tarda más de tres segundos en cargarse.
Comportamiento de los usuarios móviles cuando se enfrentan a un sitio lento. Fuente: Piense con Google

Optimizar la velocidad para un sitio de comercio electrónico no es nuevo. En 2010, Google ya ha incluido una nueva señal en sus algoritmos de jerarquía: la velocidad del sitio. Este nuevo KPI refleja qué tan rápido responde un sitio web a las solicitudes web. ¿Dónde estamos en 2022? Google continúa haciendo que la web sea un lugar mejor (y más rápido) con el reciente lanzamiento de Core Web Vitals, que también se ha convertido en un factor de clasificación. Estas nuevas señales web miden cómo los usuarios perciben la experiencia de interactuar con su página web, lo que influye en la posición de su sitio de WooCommerce en Google. Si su puntaje de rendimiento es bajo, a Google no le gustará. Si sus KPI son verdes, es más probable que su tienda esté en la portada.
Los 5 kpi medidos por Google para medir la experiencia del usuario. Fuente: Google Search Central

Ahora que he visto cómo una velocidad más alta aumenta las conversiones, reduce la tasa de rechazo, le brinda una buena clasificación en serp-uri y les hago felices visitantes, Veamos cómo asegurarnos de que su sitio web de WooCommerce esté bien optimizado.

Esto nos lleva a nuestra próxima parte: cómo acelerar su sitio web de WooCommerce. Cómo acelerar un sitio de WooCommerce: 11 consejos que funcionan para aumentar la velocidad de su sitio son un aspecto crucial de cualquier sitio de WooCommerce. Los consejos a continuación se clasifican desde un alto impacto hasta un bajo impacto en el rendimiento. Algunos tienen más influencia en el puntaje de rendimiento final, pero todos tienen una cosa en común: acelerará su sitio web de WooCommerce acercándose a cada uno de ellos. Veamos algunas técnicas simples que puede seguir para optimizar el rendimiento y hacer que su WoCommerce sea más rápido: elija un buen proveedor de alojamiento
Use http2
Use un complemento de caché
Elija un tema rápido de WooCommerce
Reducir el tiempo de ejecución de JS
Optimizar las imágenes de su producto
Optimización de CSS (optimización de entrega de CSS y eliminación de CSS no utilizada)
Carga perezosa para fotos y videos
Optimización de código
Utilice una red de entrega de contenido para proporcionar recursos estáticos
Optimización de la base de datos
Bonificación: ¡Recuerde la optimización de Core Web Vitals! Comencemos con las técnicas que tienen el mayor impacto en la optimización de la velocidad de la página de WooCommerce. 1. Elija un buen proveedor de anfitriones prioritarios: Genial
La venta de productos con WooCommerce a menudo implica contenido con imágenes, texto, galerías de fotos, videos y pago en línea. Todas estas características deben jugar rápidamente en su sitio en un entorno seguro. ¿Pondrá los detalles de su tarjeta de crédito en un sitio web lento que no inspira confianza? No lo haré. En primer lugar, debe considerar qué tan rápido es el alojamiento web. En segundo lugar, ¿qué tipo de atención al cliente ofrece este proveedor? Tercero y finalmente, ¿están a salvo? Algunas de las tácticas que desee buscar son: verifique el puntaje de alojamiento (imagine las ventas que podría perder si el alojamiento lo decepciona). Por ejemplo, la plataforma de alojamiento de comercio electrónico WP Engine lo ayuda a aumentar la velocidad del sitio hasta en un 40% y las ventas promedio de hasta un 18%.
Memorización de caché a nivel de servidor (esto está configurado para WoCommerce).
Una red de entrega de contenido (CDN), especialmente si tiene clientes internacionales.
Varios centros de datos para que pueda elegir la ubicación de acuerdo con dónde están sus clientes principales.
El ancho de la cinta y el almacenamiento proporcionan para sus productos.
Certificado SSL (desea que su tienda en línea esté segura).
Copias de seguridad automáticas (es posible que desee volver a una versión anterior de su sitio de WordPress si una actualización sale mal, por ejemplo.
Sitios de organización fácil para probar sus nuevos productos o funciones antes de que se transmitan.
La instalación automática de WooCommerce para comenzar más rápido (algunos hosts como WooCommerce Prey).
Verifique el tipo de alojamiento que ofrece. Si tiene miles de productos de tráfico mensuales altos, es posible que desee un servidor dedicado. Escribí un artículo que muestra las ventajas y desventajas de cada tipo de alojamiento: compartido, dedicado, en la nube, etc. Será útil hacer su elección. Para obtener más información sobre el servicio de alojamiento diestro, eche un vistazo a nuestra guía dedicada sobre el mejor alojamiento de WordPress para pequeñas empresas. ¿Por qué?
Esto nos lleva al siguiente punto: la importancia extrema de HTTP/2.
2. Use la prioridad HTTP/2: Great HTTP/2 tiene el potencial de aumentar la velocidad de su sitio, lo que permite a los navegadores procesar más solicitudes a través de una sola conexión simultánea. Esto guarda el ancho de la cinta, permitiendo tiempos de carga de página más rápidos. Anteriormente, su navegador tenía que regresar al servidor para hacerse cargo de cada recurso. Ahora, asume todos los recursos y transfiéralos al mismo tiempo. Los trucos de CSS explican la diferencia entre ambos:
Http/1 en comparación con http/2
3. Use un complemento de caché prioritario: la gran memoria en caché es una excelente manera de acelerar su tienda WooCommerce. Es lo único que necesita para un sitio de comercio electrónico que funciona sin problemas y rápidamente, desde la carga de la página de pago hasta las páginas con los detalles del producto. La memorización de caché mejora el rendimiento al reducir los procesos que consumen el tiempo, como hacerse cargo de la información almacenada o generar nuevos niños para cada visitante solicitando contenido.
Las mejores características que debe buscar en un complemento de caché son principalmente caché precarga, optimizando archivos CSS y JS, carga perezosa para imágenes y videos, compresión de GZIP, la capacidad de posponer la carga de JavaScript y la optimización de fuentes. Si se pregunta cuál es el mejor caché para WooCommerce, debe echar un vistazo al cohete WP. Tiene todas las características obligatorias y funciona excelente con WooCommerce. WP Rocket también se encuentra en el sitio web oficial de WooCommerce: compatibilidad con WOoCommerce con WP Rocket. Fuente: Sitio web oficial de WooCommerce
La configuración ya debe activarse, pero para cualquier eventualidad, asegúrese de excluir las siguientes páginas predeterminadas de WooCommerce:
Carro

Mi cuenta
Échale un vistazo
WP Rocket es fácil de configurar y aplicar el 80% de las mejores prácticas de rendimiento web. No crea la palabra y desplácese a los resultados de nuestras pruebas de velocidad para ver el impacto positivo del cohete WP en un sitio de WooCommerce. 4. Elija una prioridad rápida del tema de WooCommerce: la alta velocidad WoCommerce es la clave para aumentar las tasas de conversión y generar más ingresos para su sitio. Los mejores temas de WooCommerce pueden hacer o destruir el éxito de una tienda, algunos tienen efectos increíbles en los tiempos de carga. Para ayudarlo a encontrar lo mejor para sus necesidades, analizamos los 10 temas de WooCommerce más rápidos usando Lighthouse; Aquí hay cuatro ganadores con un rendimiento rápido:

En bloque
El marco para el generador de páginas
Nevé
astral
5. Reduzca la prioridad del tiempo de ejecución JS: excelente si JavaScript tarda mucho en ejecutarse, entonces ralentizará el rendimiento de la página. Google Lighthouse tiene en cuenta el tiempo de ejecución de JS cuando mide su nivel de rendimiento. Le advierte si la ejecución de JavaScript dura más de dos segundos. Si supera los 3.5 s, entonces obtienes una bandera roja: el diagnóstico de JS realizado por Lighthouse. Fuente: WebDeb
Sugerencia: si desea encontrar cuatro formas de medir el tiempo de ejecución de JS, le recomendamos leer esta guía. Para reducir el tiempo de ejecución de JS, WebDev comparte tres consejos importantes:
Minimiza y comprime el código.
Eliminar el código JS no utilizado.
Reduzca los viajes de red memorizando el código en caché.
Todas estas recomendaciones son parte de las funciones de cohetes WP. WP Rocket ayuda a optimizar sus archivos JS de dos maneras: retrasando los recursos JS (lo que significa que los archivos JS se cargarán solo cuando haya una interacción con el usuario) y cargando JS solo cuando sea necesario.
Pestaña de optimización de archivos-JS-On Board WP Rocket 6. Optimizar las imágenes de su producto Priority: siempre tome en serio la fotografía del producto. Las imágenes son una parte importante de la creación de un sitio web exitoso de comercio electrónico, porque desea convencer a los visitantes de que compren su producto. Sin embargo, debe encontrar el equilibrio correcto entre calidad y tamaño. Una imagen de 2 MB se verá bien, pero verá que la puntuación de velocidad se ve afectada dramáticamente. La mejor solución es optimizar las imágenes de cada producto, especialmente si tiene galerías, pancartas de promoción y todo tipo de medios en su tienda en línea. Significa reducir su tamaño, comprimirlos y convertirlos en el mejor formato sin comprometer la calidad. Hay dos formas de optimizar las imágenes del producto para acelerar su sitio web de WooCommerce: manual, utilizando herramientas como Adobe Photoshop, GIMP, Paint.net o Affinity Photo. Sin embargo, algún software de diseño puede ser costoso o crear una curva de aprendizaje empinada.

Automáticamente, utilizando herramientas en línea o un complemento como Imagify, EWWW Optimizer, TinyJPG | Tinypng, etc. Eche un vistazo a nuestra lista con los mejores complementos de optimización de imágenes para WordPress.
Imagify está hecha por el mismo equipo detrás de WP Rocket. Creamos un complemento muy intuitivo que comprime las imágenes automáticamente utilizando tres niveles:
Normal, agresivo y ultra. El complemento es gratuito para 25 MB de imágenes al mes y convierte todas las fotos en la webp, ¡un nuevo formato que acelera su sitio!
Conversión de imágenes en formato webp con Imagify
¿Qué sucede si ya ha subido todas las imágenes de sus productos en WordPress? No se preocupe: Imagify puede optimizarle las imágenes existentes de los productos WooCommerce. Ahora que hemos visto lo que más puede afectar la velocidad de su sitio de WooCommerce, para ver las siguientes recomendaciones (que aún afectan el rendimiento de nivel medio). 7. Optimización de CSS (optimización de entrega de CSS y eliminación de CSS no utilizada) Prioridad: la optimización promedio de su CSS aumenta la velocidad de su sitio. Esto se puede hacer de dos maneras: eliminación de CSS no utilizado (para reducir el tamaño de la página y las solicitudes HTTP para un mejor rendimiento)
Optimización de su entrega de CSS (para eliminar el CSS que bloquea el juego en su sitio para un tiempo de carga más rápido)

Como solución, el complemento WP Rocket ofrece estas dos opciones: debe elegir una de ellas. Le recomendamos que optimice la entrega de CSS (CSS asincron) si la función de eliminación de CSS no utilizada no funciona para usted, puede activar cada uno de ellos haciendo clic en el cuadro de selección a continuación:
Pestaña de optimización de archivos –CSS -Abloul WP Rocket
8. Carga perezosa para imágenes y videos Prioridad: promedio Otra forma de acelerar su sitio web de WooCommerce es activar la carga perezosa para imágenes y videos. La carga perezosa es una estrategia para identificar recursos locos (no críticos) y cargarlos solo cuando sea necesario. El contenido visible por encima del pliegue se muestra con prioridad, pero retrasa el contenido del contenido debajo del pliegue. Esta técnica de optimización le permite mostrar las imágenes que los usuarios visten primero. Google mismo recomienda el uso de la carga perezosa para “posponer imágenes fuera de pantalla”, como se muestra a continuación: la sección Oportunidades después de ejecutar una auditoría de rendimiento (se recomienda la carga perezosa). Fuente de PSI
Para aplicar el script de carga perezosa en imágenes y videos, puede hacerlo manualmente usando el atributo de carga:

Si no te sientes cómodo agregando la etiqueta manualmente en cada imagen, ¿por qué no usar un complemento para hacer esto? Hemos seleccionado los mejores 7 complementos de WordPress para la carga perezosa que puede usar para acelerar su sitio web de WooCommerce. Si desea evitar usar otro complemento, puede permanecer en WP Rocket, proporciona una opción de carga perezosa:

La opción de carga perezosa: el tablero de cohetes WP

9. Optimización del código de prioridad: la optimización promedio del código, como minimizar JavaScript y CSS y compresión de archivos, acelerará su sitio web de WooCommerce. Uno de los mayores problemas que enfrentan los desarrolladores al crear archivos HTML, CSS y JS es mantener el código que se puede leer. Tienden a usar espaciado, comentarios y variables bien nombradas para ser fáciles de seguir. Sin embargo, esto se vuelve algo problemático, porque ocupa más espacio, lo que puede ser dañino durante los tiempos de carga, en los que cada milisegundo importa. Como solución, enumeré las mejores herramientas de minimización CSS y JS. Si resumimos la guía, descubrimos sobre dos formas de compresión de los archivos y la minimización del código: manual (pero tenga cuidado con ella, si reduce su código usando un editor de texto, eliminar un carácter útil puede destruir su sitio ).
Automáticamente con un complemento de WordPress como WP Rocket, que reduce el código CSS y JS con unos pocos clics:
La pestaña de minimización de CSS y JS: el tablero de cohetes WP
10. Use una red de entrega de contenido para proporcionar prioridad de recursos estáticos: el CDN promedio es útil para entregar su contenido a través de una red de servidores en todo el mundo. Acelerará su sitio web de WooCommerce jugando sus productos y el contenido de su tienda casi de inmediato. Esto es crucial si tiene visitantes a Miami, pero también en Bangkok, por ejemplo. Una solución fuera de caja es usar RocketCDN, ya que está completamente integrado con WP Rocket. Si tiene su CDN, no se preocupe, también puede agregarlo:
La pestaña CDN – la pestaña en el tablero WP Rocket

11. Optimización de la base de datos de prioridad: la baja optimización de la base de datos no afectará tanto su velocidad, pero aún se recomienda mantenerla limpia y optimizada.Para aumentar la velocidad de su sitio de WooCommerce, desea aprovechar todas las ventajas: es posible que deba eliminar algunas tablas antiguas dejadas por complementos viejos o simplemente reducir el tiempo de respuesta del sistema de base de datos.Por lo general, puede ejecutar esta optimización manual o desde el panel PhPMyadmin.Pero nuevamente, si prefiere permanecer en el tablero de WordPress y utilizar un solo complemento de rendimiento, le sugerimos que use la opción de optimización de la base de datos de cohetes WP: la sección de limpieza de publicaciones y comentarios (1/2- El tablero WP Rocket
Sección de limpieza de bases de datos (2/2) – Bashboard de cohete WP

Esas técnicas aplicables a su sitio web de WooCommerce son cruciales si desea acelerar su sitio. Desde junio de 2021, algunos KPI ingresaron al juego de rendimiento: Core Web Vitals. Estos indicadores miden el puntaje de experiencia en la página de Google y afectarán el rendimiento de SEO. Veamos la conexión entre el rendimiento y los vitales de la web central en nuestra próxima parte. Bonificación: recuerde optimizar su optimización central de vital web. Realmente no puede optimizar el rendimiento sin mejorar los valores de vital web de la web. Cuanto más ofrezca una excelente experiencia para el usuario, mejor será su puntaje. ¡Su tienda también tendrá más oportunidades de clasificarse en la portada de los resultados de Google! Si desea obtener una puntuación de más de 90 en PageSpeed ​​Insights, debe optimizar el retraso de la primera introducción, el mayor contenido y cambiar la apariencia acumulada). En Google PageSpeed ​​Insights, al igual que el sitio web oficial de WP Rocket? ¡Comience a usar nuestro complemento WP Rocket hoy! Aplica automáticamente el 80% de las mejores prácticas de rendimiento web. WP Rocket. Ejecutaremos un estudio de caso basado en un sitio real de WooCommerce (con productos de pago y puerta de enlace). El tema utilizado es Storefront, el tema gratuito oficial de WooCommerce y creamos un total de 16 productos:
Extraiga de la página de mi producto: el tablero de WooCommerce haremos una comparación de rendimiento con y sin cohete WP. Usaremos Google PageSpeed ​​Insights para realizar la prueba de velocidad. /Table> Escenario #1: ¡Medir la velocidad de mi sitio de WooCommerce sin cohete WP para ejecutar la prueba de velocidad! La nota es 52/100, sin optimización. El faro de mi sitio de WooCommerce (móvil). Fuente: PSI

La mayoría de mis KPI están en naranja y rojo. Cuando se desplaza hacia abajo en la página del informe, vemos que Lighthouse ha informado algunos problemas:
Sección de diagnóstico después de ejecutar mi auditoría: banderas rojas y naranjas
Para acelerar su sitio web de WooCommerce, Lighthouse recomienda eliminar los recursos que bloquean la representación, reducen CSS y JS sin usar, usan la compresión GZIP y usan un caché. ¿Te suena? Estas son exactamente las características del cohete WP que mencioné anteriormente en esta guía. Será interesante ver cómo WP Rocket afecta el puntaje y la sección de auditoría: esto es solo el script 2. Escenario #2: Medición de mi sitio de WooCommerce con WP Rocket ahora para activar el cohete WP y verificar el efecto en el rendimiento. Cambiamos algunas opciones en el tablero de cohetes WP:
Tengo js y CSS optimizado

Activé la carga perezosa para fotos
El resto de las técnicas (como la compresión de GZIP) se aplican automáticamente con WP Rocket

Aquí están los resultados para el móvil, y casi quiero cambiar el nombre del artículo en “¡Cómo obtener un puntaje de 100 psi usando WP Rocket!” ¡Mi puntaje pasó de 52 a 99!
Mi nuevo puntaje móvil verde usando WP Rocket.Fuente: PSISA Echamos un vistazo a nuestra sección de auditorías pasadas.Todos los problemas anteriores han desaparecido debido al cohete WP:

La sección de auditoría pasada con WP Rocket instalada

Conclusión: Gracias a WP Rocket, aceleré mi sitio web de WooCommerce en 99/100 en menos de 2 minutos.¡Espera un minuto!Puede pensar: “¿Pero la nota en el escritorio?”.Bueno, este es el mismo resultado.Simplemente mire la tabla de abajo:

¿Qué hacer si su sitio de WooCommerce es lento? (Nuestra lista de verificación) Si WooCommerce es lento, primero debe probar su sitio utilizando un instrumento como PageSpeed ​​Insights para identificar los principales problemas y resolverlos en consecuencia, como lo hicimos en el escenario #1. También hay algunas cosas que debe verificar de inmediato. Eche un vistazo a nuestra lista de verificación de rendimiento para remediar fácilmente la Cuaresma de WooCommerce: use un caché como WP Rocket y un CDN para ver el cargado y entregado más rápido. Elimine o al menos limite el uso de cualquier control deslizante, precarga o animaciones. Vea complementos pesados ​​y guiones y estilos de WooCommerce. Además, no olvides usar un tema fácil. Instale un complemento de optimización de imágenes como Imagify, obtendrá archivos de imagen más fáciles sin comprometer la calidad. Implemente la carga perezosa en sus imágenes y videos para mostrar solo el usuario visto. Actualice su alojamiento a uno rápido. ¿Usas la última versión de PHP? Verifique el panel de alojamiento. ¿Activaste http2? Yo también. Verifique la asistencia de alojamiento si no encuentra esta información. Cuida de Core Web Vitals. La mayoría de los consejos de rendimiento son aplicables instantáneamente, especialmente si decide usar un complemento para automatizar su aumento de rendimiento. ¡Empiece lo antes posible!

Terminar su sitio de WooCommerce necesita velocidad para generar ganancias. No importa qué tipo de producto o servicio venda en línea; si los clientes ven una página de carga lenta, se irán sin mirar atrás. La experiencia del usuario lo es todo en 2022. Afortunadamente, existen excelentes técnicas que pueden ayudarlo a recuperarse de un sitio lento de WoCommerce. La mayoría de ellos requieren tiempo para implementarse manualmente. Es por eso que debe usar un complemento de rendimiento para lograr sus objetivos. Por ejemplo, WP Rocket optimiza su código, pone su contenido en caché, implementa la carga perezosa en los medios y optimiza su base de datos en unos pocos clics. También vi que el complemento puede ayudarlo a obtener una puntuación verde en Google PageSpeed ​​Insights:

Puntuación sin WP Rocket (en el escritorio)	puntaje con WP Rocket (en el escritorio)
52/100 puntaje en dispositivos móviles sin WP Rocket	puntaje 99/100 en móvil con WP Rocket (¡2 minutos después!)

¡No se arriesguen a perder clientes potenciales y comience a usar WP Rocket hoy para acelerar su tienda WooCommerce! Este artículo apareció originalmente en el blog WP Rocket y se publicó aquí con permiso.