WooCommerce es sin duda el plugin más popular para hacer tiendas online con WordPress. Actualmente la inmensa mayoría de Ecommerce en WordPress usan WooCommerce, y en este blog me gusta compartir maneras de mejorarlo, o solucionar problemas, como es el caso de hoy.
Hace poco en el Ecommerce de un cliente, tras realizarle una prueba de rendimiento y velocidad, descubrí que había algo llamado wc-ajax=get_refreshed_fragments que tardaba más de un segundo en cargar.
Tras analizarlo más en conciencia me sorprendió ver que en la mayoría de las ocasiones era incluso peor, llegando a tardar en cargar entre 5 y 10 segundos, algo inaceptable en una tienda online.
Y tras mucho buscar, como siempre, aprendí bastante sobre este complemento de WooCommerce y de cómo arreglar el problema de los excesivos tiempos de carga del mismo. ¿Lo vemos?
Índice de contenidos
¿Qué es wc-ajax=get_refreshed_fragments?
Tengo que reconocer que me costó bastante entender esto de los fragmentos actualizados invocados por WooCommerce y, como mis webs están alojadas en SiteGround, el impacto era menor que en otros sitios de clientes, pues en mis Ecommerce solo provocaba un retardo alrededor de un segundo.
Y no es que no sea nada, que 1 segundo de retraso por una sola llamada es para tenerla en cuenta, pero no es lo mismo si usas un hosting con suficientes recursos y optimizaciones que si estás en un alojamiento de amplio espectro (siendo generoso), donde los tiempos de carga subían desde 3 hasta 10 o más segundos.
Básicamente, lo que pasa es que WooCommerce trata de recopilar los detalles del carrito de compra llamando al script, y le lleva mucho tiempo realizar esta tarea.
WooCommerce extrae los detalles del carrito sin caché en cada página para mostrar los últimos elementos del carrito haciendo una llamada a Admin Ajax.
Podrás ver el script más o menos como en el código siguiente en cada página de tu sitio:
<script type='text/javascript'>
/* <![CDATA[ */
var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View Cart","cart_url":"http:\/\/localhost\/shop\/cart\/","is_cart":"","cart_redirect_after_add":"yes"};
/* ]]> */
</script>Llamadas a Admin Ajax y carga de página
WooCommerce utiliza la llamada Admin Ajax de fragmentación del carrito para actualizar los elementos y el total del carrito sin que tengas que recargar la página.
Pero las llamadas a Admin Ajax en cada página retrasan los tiempos de carga de página de manera considerable, además de consumir enormes recursos del servidor.
El otro problema es que WooCommerce hace esto en cada página, aunque no haya carrito o detalles de productos. Debido a esto se ralentiza la carga en todas las páginas de tu web, aunque no tengan nada relacionado con la tienda online.
Así que no sirve de nada quitar el carrito de una página, los tiempos de carga seguirán igual de mal. Lo que hay que hacer es desactivar la actualización del carrito cuando no hay carrito o no se muestran productos.
¿Vemos como hacerlo?
Cómo solucionar el problema con wc-ajax=get_refreshed_fragments?
El problema se soluciona sacando el script de la cola (de-enqueuing) en el archivo functions.php de tu tema hijo o en tu plugin de utilidades.
Hay tres opciones para sacar de la cola el script de fragmentación del carrito del Ajax de WooCommerce:
- Desactivar la fragmentación del carrito solo en la portada de tu sitio
- Desactivar la fragmentación del carrito en la portada y en las entradas
- Desactivar todos los estilos y scripts de WooCommerce en todas las páginas excepto en las que sean estrictamente de la tienda
Veamos las tres opciones en detalle, pero aplica solo una de ellas, la que mejor se adapte a tu sitio.
Desactivar la fragmentación del carrito solo en la portada de tu sitio
Desde tu cliente FTP favorito o en el panel de tu hosting localiza el archivo functions.php del tema hijo o tu plugin de utilidades y añade este código al final del archivo:
/** Desactiva llamadas Ajax de WooCommerce en portada de la web */
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }Cuando guardes los cambios en el archivo ve a WooCommerce > Ajustes > Productos > General, activa la casilla «Redirigir a la página del carrito tras añadir productos con éxito» y desactiva la de «Activar botones AJAX de añadir al carrito en los archivos».
Esto ayudará a tus clientes a ir a la página del carrito en vez de tener que esperar un montón de tiempo una vez añada un producto al carrito.
De lo contrario, aunque añada un producto, puede que tu carrito no muestre los detalles, al estar en la misma página en la que se ha desactivado el script de fragmentación.
Desactivar la fragmentación del carrito en la portada y en las entradas
El código anterior desactivaba el script de fragmentación del carrito solo en la portada. Si quieres desactivarlo también en todas las entradas entonces usa este otro código:
/** Desactiva llamadas Ajax de WooCommerce en portada y entradas*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11);
function dequeue_woocommerce_cart_fragments() {
if (is_front_page() || is_single() ) wp_dequeue_script('wc-cart-fragments');
}Desactivar todos los estilos y scripts de WooCommerce en todo el sitio
WooCommerce es un plugin que consume muchos recursos del servidor, pues tiene que cargar un montón de hojas de estilos y scripts.
Si tienes pocos productos pero cientos de publicaciones en el blog, varias páginas y más contenidos, entonces tiene todo el sentido desactivar todo lo que tenga que ver con WooCommerce en todas las partes de tu sitio que no tengan nada relacionado con la tienda online.
De este modo ayudarás a que todas esas entradas y páginas de tu sitio, incluida la portada, carguen mucho más rápido.
Para este cometido tienes el siguiente código:
/** Desactiva todos los scripts y estilos de WooCommerce excepto en las páginas de la tienda*/
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_styles_scripts', 99 );
function dequeue_woocommerce_styles_scripts() {
if ( function_exists( 'is_woocommerce' ) ) {
if ( ! is_woocommerce() && ! is_cart() &&! is_account_page() && ! is_checkout() ) {
# Styles
wp_dequeue_style( 'woocommerce-general' );
wp_dequeue_style( 'woocommerce-layout' );
wp_dequeue_style( 'woocommerce-smallscreen' );
wp_dequeue_style( 'woocommerce_frontend_styles' );
wp_dequeue_style( 'woocommerce_fancybox_styles' );
wp_dequeue_style( 'woocommerce_chosen_styles' );
wp_dequeue_style( 'woocommerce_prettyPhoto_css' );
# Scripts
wp_dequeue_script( 'wc_price_slider' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-add-to-cart' );
wp_dequeue_script( 'wc-cart-fragments' );
wp_dequeue_script( 'wc-checkout' );
wp_dequeue_script( 'wc-add-to-cart-variation' );
wp_dequeue_script( 'wc-single-product' );
wp_dequeue_script( 'wc-cart' );
wp_dequeue_script( 'wc-chosen' );
wp_dequeue_script( 'woocommerce' );
wp_dequeue_script( 'prettyPhoto' );
wp_dequeue_script( 'prettyPhoto-init' );
wp_dequeue_script( 'jquery-blockui' );
wp_dequeue_script( 'jquery-placeholder' );
wp_dequeue_script( 'fancybox' );
wp_dequeue_script( 'jqueryui' );
}
}
}Lo primero que hace el código es comprobar si tienes activo el plugin WooCommerce y luego desactiva scripts y estilos en todas las páginas excepto en las de productos, carrito y pago.
¿No hay un plugin que haga lo mismo?
Vale, sí, lo hay, pero más limitado.
Si no te sientes cómodo editando archivos y añadiendo códigos puedes instalar y activar el plugin Disable Cart Fragments.
No hay en principio nada que configurar si lo que quieres es el tercer método, el que desactiva los estilos y scripts de WooCommerce en todas las partes que no tengan algo de tienda.
Ahora bien, si lo prefieres, puedes añadir una constante en el archivo wp-config.php, para indicar en qué entradas o páginas (mediante sus ID) no quieres que se carguen estilos y scripts, así:
define('DISABLE_CART_FRAGMENTS', '123,456,789');Ah, y recuerda cambiar los ajustes de comportamiento al añadir productos al carrito en los ajustes de WooCommerce como vimos antes.
¿Se pueden reducir aún más las llamadas Ajax?
Pues sí, y es algo que no he comentado nunca. Resulta que todas esas cajas del escritorio de WordPress que muestran estadísticas de venta, valoraciones y demás usan llamadas Ajax para mostrar el contenido dinámicamente, igual que hace la fragmentación del carrito.
La solución a esto es reducir las consultas o desactivar la Heartbeat API, bien con mi plugin WPO Tweaks o con este truco que ya publiqué hace tiempo.
Reducirás el consumo de recursos de tu servidor y mejorarán los tiempos de carga de tu sitio.
Revisa, comprueba, analiza
No se te olvide, tras cada modificación, comprobar en tu herramienta de optimización o velocidad favorita los tiempos de carga, para comprobar si mejoran.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Carga antes, pero se te olvido añadir el apartado mi cuenta y pues ese apartado carga mal
Añádele en la línea de los condicionales is_account_page
He estado haciendo pruebas, en una tienda normal y va más lenta al navegar por las opciones de woocommerce, al entrar por ejemplo al apartado tienda carga más lento, pero lo que son entradas, paginas y demas carga más rápido
Este codigo funciona bien en una web que sea tipo a esta, ya que el contenido de la web va mas rapido.
Estaría bien que lo añadieras como una opcion en tu plugin WPO. Un saludo y gracias crack.
Hola muy interesante el articulo me está ayudando bastante , estoy trabajando con mi primera web y me encuentro en el punto de cómo solucionar la carga lenta a causa de wc-ajax , en mi caso no tengo habilitadas las compras , solo lo uso a modo de catálogo, ¿se podría aplicar a todas las paginas de la web?incluidas las de tienda y productos .
Hola Fernando,
que magnífico artículo. A mi me interesaría anular la llamada, en las página, entradas, etc.., que no pertenecen a la tienda excepto en la Home page, ya que mi plantilla (storefront), hace uso de esa llamada porque el carrito en el header se despliega y te da la opción de ir directamente al checkout. Lo que ocurre es que no se la línea o parte de esta que tengo que borrar para implementar el 3º código que pusiste pero haciendo excepción en la página de inicio.
Un saludo.
Lo debería anular, pero siempre puedes añadir is_home al condicional
Muchas gracias!!
Hola Fernando, muy bueno el post, sabes como arreglar el error siguiente? Me estoy volviendo loco. Cuando vas a pagar se va la pantalla hacia arriba como recordandote que falta un campo por rellenar pero esta todo ok.
?wc-ajax=checkout 500
Como estas Fernando. Un gusto saludarte. Estaba observando en mi tienda con woocommerce que el proceso de agregado a carrito es muy lento. Aprietas el botón «agregar a carrito» y demora muchísimo.
Tienes alguna sugerencia?
Quedo atento
Gracias