No es la primera vez que hablo de Javascript en este blog, de hecho, ya lo he hecho varias veces:
Pero ahora quiero dedicarle un post única y exclusivamente a Javascript, ya que actualmente su correcta optimización y carga tienen un peso muy importante en el WPO.
En este post no voy a reinventar la rueda: muchas cosas de las que voy a comentar las he dicho varias veces en este blog, en ponencias, en mi Youtube o en el blog de Raiola Networks. Lo que sí voy a intentar es darte conclusiones concretas y puntos clave para optimizar la carga de Javascript en tu WordPress.
Vamos a ser sinceros, la carga de Javascript es literalmente una **** patada en la boca. Justo esto es lo que enseñé con esta gráfica en el post donde hablaba del impacto del Javascript: https://alvarofontela.com/impacto-del-javascript-en-wpo-actual-benchmark/
Como puedes ver, no todos los dispositivos tienen la misma facilidad para ejecutar Javascript. Recordemos que JS es un lenguaje que se ejecuta del lado del cliente, es decir, en el navegador del cliente. Esto implica varias cosas que se escapan al control del webmaster o administrador del sitio web.
Personalmente, odio Javascript. Me gustan sus “efectos” y “ventajas”, pero odio Javascript como lenguaje y me cuesta mucho entenderlo.
Por esta razón, no te voy a enseñar a optimizar código Javascript directamente, ya que mis conocimientos sobre sintaxis de Javascript son NULOS.
Sin emabrgo, te voy a enseñar las siguientes técnicas WPO que puedes aplicar a WordPress o a cualquier otro CMS, aunque el how-to de implementación en otros CMS no te lo voy a detallar porque yo estoy especializado en WordPress.
- Minificación de Javascript.
- Combinado de Javascript.
- Async y defer en Javascript para carga asíncrona.
- Mover Javascript al footer de la web.
- Delay o retraso de la carga de Javascript.
- Carga condicional de Javascript.
- Resource hints aplicados sobre el Javascript.
Estas técnicas WPO están ordenadas de menos a más impacto en el WPO, es decir, la minificación es lo que tiene menos impacto y la carga condicional lo que más.
No me voy a liar más con la teoría. Vamos con la práctica.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
Minificación de Javascript
Este tema esta trilladísimo, pero aun así voy a comentarlo igual. Ya hablé de la minificación de Javascript en el post sobre optimizar CSS y Javascript en WordPress. Realmente podría copiar y pegar lo que escribí en su día, porque no ha cambiado nada.
En la minificación, lo que hacemos es usar reglas automáticas para limpiar los archivos Javascript eliminando saltos de línea, espacios, comentarios y cualquier carácter no interpretable que añada peso al archivo.
Con esto se consiguen archivos mucho más pequeños y ligeros, teóricamente mucho más agiles al cargar. A nivel de impacto no se consigue nada o casi nada, pero a nivel performance budget se puede llegar a conseguir una gran mejora: todo depende del tamaño de los archivos JS.
Plugins para minificar Javascript en WordPress
Existen muchos plugins para optimizar Javascript, pero normalmente se hace con el mismo plugin con el que hacemos cache de página.
Esto tiene una razón y es que los plugins de optimización de JS (minificación y combinado) trabajan siempre sobre copias cacheadas. Estas copias cacheadas, al purgarse y generarse copias nuevas, pueden causar problemas de incoherencias entre el plugin de cache de página y estos plugins.
De este modo, si implementamos el cache de página y la minificación con el mismo plugin, no existe riesgo de tener este problema. Aunque existen algunas configuraciones entre plugins compatibles que pueden llegar a ser bastante eficientes también. Por ejemplo, WP Rocket con Assets CleanUp Pro.
¿Qué recomiendo yo para minificar Javascript en WordPress? Pues aquí viene el problema y es que, como te he dicho anteriormente, mi recomendación viene dada por el plugin de cache de página que uses.
Te voy a dar algunas combinaciones “ganadoras”.
- WP Rocket solo con su motor de minificación, que es bastante potente y no requiere conocimientos avanzados.
- WP Rocket con Assets CleanUp Pro, ya que se integran bien y Assets CleanUp Pro tiene un motor de minificación más potente que el de WP Rocket.
- W3 Total Cache con su motor de minificación, es MUY potente, pero requiere conocimientos avanzados.
- Swift Performance con su motor de minificación, bastante potente.
- LiteSpeed Cache con su motor de minificación, muy potente y que casi no requiere conocimientos.
- LiteSpeed Cache con Assets CleanUp Pro, ya que se integran bien y rara vez tienen problemas o incompatibilidades.
¿Existen otras combinaciones? Claro que sí, pero estas son las que suelo usar en mi día a día.
Autoptimize es uno de los plugins más conocidos, pero también es de los que suelen dar problemas. Es potente y yo personalmente lo recomiendo, pero solo si realmente sabes lo que haces. Mucha gente tiene problemas con Autoptimize al haber incompatibilidad del cache de recursos JS y CSS de Autoptimize con el cache de página implementado. Por esta razón yo no lo uso mucho, porque esto es común.
Combinado de Javascript
El combinado de JS es otra técnica WPO bastante “trillada” y de la que se ha hablado mucho. Al igual que la minificación, podría copiar lo mismo que escribí en el post de optimización de la carga de Javascript y CSS, porque no ha cambiado nada desde su publicación.
El combinado consiste en unir varios archivos Javascript en un único archivo, reduciendo la complejidad, las dependencias y con ello las peticiones HTTP. Con esto se consigue una mejora en el impacto del JS en el WPO, pero también una mejora en el performance budget de la página.
Realmente, el combinado es una técnica WPO obsoleta desde la salida de HTTP/2. Esto en teoría, ya que en la práctica en webs con muchos recursos JS se consigue bastante más mejoría que con el minificado. La razón de que se haya quedado obsoleta con HTTP/2 y HTTP/3 es que la multiplexación del protocolo HTTP/2 actualizado ayuda a servir muchos archivos más pequeños en lugar de un único archivo más grande.
Otro problema que tiene combinar Javascript es que suele dar muchísimos problemas. Por esta razón no se suele implementar esta técnica WPO: no porque esté obsoleta, sino porque las librerías JS que tienen dependencias suelen causar bastantes fallos.
Personalmente, hoy por hoy, no recomiendo combinar el JS, ya que los “líos” que vas a tener no merecen la pena si tenemos en cuenta los beneficios obtenidos.
Plugins para combinar Javascript en WordPress
Realmente esta sección va a ser muy corta, ya que los mismos plugins que nos permiten minificar Javascript nos permiten también combinar Javascript.
Así que, si quieres implementar el combinado de Javascript a pesar de lo que he comentado en la sección anterior, el plugin que uses para minificar también te dejara combinar. De hecho, algunos plugins como WP Rocket no te dejarán combinar el JS si antes no lo minificas.
Async y defer en Javascript para carga asíncrona
Con la carga asíncrona se soluciona un problema que mucha gente conoce, el famoso “Recursos que bloquean el renderizado” de Google PageSpeed.
Cuando se habla de carga asíncrona, normalmente no se comenta que existen 2 tipos de carga asíncrona diferentes: async y defer.
Por resumirlo de alguna forma, la carga asíncrona nos permite cargar el Javascript de forma asíncrona, es decir, que se cargue al mismo tiempo que otros elementos de la web en lugar de cargarlo “en serie”.
En teoría esto suena muy bien porque se ahorra tiempo pero, en la práctica, la eficiencia de la carga asíncrona depende totalmente de las dependencias.
Ahora vamos con el tema de los dos tipos de carga asíncrona:
- Async: Permite la descarga asíncrona del archivo Javascript mientras se interpreta el HTML. Sin embargo, cuando se termine de descargar el archivo JS se parará la interpretación del HTML para ejecutar el Javascript y, cuando acabe con el archivo JS, seguirá interpretando el HTML (y así para cada archivo JS).
- Defer: Permite la descarga asíncrona del Javascript, pero no lo ejecutará hasta que finalice la interpretación del HTML. De este modo, se mueve la ejecución de Javascript al final.
¿Cuál implementar en cada caso? Pues depende, no hay una regla exacta que te diga que una u otra van a funcionar correctamente, aunque hay plugins que hacen esta prueba y te configuran async o defer dependiendo de los resultados.
Se recomienda usar async si es posible y, en caso contrario, defer. Yo prefiero defer en la gran mayoría de casos por un tema de compatibilidad y dependencias.
Async y Defer nos permiten optimizar el trabajo del navegador al descargar e interpretar los archivos, consiguiendo rellenar los tiempos en idle con tareas . Como resultado, normalmente reducimos los tiempos de carga, aunque podamos aumentar algo en consumo de recursos en el dispositivo donde se carga la web (al rellenar el tiempo de ejecución con más trabajo).
Plugins para carga asíncrona en WordPress
Para este caso hay dos tipos de plugins: los que son transparentes y los que no lo son.
Por ejemplo, WP Rocket no es transparente y tampoco permite configurar si hacemos async o defer. Solo nos permite configurar carga asíncrona en general, sin especificar nada:
Aunque si miramos la documentación podemos ver que lo que realmente hace es configurar defer.
Lo que hace WP Rocket es detectar los scripts declarados por WordPress y encolados para cargar, a los que les aplica defer. Lo único que podemos configurar en este caso son las exclusiones, por si hubiese algún problema.
Si necesitas saber más sobre WP Rocket, te dejo el siguiente artículo: https://alvarofontela.com/wp-rocket-plugin-cache-wordpress/
Si nos vamos al extremo contrario tenemos Assets CleanUp Pro que, siendo uno de los plugins de optimización de recursos más personalizable y configurable, nos permite configurar para cada script encolado si queremos async o defer. ¿Qué puede haber más configurable y avanzado que esto?
Además, como he dicho en secciones anteriores, Assets CleanUp Pro se integra con la gran mayoría de plugins de cache conocidos.
Si buscas algo que te permita elegir entre async y defer para la carga asíncrona en WordPress, pero que no sea tan avanzado y personalizable como Assets CleanUp Pro, creo que el plugin Async Javascript (del mismo desarrollador que Autoptimize) es una buena solución.
Async Javascript ejecuta un test, apoyándose en el API de GTMetrix, que permite decidir cuál es la mejor solución para nuestra web.
Otra alternativa que a mí me gusta para esto y que es bastante personalizable es Perfmatters, un plugin que considero el mejor para carga condicional. Ya lo veremos un poco más abajo en este mismo post.
En este caso, como puedes ver, Perfmatters aplica directamente defer y no permite configurar async.
¿Existen otros plugins para hacer esto? Claro que sí, normalmente los plugins que permiten minificación y combinado también permiten la carga asíncrona, pero la diferencia entre ellos suelen ser las opciones de configuración y la facilidad de implementación.
LiteSpeed Cache, W3 Total Cache, Swift Performance… Todos estos plugins de cache permiten carga asíncrona. Evidentemente, no tienen esta funcionalidad tan desarrollada y precisa como Assets CleanUp Pro y tampoco tienen el asistente de Async Javascript, pero… suelen ser suficientes en la mayoría de casos.
Mover Javascript al footer de la web
Esta técnica WPO ha sido bastante popular durante mucho tiempo, tanto para hacerlo sobre el Javascript como en el CSS. De hecho, en el CSS esta técnica WPO provoca que cargue antes el contenido que los estilos y, aunque es lo recomendable, mucha gente suele reportar el problema.
Esta técnica no implica lo mismo que aplicar carga asíncrona con defer, aunque en la teoría se parezcan.
Al mover el Javascript al footer, lo que hacemos es desencolar las peticiones y volverlas a encolar: desencolamos su carga en la cabecera y encolamos su carga en el footer.
Para hacerlo con los scripts encolados en Wordpress simplemente tenemos que meter esto en el funcions.php del theme activo o usando el plugin Code Snippets:
| 1 2 3 4 5 | function moverscriptsfooter() { remove_action( 'wp_head', 'wp_enqueue_scripts', 1 ); add_action( 'wp_footer', 'wp_print_head_scripts', 5); } add_action( 'wp_enqueue_scripts', 'moverscriptsfooter' ); |
¿Qué conseguimos con esto? Pues que primero se descarguen e implementen el HTML y el CSS; después, se cargará e interpretará la parte más compleja, el Javascript.
Lo bueno de esto es que se mantiene el orden de carga; lo malo es que, dependiendo de cuál sea el Javascript que movemos, podemos encontrar problemas de funcionalidad.
Esta técnica WPO es buena para solucionar en Google PageSpeed los bloqueos de visualización o renderizado provocados por Javascript. Sin embargo, por otro lado, si tenemos mucho Javascript y no aplicamos correctamente la carga asíncrona se puede retrasar un poco el tiempo de carga general de la web.
Plugins para mover la carga del Javascript al footer
Bueno, además del script que te he puesto en la sección anterior, también podemos mover la carga de Javascript al footer utilizando algunos plugins.
Evidentemente, el ya mencionado Assets CleanUp Pro permite hacer esto para cada JS encolado por separado, por lo que lo vamos a dejar como alternativa más personalizable y avanzada una vez más.
Existen otras opciones automáticas o con menos funcionalidades, pero tienen el hándicap de que no se adaptan a muchos casos en los que suelen provocar incompatibilidades.
Una alternativa automática es el plugin Speed Up – Javascript to Footer, que no tiene ni configuración. Otra opción es el plugin Scripts To Footer, que tiene muy poca configuración.
No hay muchas más opciones realmente, al menos ninguna que yo conozca y haya probado.
Delay o retraso de la carga de Javascript
Llegamos a una de mis técnicas WPO favoritas desde finales de 2020, ya que con ella puedo literalmente engañar a Core Web Vitals o Google PageSpeed Insights para conseguir una mejor puntuación.
Y digo engañar porque realmente es lo que se hace al retrasar la carga del Javascript hasta la interacción del usuario o varios segundos después de que cargue la web. El Javascript sigue cargándose de la misma forma, pero los motores de análisis no lo detectan porque para ellos la web ya se ha acabado de cargar.
Creo que después de esto ya no necesito explicar lo que se hace con el retraso de la carga de Javascript, porque ya lo he explicado de rebote en el párrafo anterior.
Lo que se hace es esperar a que el usuario interactúe o a que pasen más de 3 segundos para cargar los JS. El problema es que en muchos casos algunos scripts pueden dar problemas de funcionalidad y hay que tener cuidado con lo que se hace.
De cara a las puntuaciones esto es muy efectivo, como he dicho, pero recordemos que hay bastante diferencia entre la teoría y la práctica en temas de WPO. En las puntuaciones se nota, pero en la práctica el JS sigue cargándose en los dispositivos de los visitantes: la única diferencia es que lo hace más tarde o bajo demanda.
Esta técnica podría considerarse el Lazy Load del JS.
Plugins para aplicar delay de JS o retraso de la carga de JS
Aunque algunos plugins como Perfmatters hace tiempo que lo permiten, en el Q4 de 2020 se implementó esta funcionalidad en WP Rocket y en el Q2 de 2021 se mejoró aún más.
Yo llevo años aplicando esta técnica WPO utilizando un plugin llamado Flying Scripts, del mismo desarrollador que el plugin de optimización FlyingPress.
Otra opción para hacer delay de Javascript es Perfmatters, ya que desde hace algún tiempo dispone de una opción para ello:
En ambos casos, en Flying Scripts y en Perfmatters, esta opción es muy rudimentaria y básica. Simplemente es una caja de texto y un seleccionable, y somos nosotros quienes debemos “detectar” los scripts que se cargan y probar si podemos hacer delay de Javascript.
Sin embargo, hay un plugin que es diferente: WP Rocket, que ha trabajado bastante en esta funcionalidad y ha automatizado la detección y delay de ciertos scripts. A principios de julio de 2021 sacaron una nueva versión (llamada Delay JS 2.0) y han cambiado algunas cosas.
En esta lista puedes ver todos los plugins y scripts que se deben excluir del delay JS según WP Rocket: https://docs.wp-rocket.me/article/1560-delay-javascript-execution-compatibility-exclusions
¿La ventaja? Que este recurso te puede servir tanto para Flying Scripts como para Perfmatters.
¿La diferencia? Que WP Rocket detecta todos los scripts y tú tienes que añadir exclusiones, mientras que en Perfmatters y Flying Scripts eres tú quien tienes que añadir los scripts que quieres retrasar. Dos formas de funcionar diferentes y opuestas.
¿Cómo usar la documentación de WP Rocket para los otros dos plugins? Pues cuando metas los scripts que vas a retrasar, ya sabes cuáles no tienes que meter en función de la docu de WP Rocket.
Hay algún plugin más para hacer delay de JS en WordPress, pero estos 3 son los que yo siempre he utilizado, cada uno con sus ventajas e inconvenientes.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
Carga condicional de Javascript
No voy a profundizar mucho en esta técnica WPO porque en su momento le dediqué un post entero.
La carga condicional o, como yo la llamo, carga inteligente, es una técnica WPO mediante la cual elegimos qué scripts se cargan y dónde se cargan.
Te voy a poner un ejemplo: si tenemos una web donde los botones de compartir solo se cargan en los posts del blog, no existe motivo para que sus scripts se carguen en toda la web. Podemos desencolar la carga de esos scripts en toda la web excepto en el “single.php” que es donde se cargan los posts del blog.
Esto no aplica solo al JS sino también al CSS, pero en este caso vamos a hablar solo de Javascript porque el post va de eso.
Lo dicho, si quieres más información sobre la carga condicional, aquí la tienes: https://alvarofontela.com/carga-condicional-wordpress-js-css/
Plugins para hacer carga condicional en WordPress
Pues digo lo mismo que en el post que he puesto arriba: Perfmatters.
Actualmente hay varios plugins para implementar carga condicional en WordPress, la diferencia está en su interfaz y en “hasta dónde llegan”.
A mí personalmente me gusta Perfmatters por interfaz y posibilidades, ya que su interfaz me ayuda mucho a orientarme al desencolar scripts de forma condicional.
Otro plugin muy potente en este sentido es Assets CleanUp Pro pero, como siempre, este plugin es la alternativa más potente pero también la que más conocimientos avanzados necesita para poder aprovecharla al máximo.
Existen muchos otros plugins para hacer esto: Gonzales, Plugin Organizer, etc. Pero yo me siento cómodo con los que te he comentado aquí.
Resource hints para optimizar el JS
Otra técnica WPO de la que ya he hablado: los resource hints.
Los resource hints es una técnica WPO que nos permite establecer prioridades de carga de los distintos recursos que carga una web.
Usándolos de forma inteligente podemos hacer cosas muy curiosas, como aprovechar al máximo el tiempo de idle del navegador del visitante o desbloquear situaciones donde un script tiene que esperar a otro para cargar.
Aunque no es una técnica WPO milagrosa, es el típico truquito que es útil en situaciones específicas y que, aunque normalmente no te va a mejorar la velocidad de carga, si das con la situación ideal puedes mejorar la velocidad más de un 20%.
Los resource hints son los siguientes:
- Preconnect (muy usado).
- Prefetch DNS (bastante usado).
- Prerender (no demasiado usado).
- Preload (muy usado).
- Prefetch (no demasiado usado).
No me lío más porque esto ya lo he explicado: https://alvarofontela.com/precarga-recursos-resource-hints-wpo/
Plugins para aplicar resource hints en WordPress
Si tuviera que hablar de dos plugins para esto, me quedaría con Perfmatters y Pre* Party Resource Hints.
Estos son los dos plugins que utilizo yo para este tipo de tareas, aunque soy consciente de que Assets CleanUp Pro una vez más también destaca en este terreno, aunque con una interfaz mucho más completa y que requiere más conocimientos sobre el tema.
Yo uso mucho Perfmatters para esto, aunque soy consciente de que Pre* Party Resource Hints es mucho más potente y que tiene una especie de asistente inicial que ayuda mucho, al menos a implementar los prefetch DNS básicos.
Hay muchos más plugins para implementar resource hints en WordPress, pero algunos solo nos permiten implementar un tipo, otros lo hacen automáticamente por detección y no tienen configuración. Hay que encontrar un equilibrio.
Lo dicho, no me enrollo más dado que todo esto lo he explicado en un completo post sobre el tema: https://alvarofontela.com/precarga-recursos-resource-hints-wpo/
Conclusión sobre Javascript en el WPO
Repito que el Javascript es uno de los problemas más gordos e incontrolables que nos encontramos en WPO. Siempre digo lo mismo: la mejor técnica WPO para optimizar el Javascript consiste en QUITAR el Javascript.
Si tienes una web que carga demasiado Javascript y está muy sobrecargada, de estas que llegan a bloquear el navegador del visitante, por mucho que optimices vas a seguir teniendo el mismo problema, aunque en lugar de tenerlo al principio de la carga lo tendrás al final.
Por esta razón es muy importante ser conscientes del coste que tiene la implementación de ciertos scripts o funcionalidades en una web, ya no solo para el performance budget, sino para todo lo que tiene que interpretarse o cargarse en el navegador del usuario. Nosotros podemos controlar cuánto tarda en cargar el PHP, ya que es SSR (Server Side Rendering), pero el Javascript en WordPress es CSR (Client Side Rendering) y eso no podemos controlarlo.
Javascript y su papel en la puntuación de Core Web Vitals
El Javascript lo es TODO en la puntuación de Google PageSpeed y en Core Web Vitals. Cuando digo TODO es TODO, ya que lo condiciona TODO.
En el 90% de los casos de puntuaciones bajas, si sacas el Javascript de una web subes la puntuación de Google PageSpeed a más de 90.
¿Cuál es la técnica WPO más potente para mejorar la puntuación de PageSpeed con lo que acabo de decir? Pues engañar a Google Lighthouse (la base de Core Web Vitals y PageSpeed) con el delay o retraso de Javascript cuando sea posible.
Con esto conseguimos que el motor de Lighthouse no vea el JS y que para él no exista, aunque debemos tener en cuenta que el visitante en su navegador web y dispositivo sí que va a recibir el impacto.
El resto de técnicas WPO pueden ayudar también, sobre todo las que nos ayudan a eliminar bloqueos de renderizado de Javascript: mover scripts al footer, carga asíncrona (async y defer) e incluso el combinado de JS.
Javascript y su papel en el WPO general
Dejando de lado las puntuaciones teóricas, en la práctica el Javascript también es un problema por algo que he comentado anteriormente.
El Javascript se ejecuta e interpreta del lado del visitante y esto es algo que no podemos controlar, ya que no sabemos qué dispositivo usa ni cuánta potencia tiene.
Aplicando técnicas WPO en el Javascript lo que hacemos es mejorar su eficiencia. Podemos rellenar tiempos de idle del navegador web para conseguir una carga mucho más eficiente y sin perder tiempo aunque, como he dicho un poco más arriba, hay que tener en cuenta que esto también puede aumentar el consumo de CPU en el dispositivo (llegando a ser contraproducente en algún caso extremo).
Sin hablar de puntuaciones, cualquier técnica WPO puede ser interesante para optimizar la carga de Javascript en WordPress, pero cada una tiene sus posibilidades.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
4 comentarios
Hola alvaro yo uso fastvelocity minify en un sitio con lite speed y en otra web asset clean up el gratis con lite speed no se que tal seran las configuraciones
Hola Marcos, con Assets CleanUp Free y LiteSpeed no vas a tener problema, con el otro…pues no lo sé, no lo conozco.
Hola Alvaro, como estas?
Espectacular articulo!! Alguna idea de como optimizar bien bien Jquery (/wp-includes/js/jquery/jquery.min.js). Enviándolo al footer y hacer un preload en el head no funciona, ya que da error en la consola. Realmente mas allá del error de consola al enviarlo al footer la puntuación en Page Speed cambia notoriamente. Espero que se entienda, desde ya mil gracias! un abrazo!
Hola Martin, pues depende totalmente de las dependencias y las librerías jQuery que uses.
En algunos casos puedes retrasarlo o moverlo al footer sin problema, pero… si hay funcionalidades que usan ciertas librerías de jQuery que requieren que se cargue antes, jQuery va a tener que cargarse normalmente y no vas a poder hacer nada (bueno, si, eliminar esa funcionalidad y con ello esa dependencia de jQuery).
Por eso la única exclusión que ofrece opcional de forma nativa WP Rocket en la parte de delay de JS es la del jQuery, porque es algo común.