¿Cómo puedo diferir estos archivos JS?

Question

¿Cómo puedo diferir estos archivos JS?

19 dic 2018, 09:06:39

Vistas: 3.19K

Votos: 1

En mi sitio web, utilicé GTmetrix y obtuve un error de deferencia JS en los siguientes dos archivos.

92.5KiB de JavaScript se analiza durante la carga inicial de la página. Diferir el análisis de JavaScript para reducir el bloqueo de la representación de la página.

http://mysite.url/wp-includes/js/jquery/jquery.js?ver=1.12.4 (87.0KiB)

http://mysite.url/ (5.5KiB de JavaScript en línea)

En mi archivo functions.php tengo el siguiente código para diferir los js pero parece no afectar a los archivos js fuera de la carpeta del tema.

Aquí está mi fragmento de código en el archivo functions.php

if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // devolver "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

¿Cómo puedo eliminar ese error y diferir el análisis de los elementos mencionados anteriormente?

Vishwa

376

personalización desarrollo de temas jquery incluir

Todas las respuestas a la pregunta

vikrant zilpe 478 · Accepted Answer · 2018-12-28T07:51:13Z

¿Qué son los atributos Async y Defer?

A continuación, se explica lo que hacen los atributos async y defer:

Atributo Async: El atributo async carga el script de forma asíncrona. En otras palabras, asegura que el script se cargue asíncronamente junto con los demás contenidos de la página, después de lo cual se ejecuta.

Atributo Defer: El atributo defer retrasa la carga del script. Asegura que el script se ejecute solo después de que todos los contenidos de la página hayan terminado de cargarse.

Ambos atributos son ampliamente compatibles con todos los navegadores modernos, incluidos Firefox, Chrome e Internet Explorer. Internet Explorer ha agregado soporte para estos atributos desde IE10.

Un ejemplo de una etiqueta script con los atributos async y defer es el siguiente:

<script src='http://sitename.com/js/scripts.js' async='async' type='text/javascript'> 
</script>
<script src='http://sitename.com/js/scripts.js' defer='defer' type='text/javascript'> 
</script>

Función para agregar atributos 'Async/Defer' a tus scripts bloqueantes de renderizado En este artículo, vamos a ver tres métodos diferentes para agregar estos atributos a tus scripts de JavaScript que bloquean el renderizado. Estos métodos son los siguientes:

Método 1: Agregar defer/async a todos los scripts sin excepción. Método 2: Agregar defer/async a todos los scripts con excepción de algunos. Método 3: Agregar defer/async solo a scripts selectivos. (Método más flexible ya que te permite agregar async a algunos scripts y defer a otros.) Puedes usar cualquier método que se adapte a tus necesidades.

Método 1: Agregar Async o Defer a Todos los Scripts

Si deseas agregar el atributo async o defer a todos los scripts sin excepción, puedes usar el siguiente código.

Abre el archivo functions.php de tu tema y agrega este código al final del archivo.

/*función para agregar async a todos los scripts*/
    function js_async_attr($tag){

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

Para más información, consulta el enlace https://orbitingweb.com/blog/add-defer-async-attributes-to-scripts-in-wordpress/