Cómo optimizar el tiempo de carga de una web Woocommerce

Cómo optimizar el tiempo de carga de una web Woocommerce

Woocommerce es un plugin muy potente que permite crear tiendas de comercio electrónico basadas en WordPress. En Cleventy lo usamos en la mayoría de proyectos de este tipo y las estadísticas lo determinan como el sistema más usado en el mundo para e-commerce.

Nos gusta y la versatilidad que tiene para adaptarlo a casi cualquier empresa mediante la implementación de hooks es impresionante. Por si tienes curiosidad, en esta sección puedes encontrar algunos de los proyectos e-commerce que hemos realizado.

Pero no es perfecto. Tanto WordPress como sus plugins están pensados para que valgan para todo el mundo, lo que los hace muy fáciles de usar pero también muy ineficientes a veces. Estos son unos pequeños trucos o consejos que pueden resultar útiles para mejorar el tiempo de carga de tu web WordPress + Woocommerce.

Índice

  • Reducir el número de scripts de Woocommerce
  • Ordenar la carga de los scripts de Woocommerce
  • Usa tu propia hoja de estilos
  • Sistema de caché
  • Otras consideraciones

Reducir el número de scripts de Woocommerce

Woocommerce incluye en la cabecera o en el footer numerosos ficheros javascript o css que penalizarán nuestro tiempo de carga y la valoración de la web en el sistema PageSpeed de Google.

Según como sea nuestra plantilla seguramente podamos afinar un poco, por ejemplo con los siguientes:

  • woocommerce_prettyPhoto_css.css: si teníamos un blog y ya usábamos esta librería o una parecida, probablemente no nos haga falta
  • comment-reply.js: En este caso es un js de WordPress, pero si en las páginas de producto no aceptamos comentarios, podemos ahorrarlo
  • woocommerce.js: Woocommerce cargará este fichero en toda la web, pero no tiene sentido usarlo en la página del blog o de contacto, por ejemplo
  • wc-add-to-cart.js, wc-cart-fragments.js, wc-add-to-cart-variation.js y wc-add-to-cart-variation.js: Si nuestra plantilla únicamente tiene el botón de añadir al carrito desde la página de producto podemos cargar estos ficheros únicamente en esas secciones

Recuerda que la forma correcta de eliminar los scripts es mediante la acción wp_enqueue_scripts de WordPress:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
add_action( 'wp_enqueue_scripts', 'preparing_scripts', 999 );
function preparing_scripts() {
   if (!is_product()) {
      wp_dequeue_script('wc-add-to-cart');
      wp_dequeue_script('wc-cart-fragments');
      wp_deregister_script( 'wc-add-to-cart-variation' );
      wp_dequeue_script( 'wc-add-to-cart-variation' );
   }
   if (!is_woocommerce()) {
      wp_dequeue_script('woocommerce');
   }
   if (is_product()) {
      wp_deregister_script( 'comment-reply' );
   }
   wp_dequeue_style('woocommerce_prettyPhoto_css');
}

Estos son solo unos ejemplos de scripts, pero probablemente puedas hacer lo mismo con muchos otros.

Ordenar la carga de los scripts de Woocommerce

Tanto WordPress como Woocommerce indican la carga de ciertos ficheros javascript en el header de la página, por ejemplo jQuery, lo que afecta a la valoración de PageSpeed. En este caso el sistema de Google nos indica que tenemos ficheros que bloquean la visualización de la parte alta de los contenidos y que aumentan el tiempo que el usuario espera para ver la web. En algún momento hablaremos del concepto de “respuesta de usuario” como un factor importante en el algoritmo del buscador.

La directiva es clara: todos los javascript tienen que estar en el footer. Además, hay muchos más apuntes relacionados con la influencia de estos archivos en el tiempo de carga como limitar el número de scripts referenciados, evitar javascript inline, reducir el peso de los archivos…

¡Ojo! Normalmente las plantillas Woocommerce cuentan con tener jQuery en el header y si lo movemos al footer probablemente tengamos que retocar muchas cosas para que todo siga funcionando correctamente.

Para forzar a WordPress a cargar los javascript en la parte baja de la web tendremos que eliminarlos de la cola y volver a añadirlos con el argumento $in_footer a true.

1
2
3
4
5
6
wp_dequeue_script('jquery');
wp_dequeue_script('jquery-core');
wp_dequeue_script('jquery-migrate');
wp_enqueue_script('jquery', false, array(), false, true);
wp_enqueue_script('jquery-core', false, array('jquery'), false, true);
wp_enqueue_script('jquery-migrate', false, array('jquery'), false, true);

Usa tu propia hoja de estilos

Por lo general las plantillas cuentan con una hoja de estilos que extiende los css definidos por el propio Woocommerce. En algunos casos se modifican casi completamente los valores por defecto, perdiendo el sentido de cargar los ficheros que proporciona el propio plugin.

Esto suele ser más evidente en la página de producto o en los listados de categorías, secciones que nos interesa posicionar especialmente, así que en estas secciones la recomendación sería crear una hoja de estilos única, que combine las propiedades que realmente se usan, y bloquear la carga de los ficheros por defecto de Woocommerce mediante un filtro que se proporciona.

En este caso, por ejemplo, estamos permitiendo que se carguen los estilos por defecto en la página de carrito, en la de pago y en la de cuenta de usuario. En el resto nuestra plantilla estaría “limpia” de hojas de estilo Woocommerce.

1
2
3
4
5
6
7
add_filter('woocommerce_enqueue_styles', 'custom_woocommerce_enqueue_styles');
function custom_woocommerce_enqueue_styles($array_styles) {	
   if (is_cart() || is_checkout() || is_account_page()) {
      return $array_styles;
   }
   return array();
}

Sistema de caché

Usarla en un WordPress básico puede resultar muy sencillo, pero implementarla en un sistema Woocommerce puede complicarse dependiendo del funcionamiento de nuestra web o si el stock de los productos se actualiza en sincronía con sistemas externos.

El objetivo del post no es realizar un tutorial de caché, pero vamos a comentar una serie de detalles importantes para configurar W3 Total Caché, que es el sistema que usamos en este tipo de proyectos.

¿Por qué necesitamos un plugin de caché con Woocommerce?

La respuesta a esta pregunta es muy sencilla y lo puedes comprobar fácilmente:

  • Crea un WordPress básico y calcula el tiempo de carga.
  • Instala un Woocommerce encima y vuelve a comprobarlo.
  • Para más detalles puedes usar el plugin de profiling P3

Si has hecho la prueba verás que tu web aumenta considerablemente el tiempo de respuesta del servidor, que no es otra cosa que el tiempo que tarda tu hosting en generar el HTML que se enviará al navegador de tus usuarios. Si sospechas de un hosting malo, te aseguramos que en Cleventy tenemos muy buenas máquinas y aún así se nota la diferencia.

La recomendación es mejorar el código lo máximo posible, por lo que si P3 indica cosas raras en plantillas u otros plugins, lo mejor sería arreglarlo. En el caso de Woocommerce no nos vamos a meter en su implementación, así que la solución es usar una herramienta de caché.

¿Cómo configurar W3TC para Woocommerce?

Hay muchas páginas que explican paso a paso la configuración de W3 Total Cache, así que únicamente vamos a dar un par de pinceladas:

  • En nuestra opinión no merece la pena meterse en temas de caché de objetos, salvo que detectemos que nuestras consultas afectan mucho al tiempo de carga. Por lo general podremos tener decenas de queries en una única página de WordPress, pero si no hay cosas raras, la influencia en el tiempo de carga debería ser casi despreciable. Puedes medirlo con el plugin Query Monitor
  • Importantísimo definir aquellas URL que nunca podrán ser cacheadas como la de carrito o la de checkout. Este tipo de secciones tienen que ser únicas para cada uno de nuestros visitantes.
  • Define correctamente el tiempo que W3TC esperará a marcar una página cacheada como obsoleta. Ten en cuenta que si el período es muy corto y no tienes muchas visitas, el sistema estará mostrando siempre una página sin cachear. Por otro lado, al publicar un nuevo contenido se purgan ciertas secciones, pero no todas, así que la medida debe permitir mostrar los nuevos contenidos con relativa celeridad.
  • Si nuestra tienda online se sincroniza con sistemas externos para la carga de productos o actualización de stock, debemos utilizar en nuestros algoritmos la función w3tc_pgcache_flush_post($postId), que nos permitirá limpiar la caché de un producto en concreto, por ejemplo, para que se vea reflejado el nuevo stock inmediatamente.
  • Podemos limitar la caché de ciertas secciones de la web de forma programática. Mi recomendación es hacerlo también mediante este sistema en el caso de páginas críticas. Simplemente añadiendo esta línea de código al fichero php de la plantilla o plugin que queramos excluir, será suficiente: define(‘DONOTCACHEPAGE’, true);

Otras consideraciones

Además de temas específicos de Woocommerce hay consideraciones generales de WordPress que influyen y afectan al tiempo de carga de nuestra web, como por ejemplo:

  • Dimensiones y tamaño de las imágenes
  • HTML, CSS y JS reducido
  • Carga asíncrona de fuentes
  • Uso de CDN
  • Uso de CSS inline

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

«