Optimizar la carga de Javascript en WordPress con Async y Defer

En este artículo veremos la optimización de la carga de archivos Javascript en WordPress haciendo uso de los atributos async y defer. Veremos cómo realizarlo directamente a través de código.

Generalidades

En WordPress, debido a la cantidad de plugins, tenemos muchas veces que cargar muchos archivos Javascript, sin embargo estos no siempre son necesarios para la visualización del sitio, por lo que podemos posponer su carga.

<script>

En el siguiente esquema vemos la carga de archivos scripts por defecto, como podemos observar se empieza cargando el HTML, pero luego hay una pausa para poder cargar el archivo javascript, y una vez cargado se ejecuta, luego sigue la carga de HTML.

<script async>

Si usamos el atributo async, optimizamos un poco la carga HTML, ya que se seguirá cargando mientras también se carga el archivo javascript, sin embargo se pausará la carga de HTML para realizar la ejecución, para finalmente seguir la carga de HTML.

<script defer>

Si usamos el atributo defer, no interrumpimos la carga HTML, la descarga del archivo javascript se realiza igualmente cuando el HTML se esta cargando, pero la ejecución de javascript se realiza al final de la carga.

Agregar el atributo async o defer en la carga de scripts

Para aplicar el siguiente código tienes que detectar con que handle o identificador se han registrado los scripts que quieres diferir la carga (Tienes que remplazar xxx o yyy)

add_filter('script_loader_tag', 'dcms_defer_javascript', 10, 2);
function dcms_defer_javascript($tag, $handle){
	
	$defer_handles = ['xxxx', 'yyyy'];

	if ( in_array($handle, $defer_handles) ){
		return str_replace( ' src', src', $tag );	
	}
	return $tag;
}

 
En el código anterior:

• Usamos el Hook de filtro script_loader_tag que hace referencia a la función dcms_defer_javascript
• En la función usamos dos parámetros: para el HTML generado y para el identificador del script
• En el array $defer_handles, establecemos los handles que queremos diferir
• Si se cumple la condición entonces inyectamos en el HTML, agregando el atributo correspondiente, ya sea defer o async

Conclusión

Como has podido comprobar puedes optimizar la carga de scripts directamente a través de código inyectando el atributo de async o defer al HTML generado.