Carga asincrónica de elementos en Wordpress.

El concepto de carga asincrónica, viene a significar relentización de carga en según qué elementos y herramientas de nuestro wordpress-site. En principio se utiliza esta técnica para secuenciar cargas y desarrollos de plugins y herramientas de nuestra web. La idea básica es que no coincidan todos en el momento crítico de la carga de página inicial, dejando así que la carga de dichos elementos sea secuencial en el tiempo y no concentrada solamente en un solo instante, evitando mermas de velocidad en carga y desarrollo.

Carga asincrónica de elementos en Wordpress.

Si existe una crítica más o menos fundamenta en referencia a los sitios dinámicos wordpress, es precisamente el gran número de elementos y herramientas que se necesita para generar y dejar operativo este gestor de contenido dinámico.

Mejorar la velocidad mediante la carga asincrónica de los elementos

Hablamos de elementos internos o de servidor como PHP, y múltiples bases de datos (en forma de MySQL) que vienen por defecto en la raíz de nuestro wordpress-site y las que añadimos nosotros posteriormente con la personalización de nuestra web. En este caso, las soluciones para la optimización de nuestro site vienen determinadas por las propias características del soporte hosting contratado: capacidad de disco, naturaleza del mismo, memoria RAM, etc

Por otro lado existen aquellos elementos o herramientas de página o externos. Son los que instalamos para personalizar nuestra página wordpress. Me refiero a widgets y plugins, que si bien, pueden parecer elementos sencillos con unas funcionalidades excepcionales, en realidad algunos presentan código JavaScript. En este punto conviene señalar que no es una cuestión de peso de las herramientas, aunque también puede influir; lo esencial es que en una orden de carga de página, por defecto todos estos elementos externos tratan de cargar su funcionalidad, a través del código, a la vez.

Es evidente que solo debemos tener instalados y operativos en una página única y exclusivamente aquellos plugins indispensables, aún y así, si hemos desarrollado un sitio más o menos dinámico y funcional podemos tener bastante de estos elementos intentando cargar en un mismo instante. Ello puede provocar, además de una pérdida de velocidad de carga, que todo nuestro web-site entre en crisis, incluso puede provocar una caída de la página.

En este caso y para solventar tan serio problema, podemos optar por un aplazamiento de carga de elementos JavaScript, aunque esta opción es poco recomendable ya que puede provocar serios daños al funcionamiento de nuestra web.

Por otro lado y esto es lo verdaderamente aconsejable, podemos optar por una opción de carga asincrónica mediante la instalación de plugins. Es evidente, con este tipo de acción, lo que logramos es una carga lineal y pausada de todos los elementos externos o herramientas de wordpress. Existen unas preferencias de carga, de este modo primero se cargarán los elementos prevalentes (sean Java o CSS) y cuando uno termina de cargarse, comienza otro y así sucesivamente, de manera que evitamos la sobrecarga.

Las mejores plugins para realizar la carga asincrónica

En principio se pueden utilizar determinados plugins, los llamados de carga asincrónica, que evitan que todas las herramientas tengan orden de carga en un solo instante. Se enumerarán tres de los más funcionales:

  1. Async CSS. Este pluging se encarga específicamente del período de carga en el código CSS: viene a determinar la prevalencia y el tiempo de carga. El procedimiento es sencillo: primero se determina una hoja de estilos básica que cargará la primera (en modo sincrónico), para más tarde dar paso de carga a otros elementos CSS determinados como secundarios en forma de carga asincrónica. Elementos CSS secundarios pueden ser elementos como iconos, transiciones y determinadas fuentes.

  2. WP Deferred Js. Como se puede intuir, esta herramienta se define la carga asincrónica de elementos JavaScript ubicados en wp_localize_script(…).js de la raíz de nuestro sitio.

  3. CSS and JS Script Optimizer. Este plugin gratuito asume las funcionalidades de los dos anteriores. Además presenta mejoras como:

  • Unifica varios scripts en uno.

  • Combina y unifica varios elementos CSS agrupándolo según características y naturaleza.

  • Sintetiza determinados Scripts en función de su carga y su prioridad.

  • Optimiza CSS: elimina los comentarios, las tabulaciones o los espacios vacios que pueden existir en nuestro CSS

  • Dispone todo el Script de las herramientas para su carga en último lugar, y de manera asincrónica.

  • Diremos, a modo de colofón, que la carga asincrónica de elementos ayuda en gran manera a generar una web navegable y eficiente, reduciendo no solo los tiempos de carga, sino que también los tiempos en ejecución de distintas herramientas gracias a la compilación y simplificación de código y órdenes de carga.

Carlos Yáñez del Pino

Carlos Yáñez del Pino, Ingeniero en informática de sistemas (Escuela Superior de Informática)

Hace mas de 10 años que me dedico al mundo del SEO, como ingeniero en informática de sistemas. He participado en proyectos de todo tipo , desde pymes, tiendas virtuales, hasta proyectos con un gran volumen de tráfico (varios millones de visitas al mes), como podéis apreciar en mis Casos de Éxito. Me ha proporcionado un alto grado de conocimientos teóricos y prácticos en el SEO. Estoy especializado principalmente en el SEO Técnico, optimización SEO y la creación de estrategias en marketing de contenidos.

Rating 4.7/5(15 valoraciones, para valorar debe estar registrado)