Agregar atributos async y defer en WordPress

1 de /marzo03 de /2020
1m 4s
wordpress
0 comentarios
3974

Las etiquetas script son unos de los recursos más comunes que bloquean renderizado de un proyecto en WordPress, los atributos async y defer fueron introducidos en Html5 para optimizar la carga de estos recursos, de modo que podemos cargar el script de de forma asíncrona con async o utilizar defer si el script es dependiente de otros scripts o no interacciona con el dom antes de terminar la carga de jQuery.

Si has encolado correctamente tus scripts a WordPress, la forma de añadir atributos a las etiquetas script se realiza haciendo un add_filter() sobre la función script_loader_tag() de WordPress y pasándole en un array los handles de los scripts que quieres modificar.

function my_async_scripts( $tag, $handle, $src ) {
    $async_scripts = array( 'scripts', 'mas-scripts' );
    if ( in_array( $handle, $async_scripts ) ) {
        return '<script async defer src="' . $src . '"' . "\n";
    }
    return $tag;
}
add_filter( 'script_loader_tag', 'my_async_scripts', 10, 3 );

Valoraciones

Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Quizás te interese ...

Utilizamos cookies para mejorar tu experiencia

Utilizamos cookies propias y de terceros para personalizar el contenido, analizar nuestros servicios, ofrecer funciones de redes sociales, analizar el tráfico y mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación.

Permitir todas las cookies Configurar Política de cookies