Activando la carga asíncrona para mejorar la velocidad de tu web

¿Carga tu web excesivamente lenta o no carga todo lo rápido que quisieras? Hay muchos posibles aspectos que afectan negativamente a la velocidad de carga de una web,  y una pueden ser los plugins, o el modo en que se ejecutan.

De hecho hay muchos plugins WordPress que usan JavaScript y, salvo que hagamos algo al respecto, todos ellos intentan cargar su código de inmediato en cuando se accede a tu sitio.

De hecho este problema es fuente de muchos de los avisos de optimización WPO necesaria que nos suele recomendar el servicio Google PageSpeed Insights, que tanto nos trae de cabeza, y lo que nos espera.

El modo de evitar esta carga masiva y sin control, que puede ralentizar la velocidad de visualización de tu contenido, lo que realmente importa, sería forzar la carga asíncrona de los mismos, algo que puede reducir los tiempos de carga.

Hace tiempo hablamos de cómo aplazar mediante código la carga de JavaScript, hoy vamos a darle una segunda vuelta con algunos plugins, sí plugins, que nos darán mayor control sobre este problema.

Pero ¿qué es eso de la carga asíncrona?

En realidad es un concepto bastante sencillo. Cuando aplicas la carga asíncrona lo que haces es controlar que no haya una carga al unísono de códigos, sino secuencial.

O sea, que en vez de cargar todo de golpe, a la vez, cada código cargado de modo asíncrono espera a que termine de cargarse un elemento (JavaScript o CSS) antes de empezar a cargar el siguiente.

En esta imagen creo que se ve de manera sencilla…

Y como los plugins, en general, no saben si vas a usarlos en conjunción de otros se dan la máxima prioridad y cargan «lo suyo» sin esperar a otros. Lo que consigues sin carga asíncona es un cuello de botella en la carga de tu web con todos los códigos queriendo cargarse al unísono.

Afortunadamente hay modo de poner orden en este embrollo, y nos vamos a ayudar de algunos plugins para ello.

Plugins de carga asíncrona

Async CSS

La función de este plugin es definir qué CSS se carga y en qué momento para organizar el tráfico de este código en tu web.

Se suele utilizar para cargar tu hoja de estilos principal de modo síncrono y luego elegir qué archivos CSS no vitales se cargarán después, de manera asíncrona. Por archivos CSS no vitales me refiero a fuentes, iconos, CSS de plugins, etc.

WP Deferred JavaScripts

Este plugin se ocupa de retrasar la carga de todos los JavaScripts añadidos mediante wp_enqueue_script(). El resultado es una mejora significativa de los tiempos de carga.

Es compatible con todas las funciones JavaScript de WordPress (wp_localize_script(), js en la cabecera, en el footer…) y funciona con todos los plugins que estén medianamente bien programados, que usen funciones estándar de WordPress.

Funciona con activar y listo, pero hay una serie de parámetros que puedes aplicar.

JS & CSS Script Optimizer

Esta virguería de plugin hace muchas cosas, y buenas, por ti:

• Agrupa varios scripts en uno solo para minimizar las peticiones http
• Combina varios archivos CSS agrupándolos por tipo de medio
• Enpaqueta los scripts usando el Dean Edwards’s JavaScript Packer
• Minimiza los archivos CSS, o sea, borra comentarios, tabulaciones, espacios, saltos de línea, etc.
• Pone todo el JavaScript para que cargue al final de tu página

Y además es compatible con WordPress Multisitio.

¿Funciona? te preguntarás. Echa un vistazo a resultados de YSlow antes y después de tener el plugin en marcha…

Plugins para compartir en redes sociales

Mención especial merecen los plugins de iconos para compartir en redes sociales, porque todos tenemos instalado alguno y, especialmente, porque suelen ser enormes granos en el culo en lo que a optimización de rendimiento y velocidad se refiere.

Sí, esos pequeños botones son grandes generadores de peticiones, enormes consumidores de recursos y fuente de muchos problemas en lo que se refiere a WPO.

Hay varios por ahí que declaran realizar la carga asíncrona, como Async Social Sharing o el popular AddToAny, pero salen tan mal parados en general en las pruebas de rendimiento que casi estropean más que lo que en teoría podrían aportar con su carga asíncrona.

Mi consejo en este sentido es que uses la maravilla de Monarch, que no solo resultó ganador en los tests de rendimiento sino que además puedes configurarlo totalmente según tus necesidades.

¿Que no me haces caso? Vale, entonces al menos usa uno que te permita no mostrar la cantidad de veces que se ha compartido algo, o que puedas modificarlo en este sentido, ya que esta pequeñez duplica las peticiones de cada una de tus páginas, por lo menos.

¿Dudas, opiniones?

Este es tu blog, yo he abierto la conversación y aportado algo de información y consejos, espero que útiles, pero si tienes algo que contarnos, discutirme, o aportar, ahí tienes los comentarios.

¿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 :)