Aplazar la carga de JavaScript en WordPress

Si utilizamos la herramienta PageSpeed Insights de Google para analizar nuestro WordPress es bastante probable que entre los elementos a corregir se encuentre el siguiente:

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

¿Qué significa esto?

En nuestra web se cargan archivos CSS para dar estilo a las páginas y archivos Javascript para generar elementos dinámicos, entre otras cosas. Normalmente, este tipo de archivos se sitúan en la cabecera de la web, por lo que el navegador cargará estos contenidos antes que el código de la propia página, provocando una mayor espera hasta que se muestren contenidos en el navegador.

Para solucionar esto Google recomienda colocar solo en la cabecera el código Javascript y CSS que se vaya a utilizar en la página que se muestra o realizar una carga aplazada del código. La primera opción es poco viable en WordPress, ya que resultaría muy complicado averiguar el código concreto que se carga en cada página, pero sí que se puede hacer algo con la carga aplazada.

Aplazar la carga de CSS

En primer lugar, la carga aplazada de las hojas de estilo CSS no es recomendable ya que, de hacerlo, la página se mostrará inicialmente sin diseño alguno, para pasar a maquetarse al finalizar la carga, lo que suele provocar un efecto extraño en la carga.

Aplazar la carga de JavaScript (JS)

La carga aplazada de Javascript sí se puede probar, teniendo en cuenta que esta carga aplazada en ocasiones puede generar problemas en la web, en especial si estamos usando plugins con funcionamiento dinámico como galerías de imágenes, o el propio tema de WordPress cuenta con esos elementos. Por tanto, se puede probar la carga aplazada, y solo en caso de que veamos que todo sigue funcionando bien en la web deberemos dejarla activada.

La primera manera de lograr esa carga aplazada de Javascript consiste en agregar el siguiente código al archivo functions.php del tema que estemos utilizando:

function footer_enqueue_scripts() {
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);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

Para comprobar si el código aplicado ha funcionado podemos cargar nuestra web y ver el código fuente, para analizar si los archivos .js se cargan al final. Hay que tener en cuenta que no necesariamente todos los archivos .js se moverán al pie de la web.

Si no queremos modificar el código existen diversos plugins para WordPress que también sirven para aplazar la carga de Javascript al pie de la web.

Una opción sería el plugin JS & CSS Script Optimizer. Una vez instalado veremos en el apartado Ajustes la opción Script Optimizer.

Aquí podremos configurar algunos aspectos del funcionamiento del plugin: combinar archivos Javascript y CSS en un único archivo, agregar excepciones a la optimización, etc.

De esa forma, en caso de que haya problemas tras la activación del plugin siempre podemos aplicar cambios en la configuración para ver si se soluciona el problema.

Existen otros plugins que sirven para hacer lo mismo, con más o menos opciones añadidas: Scripts to Footer, JavaScript to Footer, JCH Optimize, etc.

Carga asíncrona de JavaScript (JS)

Otra forma de aplazar la carga del Javascript o CSS es hacer una carga asíncrona en paralelo al resto de contenidos de la web, en lugar de hacer una carga de forma secuencial (unos elementos detrás de otros).

Para ello, podamos utilizar un plugin como el Async JS and CSS. Este plugin también añade dentro de Ajustes la opción Async Settings, donde podremos configurar el funcionamiento del plugin: elementos a cargar de forma asíncrona, método de carga de los CSS, etc.

Siempre haz pruebas

Recordar de nuevo que en caso de probar cualquiera de estos plugins o modificaciones en el código tendremos que hacer pruebas en el frontal de la web para verificar que todo sigue funcionando como debiera.

En caso de que surjan problema es preferible no aplazar la carga de Javascript y CSS.

También es importante reseñar que esta carga aplazada no siempre se tiene que traducir en una mejora en la puntuación que obtengamos en PageSpeed, pudiéndose dar el caso de que incluso la nota baje.

Para tales casos también será conveniente desactivar estos plugins.

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

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

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

13 comentarios en “Aplazar la carga de JavaScript en WordPress”

  1. Pingback: Acelera tu web moviendo todo el JavaScript al final | Ayuda WordPress

  2. ivan carreño

    hola el codigo funciona pero me elimina el slide que esta en el comienzo de la pagina, hay alguna forma de mantenerlo???

  3. Pingback: Activando la carga asíncrona para mejorar la velocidad de tu web

  4. Aunque el tema es antiguo, debo añadir información que quizás no sea del agrado de todos, pero es prácticamente un hecho: Llevo unos días trabajando en la optimización de las páginas alojadas en mis servidores porque la mayoría de WordPress no pasa de 60 en el test de PageSpeed de Google (a pesar de recibir buenos resultados en Pingdom), cual es mi sorpresa que la misma página de wordpress.org recibe una puntuación de 67 (analizando la home, obviamente), siendo una página que no cuenta con plugins que retrasan la carga de contenidos como slider, galerías de imágenes, formularios de contacto, etc. De hecho, solo recomienda retrasar la carga de la librería jquery y 4 hojas de estilo, lo que indica que está muy bien optimizada, sin contar la infraestructura que hay detrás, y, aun así, no pasa de 67.

    Tomando este simple – pero aplastante – dato como referencia tengo que dar por hecho que es muy difícil por no decir imposible que al menos en estos momentos una página funcionando en WordPress supere esos 67 puntos en el PageSpeed de Google por mucho que trabajemos en la optimización y retraso en la carga de contenidos, algo que ya sea mediante plugins o desde el archivo functions se obtiene los mismos resultados si utilizamos ciertos plugins (por mencionar algunos de los que yo utilizo, Master Slider y Global Gallery) ya que se pierden dependencias.

    Un punto a favor de WordPress, es que el PageSpeed de Google para medir la velocidad de carga no toma en cuenta un punto tan básico como esencial, que es ni más ni menos el tiempo de carga; no es normal que una página en WordPress tarde 1,2 segundos en cargar y aun así saque una nota tan baja mientras que otras páginas que trabajan en CMS como DNN (ASP) cargan en 3,2 segundos (más del doble) y obtengan una nota más alta en el PageSpeed solo porque Google insiste que debes retrasar la carga de JS y CSS aunque no sea realmente necesario porque la carga ya es rápida.

    Para no hacer el cuento más largo, midan el rendimiento en Pingdom porque el PageSpeed es MUY engañoso.

    Saludos!

      1. Mil disculpas porque me falto especificar que la puntuación a la que me refería era de la versión móvil que es la que aparece en primer lugar y por volumen de visitas (en mi caso claro, tampoco quiero generalizar) es la que tomo más en cuenta; la versión móvil en la página de servicios.ayudawp.com también es de 66 al momento de escribir este mensaje, lo cual indica que está bastante bien optimizada, pero es lo que no se me hace injusto, que uno tenga una página bien optimizada (igual no perfecta, pero al menos decente), que cargue rápido en otros test como pingdom y llegue Google ¡y toma! Y luego veas ahí páginas de Blogspot con notas más altas que cargan en el doble de tiempo, aparte de ser muchísimo más simples por supuesto, que no lo digo por ofender a nadie y espero que nadie se sienta ofendido, pero conseguir una apariencia realmente profesional con una página de Blogspot sencillamente no es posible.

        Saludos!

  5. Pingback: Acelera tu web moviendo todo el JavaScript al final

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