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:

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:

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:

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> ):

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 este artículo para mejorar la calidad del blog ...

PobreRegularEstá bienMuy buenoExcelente (7 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad
  • 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.

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar