Como cargar los scripts del modo asíncrono en WordPress

Todos los que han chequeado su blog de WordPress en la herramienta de Google Speed, para comprobar su velocidad y optimización, habrán recibido el mensaje similar al siguiente:
Se debe a que WordPress no incluye la propiedad necesaria en los scripts, para que estos carguen sin bloquear, ni perjudicar el rendimiento de las páginas.
En este artículo explico cómo solucionarlo, sin instalar plugins, solo con un sencillo script, que agrega auténticamente la propiedad necesaria a todos los scripts.

¿Por qué es importante el modo asíncrono en los scripts?

Unas de las principales recomendaciones en la web moderna, es usar el modo asíncrono para cargar los elementos externos necesario.
Prácticamente todas las páginas de internet actualmente usan diferentes librerías de JavaScript para ejecutar infinidad de funciones.
Estos archivos con la extensión JS, generalmente se cargan desde sitios externos y pueden afectar el rendimiento
Un script puede bloquear completamente la carga de una página en el navegador y provocar que esta no se muestre, si esta inaccesible por algún problema en el servidor de origen o en la red.

Modos async y defer para cargar JavaScript

Para evitarlo se introdujeron dos propiedades que se agregan en la etiqueta del script.
Son “async” y “defer”.
Le indican al navegador que el script se puede cargar de dos modos diferentes.
Ejemplo de un script con la propiedad async:

<script async src="https://libreria-externa/archivo.js"></script>

Todos los navegadores modernos son compatibles con estos modos.

Agregar automáticamente el modo async a todos los scripts

Las siguientes instrucciones detectan los scripts insertados en la página y le agregan el modo async a la etiqueta,
Se debe introducir en el interior del archivo de configuración “functions.php”, situado en nuestro tema Child o en un plugin personal.
Lee más información en los enlaces anteriores.

// Agregar async a todos los scripts
function js_async_attr($tag){
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Como excluir scripts del modo async

No todos los scripts admiten los modos async o defer.
Algunos de ellos pueden dejar de funcionar, si lo aplicamos globalmente.
Se puede implementar el método anterior y probar todas las funcionalidades de las páginas.
Obtenemos resultados más precisos abriendo en el navegador la consola o herramienta de desarrolladores y caso de que recibamos algún mensaje de error, porque algún script deje de funcionar, podemos usar el siguiente método.
Es similar al anterior, pero en este podemos especificar que a uno o varios scripts no se les debe agregar el modo async.
Usa el siguiente código para implementarlo.

// Agregar async a los scripts, pero excluyendo tres de ellos
function js_async_attr($tag){
$scripts_to_exclude = array('script-name1.js', 'script-name2.js', 'script-name3.js'); 
foreach($scripts_to_exclude as $exclude_script){
	if(true == strpos($tag, $exclude_script ) )
	return $tag;	
}
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Comprobar la mejoría en la optimización

Después de implementar el script, cargar cualquier página del blog en el navegador, usa las teclas Control +U para ver el código fuente y comprueba que ahora todos los scripts usan la propiedad necesaria.
Adicionalmente accede a Google Speed y haz una prueba, para comprobar la mejora en el índice del resultado.
Nota
Actualmente la gran mayoría de scripts que proporciona las redes sociales y otros sitios de internet ya incluyen el modo asíncrono.

Errores del modo async en WordPress 5

Después de actualizar a WordPress 5 el script que recomiendo en esta página no se puede emplear.
Impide el funcionamiento de Tinymce, el software que utiliza el editor de las entradas.
Esto se aplica a los que instalamos el plugin “Classic Editor” para usar el editor anterior de WordPress y no el Gutemberg (editor de bloques) incluido en esta nueva versión.

Más información

Analizar y optimizar una página con PageSpeed
Tiempo de respuesta del servidor y velocidad de las páginas

Otras páginas relacionadas

✓ Como modificar y personalizar mi tema de WordPress
✓ Como usar y configurar WordPress sin plugins
✓ Convertir los enlaces externos en NoFollow en WordPress


Comparte

Sígueme en las redes sociales