Cómo optimizar el JavaScript en web para mejorar el WPO y SEO

Los archivos JavaScript son pesados y nos pueden hacer un destrozo en el WPO de nuestra web (con sus consecuencias negativas para el SEO). Para evitar que esto te ocurra, voy a explicarte en esta guía cómo optimizar el JavaScript (archivos JS) y los mejores plugins para aplicarlo sin ser un experto (gratis y de pago).

¿Por qué optimizar el javascript?

Aunque el objetivo principal de implementar esta optimización tiene por objetivo que WordPress vaya más rápido y la experiencia de usuario (UX) sea más fluida, existen varios motivos por los que interesa, y mucho, optimizar el JS de una web.

Aquí te dejo 7 puntos clave que debes tener en cuenta:

1. Mejora del tiempo de carga: al optimizar el JavaScript (por ejemplo, utilizando defer o async para la carga diferida de scripts), reducimos el tiempo de carga inicial de la página, permitiendo que el contenido visible se muestre más rápidamente. Esto mejora la percepción de velocidad para el usuario y puede reducir la tasa de rebote.
2. Reducción de bloqueos en la carga: la optimización del JavaScript evita que los scripts bloqueen la carga del contenido principal. Técnicas como la carga condicional o el aplazamiento de scripts hasta después de eventos específicos (como la interacción del usuario) permiten que el sitio sea más fluido y rápido.
3. Reducción de peticiones HTTP: Optimizar el JavaScript combinando y minificando archivos reduce el número de solicitudes al servidor, mejorando la velocidad de carga. Aunque sobre este punto hablaremos ahora porque tiene miga la cosa.
4. Mejora del SEO: la velocidad de carga es un factor clave en el posicionamiento SEO. Un sitio web más rápido no solo mejora la experiencia del usuario, sino que también puede obtener mejores posiciones en los resultados de búsqueda de Google, que valora positivamente los sitios rápidos a través de sus famosas Core Web Vitals (siguiente punto).
5. Mejora en el Core Web Vitals: al optimizar el JavaScript mejoramos métricas críticas como el Largest Contentful Paint (LCP) y el First Input Delay (FID). Estos indicadores son esenciales para evaluar la experiencia del usuario y tienen un impacto directo en el SEO.
6. Menor consumo de recursos: al optimizar los archivos JavaScript y su entrega, reducimos el número de solicitudes HTTP y el tamaño total de la página, lo que disminuye la carga en el servidor y el consumo de recursos en el dispositivo del usuario, resultando en una experiencia de navegación más ágil y eficiente.
7. Prevención de errores 500: Al reducir la carga en el servidor y optimizar los recursos, se evita la sobrecarga y la posibilidad de errores 500, garantizando un mejor rendimiento y estabilidad del sitio.

Los peligros de optimizar mal el JavaScript

Leyendo los beneficios que te acabo de contar, es normal que nos queramos lanzar a optimizar este código. No obstante, debes saber que si lo haces mal te puedes cargar la web (por eso siempre recomiendo hacer un backup al principio).

Algunos de los errores y consecuencias de implementar mal estas mejoras son los siguientes:

Plugins para optimizar el JavaScript

Ahora que ya sabemos la importancia de de este tema, vamos a ver que herramientas necesitamos para implementar nuestras optimizaciones. Y para ello, puedes usar uno de los 3 siguientes plugins (aunque, de todos, yo te recomiendo Perfmatters).

Importante comentar en este punto que cuando hablamos del código externo o de terceros, me refiero a aquellos que no estén alojado en nuestro propio servidor, como los de Google Analytics, Facebook Pixel o anuncios de Google AdSense, entre otros.

Minificar el Javascript

Minificar el JavaScript es un proceso que consiste en reducir el tamaño de los archivos JS eliminando espacios, comentarios y caracteres innecesarios sin afectar su funcionalidad. Esta técnica ayuda a que el código se descargue más rápido y, por lo tanto, mejora el tiempo de carga de tu página web.

Me explico, nosotros al escribir código lo hacemos de manera que sea legible, con sus espacios y caracteres añadidos:

function saludo() {
    console.log("¡Hola, mundo!");
}

Y este código que ves arriba está bien pero ocupa un espacio optimizable (piensa que los desarrollos suelen ser mucho más grandes). Por lo tanto, lo ideal es juntarlo todo para reducir su tamaño en KB.

function saludo() {console.log("¡Hola, mundo!");}

Dicho esto, la mayoría de los temas y plugins ya optimizan su propio javascript (lo puedes verificar viendo sus archivos, y comprobando que tienen la extensión min.js). Por eso, de entrada no hace falta que lo minifiques.

En mi opinión, deberías minificarlo cuando te aparezca el mensaje de "Minimizar el trabajo principal del hilo (main thread)" al pasar la web por Page Speed.

Actualmente, Perfmatters no tiene una opción que permita minificar el JS pero WP Rocket sí, desde el menú > Optimizar archivos > Archivos JavaScript > Minificar archivos JavaScript.

Combinar el Javascript

Combinar el JavaScript es un proceso en el que se juntan varios archivos JS en uno solo. Esto se hace para reducir la cantidad de peticiones HTTP que tu página necesita hacer al servidor, lo que mejora significativamente el tiempo de carga.

No obstante, y por bonito que suene, esto ya no es necesario pues actualmente las webs usan HTTP/2 (versión segura del protocolo HTTP) que introduce una característica llamada "multiplexing". Esta tecnología permite que el navegador realice múltiples solicitudes simultáneas a través de una única conexión, lo que elimina la sobrecarga de las peticiones adicionales que se tenía con HTTP/1.1.

Así pues, al usar HTTP/2 incorporamos el sistema multiplexing, con el que descargamos múltiples archivos simultáneamente a través de una sola conexión, eliminando la necesidad de combinar archivos para reducir las solicitudes. Además, podemos priorizar ciertos archivos, asignando recursos críticos para que los archivos esenciales se descarguen primero. Así mismo, este sistema incluya la compresión de cabeceras con HPACK que reduce el tamaño total de cada petición, mejorando aún más el rendimiento de la página.

En caso, de que quieras habilitar la combinación JS, puedes hacerlo con WP Rocket, desde el menú > Optimizar archivos > Archivos JavaScript > Minificar archivos JavaScript.

Cargar el Javascript diferido

Cargar el JavaScript de forma diferida, o usando el atributo defer, significa que los scripts se descargan mientras la página sigue procesándose, pero su ejecución se pospone hasta que todo el HTML ha sido completamente cargado y analizado. Es decir, los scripts se descargan en paralelo con la carga del HTML, pero su ejecución se pospone hasta que el DOM haya sido cargado y analizado.

A nivel de código, queda de la siguiente forma:

<script src="mi-script.js" defer></script>

A diferencia del atributo async, que ejecuta los scripts en cuanto se descargan sin esperar a que el DOM esté completamente cargado, defer asegura que el JavaScript no interfiera con el renderizado de la página, evitando bloqueos y mejorando el rendimiento. Esta técnica es especialmente útil para scripts que no son esenciales en la carga inicial de la página, como los de seguimiento o interacción avanzada.

Por último, solo comentar que hay veces en las que aplicar un defer da problemas si tenemos configurado el minificado o combinación de JS por lo que te aconsejo revisarlo.

Defer JS con WP Rocket

Puedes retrasar el JS con WP Rocket desde el menú > Optimizar archivos > Archivos JavaScript > Defer JavaScript. Esta configuración nos permite excluir en la caja de abajo algunos archivos de JavaScript que consideremos esenciales.

Defer JS con Perfmatters

Puedes retrasar el JS con Perfmatters desde el Assets > JavaScript > Defer JavaScript. Aquí también tienes la opción de retrasar ciertos scripts del Deferral.

Retrasar la carga de Javascript externo

Hacer un retraso (delay) en la ejecución de JavaScript consiste en posponer la carga de ciertos scripts hasta que ocurra un evento específico, como que el usuario interactúe con la página o que ésta haya sido completamente cargada.

Retrasar los scripts externos es muy útil para aquellos que no son críticos en la carga inicial de la página, como los de seguimiento de Google Analytics, píxeles de seguimiento, o scripts de publicidad.

Gracias a esto conseguimos que el contenido principal se cargue más rápido y mejoramos la percepción de velocidad para el usuario. Además, evitamos que estos scripts bloqueen el renderizado del contenido visible, asegurando una carga más fluida.

Así mismo, esta optimización del tiempo de carga inicial también contribuye a mejorar las métricas de Core Web Vitals, lo que beneficia el SEO al reducir el tiempo de renderizado y aumentar la eficiencia general del sitio.

Delay JS con WP Rocket

Puedes retrasar el JS con WP Rocket desde el menú > Optimizar archivos > Archivos JavaScript > Minificar archivos JavaScript.

WP aplica el retraso de JS a todos los archivos. No obstante, si te fijas en la imagen de abajo, encontrarás una sección en la que nos permite excluir ciertos archivos y plugins del Delay, haciendo clic en ellos o directamente indicando el archivo js.

Delay JS con Perfmatters

Puedes retrasar el JS con Perfmatters desde el Assets > JavaScript > Delay JavaScript. A diferencia de WP Rocket, con este plugin puedes elegir entre aplicarlo a todos los archivos o solo en algunos, así como incluir un tiempo límite hasta su ejecución.

Al ser ésta una técnica delicada yo suelo aplicarlo solo en archivos externos o de terceros, como el código Google Analytics, Google Tag Manager o para optimizar AdSense.

Mensajes de error en Page Speed de Javascript

Tan importante es saber prevenir como curar, por lo que vamos a ser un poco más prácticos ahora y vamos a analizar ciertos mensajes relacionados con JS que aparecen cuando pasamos nuestra web por Page Speed.

Elimina los recursos que bloqueen el renderizado

Este mensaje aparece cuando el JavaScript impide que el navegador muestre el contenido visible de la página de forma inmediata. Para solucionarlo, te recomiendo utilizar la técnica de defer para scripts que no son críticos.

Reducir el tamaño del JavaScript

Se refiere a la necesidad de minificar y comprimir los archivos JS. Como hemos visto antes, minificar consiste en eliminar espacios y comentarios innecesarios, mientras que la compresión se refiere a técnicas como Gzip o Brotli para reducir el tamaño del archivo transferido. La compresión la puedes aplicar en Cloudflare, desde la sección de Optimización de Rendimiento.

Reduce el impacto del código de terceros

Este mensaje de PageSpeed Insights aparece cuando el código de terceros, como scripts de publicidad, rastreo o widgets, está afectando significativamente el rendimiento de tu sitio web. En algunos casos, puedes solucionarlo aplicando un defer o incluso un lazyload si el motivo son iframes en WordPress.