Qué es y cómo solucionar el aviso «Defer Parsing JavaScript»

Uno de los errores más comunes que observamos en las herramientas de análisis de optimización web como GTMetrix, Pingdom Tools o Google PageSpeed es el denominado «Defer Parsing JavaScript«, que traducido vendría a ser algo así como «Aplazar la carga de JavaScript«.

Pero primero …

¿Qué es eso de Defer Parsing JavaScript?

La mayoría de los JavaScripts se cargan en todas las páginas de tu web.

Cuando se solicita una página el navegador lee el código, y donde se realice una llamada a un JavaScript, lo ejecuta para obtener los datos en vez de cargar primero los elementos necesarios de la página.

Y es tarea del propietario de la web, o sea tuya, asegurar que todos los contenidos principales se carguen primero, y luego los elementos secundarios como comentarios, botones de compartir, widgets, imágenes, etc.

La idea es cargar primero lo que reclama el lector, tu visitante, que no es ni más ni menos que tu contenido.

Pero resulta que cuando hay JavaScript en el código el navegador va cargando y mostrando lo que contenga el código en el orden en el que se lo encuentre, lo que en muchas ocasiones retrasa la carga del contenido, lo importante.

Además, el JavaScript tiene la manía de cargarse en la cabecera, por lo que casi siempre se cargará antes que tu contenido.

Es por eso que tienes que aplazar la carga/entrega del JavaScript para que se cargue primero el contenido, y luego ya el resto de elementos secundarios.

Así que, cuando revisas tu web en analizadores como Pingdom, GT MetrixGoogle PageSpeed Insights, verás el aviso de error llamado «Defer parsing of javascript«. Si ves este aviso es que deberías hacer algo, y los pasos serían los siguientes.

¿Por qué es importante aplazar la carga de JavaScript?

Importa, y mucho, debido a que Google utiliza la velocidad de carga de las páginas como factor de posicionamiento, y sobre todo porque a los usuarios les encanta que las páginas web carguen rápido ¿verdad?

Google mide la velocidad de tus páginas desde el primer momento en que se la solicita y hasta que la página empieza a cargar. Esto implica que debes conseguir que tu página cargue lo más rápido posible.

Ese tiempo de carga inicial es lo que usa Google, y tus visitantes, para juzgar tu web. De hecho, Google está recomendando activamente que se cargue primero el contenido visible.

Así que si hace que tus visitantes sean felices, y hace feliz a Google ¿no crees que deberías hacer algo?

Cómo aplazar la carga de JavaScript (Defer Parsing Javascript) en WordPress

Lo más inmediato, y que funciona en el 99,99% de los casos es añadir el siguiente código a tu plugin de personalizaciones o al archivo functions.php  de tu tema activo:

// Aplazar JavaScripts
// Aplaza la carga de jQuery usando la propiedad HTML5 defer
if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
        if ( FALSE === strpos( $url, '.js' ) ) return $url;
        if ( strpos( $url, 'jquery.js' ) ) return $url;
        // return "$url' defer ";
        return "$url' defer onload='";
    }
    add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
}

Lo que hace este código es forzar a que los JavaScripts se carguen solamente una vez se haya cargado tu contenido.

Más maneras de aplazar la carga de JavaScript en WordPress

En el improbable caso de que no te funcione el código anterior  hay otras posibles soluciones, a saber…

Añade el atributo ‘defer’ a tus JavaScripts

Solo tienes que añadir el atributo ‘defer ‘ a cada JavaScript de tu código, por ejemplo:

<script type="text/javascript" defer="defer" src="TU_CÓDIGO_AQUÍ"></script>

Y, por supuesto, lo mejor es cargar el JavaScript siempre al fondo del documento HTML (tu web), justo antes de la etiqueta de cierre de body  (</body>) en vez de cargarlos dentro de la etiqueta head , como suele suceder.

Cambiar la ubicación por defecto de JavaScripts de WordPress

WordPress, por defecto, añade todo el JavaScript de su propio núcleo y plugins en la cabecera HTML, usando la función wp_head()  o al final de la página usando wp_footer() .

Y la idea es mover todo el JavaScript en la cabecera wp_head()  al final de la página, en wp_footer() .

Para conseguirlo añade el siguiente código al archivo functions.php  del tema activo o, como siempre, a tu plugin de personalizaciones:

if(!is_admin()) {
    // Movemos todo el JS de la cabecera (header) al pié (footer)
    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    remove_action('wp_head', 'wp_enqueue_scripts', 1);
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_enqueue_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}

Crea un JavaScript aparte

La otra opción es crear un JavaScript separado en el que incluirás todos los JavaScripts que necesites.

  1. Crea un archivo JavaScript en la carpeta de tu tema activo y nómbralo como aplaza.js
  2. En ese archivo mete todos los JavaScripts que necesite tu web, en el orden en el que quieras que carguen
  3. Guarda el archivo y añade el siguiente código antes de la etiqueta de cierre de cabecera (</head> ):
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "aplaza.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

Nota importante. Asegúrate de que el archivo está en la carpeta de tu tema activo, por ejemplo /wp-content/themes/nombre-de-mi-tema/ .

Lo que de verdad importa

El primer y principal factor, tanto para los visitantes como para Google, es entregar el contenido a tus visitantes, y tan rápido como sea posible.

La idea es que tus visitantes no deberían tener que esperar a que se cargue tu contenido hasta que no se cargue el JavaScript.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(18 votos, promedio: 4.9)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

8 comentarios en “Qué es y cómo solucionar el aviso «Defer Parsing JavaScript»”

  1. Hola Fenando,

    este codigo:

    // Aplazar JavaScripts
    // Aplaza la carga de jQuery usando la propiedad HTML5 defer
    if (!(is_admin() )) {
    function defer_parsing_of_js ( $url ) {
    if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;
    if ( strpos( $url, ‘jquery.js’ ) ) return $url;
    // return «$url’ defer «;
    return «$url’ defer onload='»;
    }
    add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );
    }

    Crea conflicto con el plugin AMP.

    Sabes de alguna solución para eso?

    Sería bueno que filtrar para que no modificara los .js de la versión AMP de las páginas.

    Feliz año nuevo.

  2. Oliver Palomares

    Hola Jose M.
    Slider Revolution incluye un apartado llamado «Perfomance
    and SEO Optimization» ahí tienes una opción llamada Lazy Load que te
    permite ver el peso del slider justo cuando va a cargarse la página web.
    Utilizando las diferentes opciones «single, smart o All» puedes reducir
    el tiempo de carga del slider del sitio web. Espero que te sirva.

    Un saludo

  3. Hola! Hice lo que dice el tutorial y sigue apareciendo el cartel de Defer parsing of JavaScript al analizar la velocidad de mi sitio. Qué puedo hacer? Gracias!

  4. Hola Fernando, muchas gracias por este tutorial, yo tengo el defer activo en wp rocket, y me corrigió la puntuación en la pagina principal, las demás paginas de tienda no. Cuando uso la opción que comentas que funciona en el 99,99% de los casos, me funciono! todas las paginas de tienda se les elimina el defer y mejora la velocidad. pero la pagina de inicio se me daña. a que se puede deber?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido