JavaScript es uno de los lenguajes de programación más populares del mundo. La mayoría de los sitios web lo utilizan para crear experiencias más dinámicas para los visitantes. Entre las funciones esenciales se encuentran los formularios de contacto y las estadísticas del sitio, que son solo un par de ejemplos de cómo se utiliza JavaScript a diario. Por desgracia, aunque todo este código resulta muy útil, puede ralentizar tu sitio.
Posponer el análisis de JavaScript (lo que también se denomina «posponer JavaScript») significa indicar a tu sitio que cargue en último lugar el código no esencial de JavaScript. Este sencillo ajuste puede mejorar los tiempos de carga y el rendimiento general de tu página, en función del número de scripts que utilice tu sitio web.
En esta guía explicaremos exactamente qué es el análisis y en qué consiste posponerlo. También hablaremos de cómo posponer JavaScript puede beneficiar a tu sitio y te enseñaremos a hacerlo. Por último, responderemos a algunas preguntas frecuentes (FAQ) para resolver cualquier duda que te quede.
¿Qué significa «posponer el análisis de JavaScript»?
Cuando visitas un sitio web, tu navegador solicita archivos a un servidor. Estos archivos contienen HTML, CSS y JavaScript para que el navegador los analice (interprete) y cree una página web visual e interactiva.
A menudo, los sitios web requieren que tu navegador cargue decenas (o incluso cientos) de elementos y archivos para una sola página. Aquí tienes un ejemplo rápido de una de las páginas de Google, para que veas cuántos archivos utiliza:
Cuando tu navegador analiza archivos HTML, se detiene para renderizar cualquier CSS que encuentre y ejecutar código JavaScript. Hasta que el navegador termine de ejecutar ese código, no continuará cargando el resto de la página.
En la práctica, es posible que no notes este retraso si tu sitio web está muy bien optimizado (si carga realmente rápido). Pero el retraso existe y, cuanto más JavaScript utilice tu sitio, más puede prolongarse. Si tu sitio web no está optimizado para ofrecer un buen rendimiento, el análisis de JavaScript puede ralentizar considerablemente sus tiempos de carga.
Posponer el análisis de JavaScript significa decirle a tu navegador: «Oye, si encuentras este código JavaScript, no lo analices hasta que hayas terminado con el resto de la página». Desde el punto de vista del visitante, esto significa que los elementos visibles de la página se cargarán más rápido. Después, JavaScript terminará de ejecutarse en segundo plano y nadie se dará cuenta (salvo tú y el navegador).
¿Qué ventajas tiene posponer JavaScript?
La principal ventaja de posponer JavaScript es que las páginas se cargarán más rápido para los visitantes. Los scripts seguirán cargándose en segundo plano, pero posponerlos debería mejorar tu puntuación de Largest Contentful Paint (LCP); esta es una de las tres métricas de Core Web Vitals.
Es importante recordar que el tiempo de carga de la página es uno de los aspectos más importantes para ofrecer una buena experiencia de usuario. Si un sitio web tarda demasiado en cargarse, normalmente perderás un porcentaje de visitantes. Además, los tiempos de carga lentos pueden dar la impresión de que algo no funciona bien en tu sitio.
Cómo posponer el análisis de JavaScript en WordPress
WordPress ofrece más de una forma de optimizar tu sitio web. Para posponer JavaScript, puedes utilizar dos métodos.
El primer método es el más sencillo, ya que consiste en utilizar un plugin.
1. Posponer el análisis de JavaScript con un plugin gratuito
Si no te sientes cómodo editando los archivos de tu sitio web y añadiendo código a WordPress, lo mejor es usar un plugin. Una de las mejores herramientas que puedes usar para retrasar la carga de JavaScript no esencial en WordPress es Jetpack Boost.
Jetpack Boost es un plugin gratuito que puedes utilizar para optimizar el rendimiento de tu sitio de WordPress. Es muy fácil de configurar, por lo que resulta una opción excelente para principiantes.
Cuando actives el plugin, tendrás que conectarte a una cuenta de WordPress.com (puedes utilizar una cuenta gratuita).
Cuando estés listo, ve a Jetpack → Boost en tu panel de administración de WordPress, y obtendrás una visión rápida de cómo está funcionando tu sitio web en cuanto al rendimiento.
Si consultas las opciones que aparecen abajo, verás un ajuste llamado Posponer JavaScript no esencial. Puedes activar este ajuste y el análisis de JavaScript se pospondrá automáticamente en todo tu sitio web.
El plugin identifica el JavaScript no esencial porque solo afecta a los scripts que no son esenciales para el sitio web.
Una vez activado este ajuste, asegúrate de revisar tu sitio web para comprobar que todo funciona correctamente. Si observas algo inesperado, desactiva la función.
Ten en cuenta que Jetpack Boost también puede activar la carga diferida y optimizar el CSS de tu sitio. Esto significa que el plugin moverá el CSS esencial al principio de cada documento HTML para que el navegador lo analice primero. Este ajuste es especialmente importante para mejorar tu puntuación de First Input Delay (FID).
2. Posponer el análisis de JavaScript con el archivo functions.php
El segundo método consiste en editar el archivo functions.php de tu tema. El proceso no es demasiado complicado, pero añadir código a WordPress puede provocar efectos secundarios inesperados.
Este método es para usuarios con experiencia, ya que pueden ocurrir muchas cosas al eliminar un solo archivo o incluso al añadir accidentalmente un espacio en el lugar equivocado. Recuerda que solo debes aplazar el código que no sea esencial escrito en JavaScript para evitar perjudicar la experiencia de usuario.
Para mayor seguridad, te recomendamos hacer una copia de seguridad completa de tu sitio web antes de editar cualquier archivo de WordPress. Incluso si tienes una copia de seguridad reciente, crea otra para disponer de un punto de restauración antes de realizar cambios. Si tienes Jetpack VaultPress Backup, la versión más reciente de tu sitio ya estará guardada automáticamente.
Hay dos formas de editar el archivo functions.php de WordPress. En WordPress, puedes usar el Editor de archivos del tema, al que puedes acceder desde el menú Apariencia. Ten en cuenta que esta opción solo está disponible si no utilizas un tema de bloques compatible con la edición completa del sitio (FSE).
Cuando accedas al editor, selecciona tu tema activo en el menú desplegable de la derecha y busca el archivo functions.php en la lista.
Puedes usar el editor para añadir o eliminar código de cualquier archivo del tema. Aun así, te recomendamos no modificar ningún código existente a menos que entiendas para qué sirve.
Añadir código a functions.php debería ser seguro siempre que proceda de una fuente fiable. El siguiente fragmento de código configurará tu sitio web para posponer el análisis de JavaScript:
function defer_js( $url ) {
if ( is_user_logged_in() ) return $url;
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_js', 11 );Este código pospondrá automáticamente todo el JavaScript de tu sitio, pero no afectará a los scripts de jQuery. Sin embargo, no funcionará si has iniciado sesión, para evitar problemas con la carga incorrecta del panel de administración.
Añade ese script al final del archivo functions.php para que no interfiera con ningún otro código del archivo. Haz clic en Actualizar archivo en la parte inferior de la página y ¡listo!
Si no tienes acceso al editor de archivos de temas de WordPress, pero te sientes cómodo trabajando con código en un servidor, puedes editar functions.php conectándote a tu sitio web mediante el protocolo de transferencia de archivos (FTP). Para ello, necesitarás usar un cliente FTP como FileZilla. Recuerda hacer una copia de seguridad completa del sitio antes de hacer nada.
Una vez que te conectes al servidor de tu sitio web, tendrás que localizar la carpeta de WordPress que actúa como carpeta raíz. Esta es la carpeta que contiene todos los archivos de tu sitio. Normalmente se llama www, public_html o tiene el nombre de tu sitio.
Abre esa carpeta y ve a wp-content/themes. Debería haber varias carpetas, una por cada tema instalado en tu sitio. Identifica la carpeta de tu tema activo y ábrela. El archivo functions.php debería estar justo dentro.
Haz clic con el botón derecho en ese archivo y busca una opción que se llame algo parecido a Editar (esto variará según el cliente FTP que uses). Esa opción abrirá el archivo con tu editor de texto predeterminado. Desde ahí, puedes añadir el fragmento de código que compartimos antes y guardar los cambios en el archivo.
Se aplican las mismas reglas al editar archivos de WordPress mediante FTP. No edites ningún código si no estás seguro de lo que hace y ten cuidado al añadir fragmentos de código a menos que confíes en su fuente.
Siempre puedes restaurar tu sitio de WordPress con la copia de seguridad más reciente si se producen errores después de editar el archivo llamado functions.php de tu tema. Jetpack VaultPress Backup es una opción fantástica en estos casos porque permite restaurar con un solo clic incluso si tu sitio está completamente caído.
Preguntas frecuentes sobre cómo posponer JavaScript
Si todavía tienes preguntas sobre cómo funciona el aplazamiento de JavaScript, esta sección las resolverá. Empecemos por hablar de los posibles efectos secundarios de aplazar los scripts.
¿Posponer JavaScript puede romper tu sitio?
Sí, según los plugins y el tema que uses, es posible que posponer JavaScript rompa algunos elementos de tu sitio. Además, si utilizas el método manual, un error en el código podría dejar tu sitio completamente inoperativo.
Por eso, lo más seguro es utilizar una herramienta como Jetpack Boost para encargarte de esta tarea. Aunque posponer JavaScript podría causar algún problema, puedes desactivar fácilmente la función o el plugin por completo.
¿Posponer el análisis de JavaScript es lo mismo que «eliminar JavaScript que bloquea el renderizado»?
Si utilizas servicios de medición del rendimiento de sitios web como PageSpeed Insights o GTMetrix, quizá observes que también recomiendan eliminar JavaScript que bloquea el renderizado de tu sitio web. Por la terminología empleada, es fácil confundir esta sugerencia de optimización con posponer el análisis de JavaScript.
El JavaScript que bloquea el renderizado hace referencia a cualquier código que impida que tu sitio se renderice. En muchos casos, la mejor solución es eliminarlo si no cumple una función específica. Si cumple alguna función, puedes posponerlo.
Determinar qué scripts son necesarios y cuáles no dependerá de tu criterio. Pero servicios como GTMetrix pueden ayudarte a identificar el código JavaScript que no se utiliza en tu sitio web.
Cualquier script que pertenezca a esta categoría debería poder eliminarse sin problemas. Para los demás scripts, puedes usar plugins (como Jetpack Boost) o modificar manualmente el archivo functions.php para posponerlos.
¿Puedo eliminar JavaScript sin problemas en lugar de posponerlo?
Esto depende de a qué scripts te refieras. No es raro que los sitios web de WordPress acumulen código sin usar a medida que crecen. Esto ocurre cuando instalas y desactivas plugins, pruebas servicios de terceros y dejas de utilizarlos.
Dejar ese JavaScript «huérfano» en tu sitio web puede generar a veces un riesgo de seguridad. Además, puede afectar al rendimiento de tu sitio web porque los navegadores quizá todavía tengan que analizarlo.
En la pregunta anterior te mostramos cómo usar GTMetrix para identificar JavaScript de tu sitio web que puedes eliminar sin problemas.
¿Posponer JavaScript mejora el rendimiento de la página?
Retrasar la carga de JavaScript debería hacer que las páginas de tu sitio se carguen más rápido. La diferencia de velocidad dependerá de cuánto más rápido se carguen las páginas, del número de scripts cuya carga retrases y de lo bien optimizado que esté tu sitio.
Si ya tienes un sitio web rápido y has tomado medidas para optimizarlo, como eliminar scripts sin usar, posponer JavaScript quizá no tenga un impacto significativo. Aun así, cada optimización cuenta cuando se trata del rendimiento de la página.
¿Qué más puedo hacer para mejorar la velocidad de carga de mis páginas?
Hay muchas formas de mejorar la velocidad de carga de las páginas de un sitio web. Para conseguir el mayor impacto, estas son las optimizaciones que te recomendamos implementar:
- Plantéate utilizar un proveedor de hosting gestionado para WordPress.
- Implementa una CDN (red de distribución de contenido).
- Mejora las Core Web Vitals en WordPress.
- Minifica CSS.
- Activa la carga diferida en WordPress.
Optimizar tu sitio web para mejorar su rendimiento puede llevar un tiempo, pero los plugins de WordPress como Jetpack y Jetpack Boost hacen que el proceso sea mucho más fácil y rápido.
Recuerda que cualquier esfuerzo que hagas para mejorar la velocidad de carga de tus páginas dará sus frutos con creces con el tiempo. Si consigues mantener tu sitio web en las mejores condiciones, tus visitantes disfrutarán de una experiencia mucho mejor.
Mejora hoy mismo el rendimiento de tu sitio web
Hay muchos cambios que puedes hacer en tu sitio web para mejorar su rendimiento. Si utilizas varios scripts y plugins de terceros en tu sitio, probablemente haya mucho código de JavaScript ejecutándose en segundo plano. Ese código es importante, pero puede impedir que el resto de tu sitio web se cargue lo más rápido posible.
Posponer el análisis de JavaScript en WordPress es más fácil de lo que imaginas y puede mejorar significativamente el rendimiento de tu sitio web. Estas son las formas de posponer el análisis de JavaScript:
- Usa un plugin como Jetpack Boost.
- Pospón la carga de JavaScript mediante el archivo functions.php del tema.
Jetpack ofrece varios plugins para mejorar el rendimiento de tu sitio web de WordPress. Jetpack Boost es solo uno de ellos. Si usas el plugin Jetpack, también tienes acceso a una CDN gratuita que puede mejorar drásticamente la velocidad de carga de tu sitio. ¡Plantéate empezar con Jetpack hoy!
Jetpack 