Esta es una publicación invitada de Simon Tomkins de CommerceGurus: si te gusta el artículo, ¡asegúrate de agradecerle en los comentarios!
La velocidad de su tienda WooCommerce es increíblemente importante cuando se trata de convertir a los visitantes en clientes. La investigación ha demostrado que incluso un retraso de un segundo puede resultar en el 7% de los pedidos perdidos.
Si su sitio de WooCommerce está ganando $ 1,000 por día, ese segundo retraso en el tiempo de carga podría costarle $ 25,000 en ventas anuales perdidas, ¡no un pequeño cambio! Si usted es el afortunado propietario de Amazon, un retraso de un segundo en 2017 podría haber significado una pérdida de $ 178 mil millones * 0,07 = $ 12.5 mil millones en ingresos netos …
Una vez más, un El sitio web lento de WooCommerce le está costando dinero.
Pasé mucho tiempo investigando la velocidad del sitio web y la optimización del rendimiento antes de crear nuestro Tema de WooCommerce de Shoptimizer. Algunas de las estadísticas son asombrosas:
- El 73% de los usuarios móviles han abandonado un sitio debido a que tarda demasiado
- El 47% de las personas espera que un sitio se cargue en 2 segundos o menos
- El 79% de las personas que se encuentran con un problema de rendimiento no volverán a comprar
Por lo tanto, un sitio lento de WooCommerce significa visitantes infelices y la pérdida de ingresos potenciales para los competidores.
Y hoy veremos brevemente qué puede hacer para acelerar su sitio web de WooCommerce: estos son trucos probados de optimización de rendimiento que pueden tener un impacto inmediato en su tasa de conversión de ventas 🙂
1) Revise su plataforma de alojamiento actual
No entro en el tema del alojamiento en gran detalle, ya que debería ser obvio que un host optimizado de WooCommerce correctamente hace una gran diferencia en las velocidades de carga.
Como regla básica, debe mantenerse alejado de cualquier Hosting compartido lo que puede luchar con las demandas de WooCommerce.
LiquidWeb, Kinsta y Wpengine son los principales jugadores en el ámbito de comercio electrónico y son buenas opciones para Hosting administrado. Una alternativa popular es SiteGround (Business Bloomer solía funcionar en SG). Recomendaría su nube o Hosting dedicado soluciones. También migrarán su sitio existente a su plataforma de forma gratuita con ciertos planes, lo cual es un gran ahorro de tiempo.
2) Auditar la velocidad de su tienda WooCommerce
Es un primer paso importante para evaluar primero la velocidad de carga de su tienda actual. Muchas personas usan la velocidad de la página de Google para esto, pero prefiero WebPagetest.
Hay un pequeño truco en esto. Ir al Avanzado> Chrome pestaña y asegúrese de que Informe de faro de captura también está marcado. Lighthouse es una nueva herramienta de Google diseñada para mejorar la calidad de las páginas web. Resumirá la velocidad, la accesibilidad y el rendimiento progresivo de la aplicación web entre otras áreas y proporciona un excelente informe con pasos procesables reales.
El informe proporcionado se verá como la captura de pantalla a continuación. Lo ejecuté usando nuestro Tema de WooCommerce de Shoptimizer página de inicio como ejemplo.
El Primer byte El tiempo es el tiempo que lleva desde que un cliente solicita que reciba su primer byte de datos del servidor web.
El Iniciar renderizado El tiempo refleja la velocidad a la que aparece el primer elemento en una página. Este puede ser un color de fondo, un bloque de texto o cualquier otra cosa. Una carga rápida en este punto proporciona una fuerte indicación al usuario de que la página está representando y que el resto del contenido pronto aparecerá.
3) Minificar su código
El número de activos cargados en una página impacta en gran medida en su puntaje de rendimiento. Cuantos más archivos se carguen, más viajes de retorno deben hacer el servidor, ralentizando la velocidad de carga.
Una excelente solución a este problema es el Autoptimizar Plugin, disponible de forma gratuita en el repositorio de WordPress. Lo encontrarás buscando Autoptimizar dentro Plugins> Agregar nuevo. Esto es perfecto para simplificar la optimización de su sitio de WooCommerce.
La tarea clave que realiza es agregación – o combinar múltiples archivos en uno para que el navegador del visitante tenga menos archivos para descargar. Entonces minificaciones Este archivo combinado, eliminando cualquier espacio en blanco y contenido innecesario, como comentarios, lo que hace que sea mucho más pequeño y rápido de descargar.
Finalmente cachés El HTML, CSS y JavaScript para crear versiones optimizadas de lo que estaba allí antes. Es un sitio web en una dieta.
4) Optimizar sus imágenes
Debe optimizar sus imágenes de WooCommerce Antes de subirlos a su sitio web de WordPress Y también una vez que se cargan y usan en una publicación de blog, producto de WooCommerce o página de WordPress. Aquí hay tres pasos necesarios para aumentar drásticamente la velocidad de carga de imágenes.
a) Prepare sus imágenes antes de subirlas a WordPress
Una herramienta de optimización de imágenes en línea hará reducciones dramáticas de tamaño a las imágenes. Hay docenas por ahí, incluidos Optimizilla, Amo img y Compresor Pero soy fanático de Tinypng.
Debe obtener una gran reducción de inmediato usando una herramienta como esta, por lo que es cuestión de tener la costumbre de usarla antes de agregar ninguna imagen nueva a su tienda.
b) Asegúrese de que se establezcan los tamaños de imagen predeterminados sensibles
He visto a muchas personas descargar y subir imágenes de un sitio como el excelente Sin estelares sin pensar en el tamaño o el peso.
La próxima recomendación que tengo es usar el Complemento de imsanity para garantizar que se seleccionen los máximos sensibles. No hay necesidad de una imagen ancha de 3000px en ningún sitio y este complemento asegura que una imagen se reduzca automáticamente a su tamaño configurado. Puedes instalarlo a través de Plugins> Agregar nuevo y buscar Imsanidad. Dentro de su sección de configuración, puede configurar los máximos tamaños. Un ancho de imagen máximo de 1200px sería adecuado para la gran mayoría de los sitios.
c) Use un CDN y un cargador perezoso
Hay muchos mitos sobre Jetpackpero encuentro que si tiene cuidado con los módulos que activa y no solo cambie cada característica, puede funcionar extremadamente bien.
Si aún no lo ha instalado, puede agregarlo a través de Plugins> Agregar nuevo y buscar Jetpack. Deberá registrarse para una cuenta de WordPress.com si aún no tiene una. Una vez que llegue a la pantalla de configuración de JetPack, asegúrese de seleccionar el plan gratuito.
Dentro de su pantalla de configuración, puede activar sus dos mejores características. «Servir imágenes de nuestro CDN global» y «Habilitar la carga perezosa para imágenes«.
Usando un CDN Se asegurará de que las imágenes se sirvan desde el servidor de Jetpack en lugar del suyo. Mira las dimensiones de la imagen y devuelve una versión de la imagen con precisión para ajustar, que será mucho más pequeño en tamaño.
Consejo: Si está reemplazando una imagen, necesitará usar un nuevo nombre de archivo, ya que una vez que Jetpack’s CDN almacena una imagen, no hay forma de borrarla y obtener la nueva versión.
Carga perezosa es de importancia clave cuando se trata de la velocidad del sitio web porque con él habilitado, las imágenes solo se cargarán cuando aparezcan dentro de la ventana de la visión del navegador. Las imágenes que nunca son visibles no se cargarán. Esto da como resultado un ahorro significativo del ancho de banda y la reducción en el tiempo de carga.
5) Cambiar a un tema de WooCommerce optimizado para el rendimiento
Elegir un tema optimizado para la velocidad es el componente final esencial de una tienda rápida de WooCommerce. Así llamado Temas de «múltiples usos» rara vez son aptos para el propósito y, a menudo, terminan cargando docenas de archivos JavaScript, complementos innecesarios, fuentes y CSS que destruirán las velocidades de carga.
Muchos «WooCommerce«Los temas también usan sus propias anulaciones de plantilla de WooCommerce (Solo eche un vistazo a sus archivos de tema actuales: ¿hay una carpeta /WooCommerce con muchos archivos de plantilla?), que puede tener una tendencia desafortunada a romper su sitio web cuando se actualiza el complemento de WooCommerce.
Entonces, ¿qué tema debes ir?
El estándar de oro siempre ha sido el tema oficial de WooCommerce, Escaparate. También me gusta Generarpress y Astro.
Por mi parte, aquí en CommerceGurus quería crear un tema que tenga la calidad del código de la tienda, pero que sea un poco más estéticamente agradable y optimizada para las conversiones de velocidad y ventas.
Logramos obtener la velocidad de carga a un nivel muy bueno (como se ve en la página de pantalla de la página web de arriba). También quería agregar un buen número de Características de conversión adicionales – El objetivo es un tema rápido que convierta más visitantes en compradores. El resultado es Tienda de tiendas – Los detalles y el acceso al sitio de demostración están aquí.
Conclusión
Una tienda WooCommerce de carga rápida asegura que tendrá mejores conversiones y SEO. Tendrá carros menos abandonados y clientes más comprometidos. Mantenerse al tanto de los problemas de velocidad es de vital importancia para cualquier propietario de la tienda.
Para algunas de las capturas de pantalla, estamos usando Tienda de tiendas -Un tema de WooCommerce optimizado de velocidad desde el principio. Me encantaría que lo eches un vistazo y me hagas saber lo que piensas en los comentarios 🙂
Finalmente, aquí hay un video detallado sobre cómo hacer un sitio web de WooCommerce realmente rápido, paso a paso. ¡Disfrutar!
