Como cargar los scripts del modo asíncrono en WordPress

Como agregar la propiedad async a las etiquetas de todos los scripts, para que carguen gradualmente y no afecten la estabilidad y optimización del sitio.

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:

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Tu página tiene 7 recursos de secuencias de comandos y 2 recursos CSS que provocan un bloqueo. Ello causa un retraso en el procesamiento de la página.
No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos. Intenta aplazar o cargar de forma asíncrona los recursos que bloquean la visualización.

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.

– El modo async indica que el archivo se debe cargar de forma asíncrona o paralela a otros recursos de la página.
– El modo defer indica que el archivo se debe cargar solo después de concluir la carga de los restantes elementos.

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.

La implementación de este método no promete más velocidad ni rendimiento, pero si asegura mayor estabilidad y por lo tanto una mejor optimización del sitio.

Nota
Actualmente la gran mayoría de scripts que proporciona las redes sociales y otros sitios de internet ya incluyen el modo asíncrono.

Más información

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

Estoy en: NorfiPC | Notas | WordPress | Como cargar los scripts del modo asíncrono en WordPress



Páginas relacionadas

Buscar con Google