Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
google pagespeed insights

Mejora la puntuación de Google PageSpeed Insights: Eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página

Sexta entrada sobre cómo mejorar la puntuación en PageSpeed Insights. En esta ocasión hablaremos sobre cómo eliminar el JavaScript que bloquea la visualización del contenido de la mitad superior de la página.

Los archivos JS deben cargarse en el footer, justo antes del cierre de la etiqueta </body>.

Cuando un navegador carga una página web, los recursos JavaScript y CSS normalmente impiden que se muestre la página web hasta que se descarguen y procesen por el navegador. Algunos recursos deben ser descargados y procesados antes de mostrar cualquier elemento. Para obtener la experiencia más rápida posible para sus usuarios, es necesario cargar los scripts al final del documento, justo antes del cierre.

Para conseguir esto, cuando estemos desarrollando un tema o plugin deberemos cargar los ficheros JS de la siguiente forma:

Estableciendo el último parámetro $in_footer a true.

¿Qué pasa si estamos utilizando plugins que cargan archivos JS en el head? Debemos añadir una función más para mover los scripts del head al footer de nuestro sitio:

Con todo esto conseguiremos que nuestros scripts estén en el footer, por lo tanto no bloquearemos la carga de contenido y aprobaremos este punto en PageSpeed.

 

Atributo ‘async’

Si no indicamos nada el script se ejecutará inmediatamente, bloqueando el parseo del resto del documento.

El atributo async se introduce en HTML5 para indicar que el script debe cargarse de forma asíncrona, es decir, sin bloquear la presentación del resto de elementos del contenido, y debe ejecutarse inmediatamente cuando se haya descargado.

En WordPress podemos añadir el siguiente fragmento de código en nuestro archivo functions.php:

 

Atributo ‘defer’

El atributo defer se utiliza para evitar que los scripts bloqueen la presentación del resto de la página. El funcionamiento es similar a async, salvo que defer indica que el script se ejecute cuando la página se ha terminado de parsear.

Es decir, si el atributo defer está presente el script se ejecuta cuando la página se ha terminado de parsear. Si el atributo async está presente el script se ejecuta de forma asíncrona tan pronto como esté disponible. Y si estuvieran ambos presentes, async predomina sobre defer.

En WordPress podemos añadir el siguiente fragmento de código en nuestro archivo functions.php:

 

Nota

Debemos tener mucho cuidado a la hora de cargar JavaScripts de forma asíncrona. Podría darse el caso de cargar por ejemplo jQuery y una librería dependiente de jQuery y que ésta segunda librería se cargue antes que jQuery aunque la hayamos puesto a continuación en nuestro documento.

Puede que también te interese

Cómo realizar un formulario de contacto personalizado en WordPress sin Plugins
Cómo realizar un formulario de contacto personalizado en WordPress sin Plugins
Para realizar un formulario de contacto personalizado en WordPress podemos utilizar los conocidos plugins contact form 7 o gravity forms. Si no queremos recurrir al…
Me han hackeado mi página web de WordPress, ¿qué puedo hacer?
Me han hackeado mi página web de WordPress, ¿qué puedo hacer?
Un día nos podemos levantar y encontrarnos con la desagradable noticia de que nuestro sitio ha sido infectado. Esto puede ocurrir por multitud de factores:…
Cómo mostrar los posts más vistos o populares en WordPress
Cómo mostrar los posts más vistos o populares en WordPress
Probablemente en alguna ocasión te hayas encontrado con la necesidad de mostrar un listado de los posts más vistos o más populares de tu sitio.…
wp_options: ¿Qué es?, ¿Para qué sirve?, ¿Cómo se puede optimizar?, y ¿Cómo puedo hacer uso de ella?
wp_options: ¿Qué es?, ¿Para qué sirve?, ¿Cómo se puede optimizar?, y ¿Cómo puedo hacer uso de ella?
En este artículo vamos a ver qué es wp_options, para qué sirve y cómo optimizarla eliminando los rastros que van dejando algunos plugins y temas,…




  • Barbara

    Buenas Pablo,
    ¿Que es mejor? ¿Cargar los archivos en el footer o añadir el atributo defer? Estoy en duda entre esos dos.
    Gracias y un saludo

    • Personalmente prefiero los scripts en el footer salvo que alguno de ellos sea necesario cargarlo en el head para no romper alguna funcionalidad del sitio