Cómo aplazar el análisis de JavaScript en WordPress

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. Las características críticas como los formularios de contacto y el análisis del sitio son solo un par de formas en que JavaScript se pone en práctica a diario. Desafortunadamente, si bien es muy útil, todo este código tiene el potencial de ralentizar su sitio.

Aplazar el análisis de JavaScript (también llamado simplemente "aplazar JavaScript") significa decirle a su sitio que cargue su código JavaScript no esencial en último lugar. Este simple ajuste puede mejorar los tiempos de carga de su página y el rendimiento general, dependiendo de la cantidad de scripts que use su sitio web.

En este artículo, desglosaremos exactamente qué es el análisis sintáctico y qué implica el aplazamiento. También discutiremos cómo aplazar JavaScript puede beneficiar a su sitio y le mostraremos cómo hacerlo. Finalmente, terminaremos con algunas preguntas frecuentes (FAQ) para resolver cualquier duda que quede.

¿Qué significa "diferir el análisis de JavaScript"?

Cuando visita un sitio web, su navegador solicita archivos de un servidor. Estos archivos contienen HTML, CSS y JavaScript para que el navegador los analice (interprete) a fin de crear una página web visual e interactiva.

Los sitios web a menudo requieren que su navegador cargue docenas (o incluso cientos) de elementos y archivos para una sola página. Aquí hay un ejemplo rápido de una de las páginas de Google, para que pueda ver cuántos archivos usa:

Cuando su navegador analiza archivos HTML, se detiene para procesar cualquier CSS que encuentre y ejecutar código JavaScript. Hasta que el navegador haya terminado 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 se carga muy rápido). Pero la demora está ahí, y cuanto más JavaScript use su sitio, más tiempo puede durar. Si su sitio web no está optimizado para el rendimiento, el análisis de JavaScript puede ralentizar significativamente sus tiempos de carga.

Aplazar el análisis de JavaScript significa decirle a su navegador: "Oye, si te encuentras con este código JavaScript, no lo analices hasta que hayas terminado con el resto de la página". Desde la perspectiva del visitante, esto significa que los elementos visibles de la página se cargarán más rápido. Luego, el JavaScript terminará de ejecutarse en segundo plano y nadie se dará cuenta (excepto usted y el navegador).

¿Cuáles son los beneficios de diferir JavaScript?

El principal beneficio de diferir JavaScript es que las páginas se cargarán más rápido para los visitantes. Los scripts aún deberán cargarse en segundo plano, pero aplazarlos debería mejorar su puntuación de pintura con contenido más grande (LCP), que es una de las tres métricas principales de Web Vital.

Es importante recordar que el tiempo de carga de la página es uno de los aspectos más importantes de una gran experiencia de usuario. Si un sitio web tarda demasiado en cargarse, normalmente perderá un porcentaje de visitantes. Además, los tiempos de carga lentos pueden dar la impresión de que hay algún problema con su sitio.

Cómo diferir el análisis de JavaScript en WordPress

WordPress ofrece más de una forma de optimizar su sitio web. Cuando se trata de diferir JavaScript, hay dos métodos que puede usar.

El primer método es el más fácil porque implica el uso de un complemento.

1. Aplazar el análisis de JavaScript con un complemento gratuito

Si no se siente cómodo editando los archivos de su sitio web y agregándoles código, su mejor opción es usar un complemento. Una de las mejores herramientas que puede usar para diferir JavaScript no esencial en WordPress es Jetpack Boost.

Jetpack Boost es un complemento gratuito que puede usar para optimizar el rendimiento de su sitio de WordPress. Es increíblemente fácil de configurar, por lo que es una excelente opción para principiantes.

Una vez que active el complemento, deberá conectarse a una cuenta de WordPress.com (puede usar una cuenta gratuita para esto).

Cuando esté listo, vaya a Jetpack → Boost en su panel de control de WordPress y obtendrá una descripción general rápida de cómo le está yendo a su sitio web en términos de rendimiento.

Si observa las opciones a continuación, verá una configuración que dice Defer Non-Essential JavaScript . Puede alternar esta configuración y aplazará automáticamente el análisis de JavaScript en todo su sitio web.

El complemento especifica JavaScript no esencial porque solo afecta los scripts que no son críticos para el sitio web.

Una vez que esta configuración esté habilitada, asegúrese de revisar su sitio web para asegurarse de que todo funcione bien. Si nota algo inesperado, simplemente deshabilite la función.

Tenga en cuenta que Jetpack Boost también puede habilitar la carga diferida y optimizar el CSS de su sitio. Esto significa que el complemento moverá el CSS crítico al inicio de cada documento HTML para que el navegador lo analice primero. Esta configuración es especialmente importante para mejorar la puntuación de First Input Delay (FID).

2. Aplazar el análisis de JavaScript utilizando functions.php expediente

El segundo método consiste en editar el archivo functions.php de su tema. El proceso no es demasiado complicado, pero agregar código a WordPress a veces puede tener efectos secundarios inesperados.

Este método es para usuarios experimentados, ya que pueden pasar muchas cosas al eliminar solo un archivo o incluso agregar accidentalmente un espacio en el lugar equivocado. Recuerde, solo querrá diferir JavaScript no esencial para evitar dañar la experiencia del usuario.

Para estar seguro, recomendamos hacer una copia de seguridad completa de su sitio web antes de editar cualquier archivo de WordPress. Incluso si tiene una copia de seguridad reciente, cree otra para tener un punto de restauración antes de realizar cualquier cambio. Si tiene Jetpack VaultPress Backup, la versión más reciente de su sitio ya se guardará para usted.

Hay dos formas de editar el archivo functions.php . Puede usar el Editor de archivos de temas de WordPress, al que puede acceder desde el menú Apariencia . Tenga en cuenta que esta opción solo está disponible si no está utilizando un tema de bloque compatible con la edición completa del sitio (FSE).

Una vez que acceda al editor, seleccione su tema activo en el menú desplegable a la derecha y busque el archivo functions.php en la lista.

Puede usar el editor para agregar o eliminar código de cualquier archivo de tema. Aún así, recomendamos no modificar ningún código existente a menos que comprenda su propósito.

Agregar código a functions.php debería ser seguro siempre que provenga de una fuente confiable. El siguiente fragmento de código configurará su sitio web para diferir 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 aplazará automáticamente todo JavaScript en su sitio, pero no tocará los scripts de jQuery. Sin embargo, no funcionará si ha iniciado sesión para evitar problemas con el tablero que no se carga correctamente.

Agregue ese script al final del archivo functions.php para que no interfiera con ningún otro código interno. Haga clic en Actualizar archivo en la parte inferior de la página, ¡y listo!

Si no tiene acceso al editor de archivos de temas de WordPress pero se siente cómodo trabajando con código en un servidor, puede editar functions.php conectándose a su sitio web a través del Protocolo de transferencia de archivos (FTP). Necesitará usar un cliente FTP como FileZilla para hacer esto. Recuerde, asegúrese de realizar una copia de seguridad completa del sitio antes de hacer nada.

Una vez que se conecte al servidor de su sitio web, deberá encontrar la carpeta raíz de WordPress. Esta es la carpeta que contiene todos los archivos de su sitio. Por lo general, se llama www, public_html o el nombre de su sitio.

Abra esa carpeta y vaya a wp-content/themes . Debe haber varias carpetas, una para cada tema instalado en su sitio. Identifique la carpeta de su tema activo y ábrala. El archivo functions.php debe estar dentro.

Haga clic con el botón derecho en ese archivo y busque una opción que diga algo como Editar (esto variará según el cliente FTP que use). Esa opción abrirá el archivo usando su editor de texto predeterminado. Desde aquí, puede agregar el fragmento de código que compartimos anteriormente y luego guardar los cambios en el archivo.

Las mismas reglas se aplican al editar archivos de WordPress a través de FTP. No edite ningún código si no está seguro de lo que hace y tenga cuidado al agregar fragmentos de código a menos que confíe en su fuente.

Siempre puede restaurar su sitio de WordPress utilizando la copia de seguridad reciente si se encuentra con errores después de editar el archivo functions.php . Jetpack VaultPress Backup es una opción fantástica en estos casos porque ofrece la funcionalidad de restauración con un solo clic, incluso si su sitio está completamente inactivo.

Preguntas frecuentes sobre el aplazamiento de JavaScript

Si aún tiene preguntas sobre cómo funciona el aplazamiento de JavaScript, esta sección las responderá. Comencemos hablando de los posibles efectos secundarios de aplazar las secuencias de comandos.

¿Aplazar JavaScript puede romper tu sitio?

Sí, dependiendo de los complementos y el tema que esté utilizando, es posible que diferir JavaScript pueda romper ciertos elementos de su sitio. Y, si está utilizando el método manual, un error en su código podría hacer que su sitio no funcione por completo.

Por eso es más seguro utilizar una herramienta como Jetpack Boost para encargarse de esta tarea. Si bien aún es posible que diferir JavaScript pueda causar un problema, puede desactivar fácilmente la función o el complemento por completo.

¿Aplazar el análisis de JavaScript es lo mismo que "eliminar JavaScript que bloquea el renderizado"?

Si utiliza servicios de medición del rendimiento del sitio web como PageSpeed ​​Insights o GTMetrix, es posible que observe que también recomiendan eliminar el JavaScript que bloquea el renderizado de su sitio web. Debido al lenguaje, puede ser fácil confundir esta sugerencia de optimización con el aplazamiento del análisis de JavaScript.

El JavaScript que bloquea la representación se refiere a cualquier código que bloquee la representación de su sitio. En muchos casos, la mejor solución es eliminar este código si no cumple con un propósito específico. Si tiene una función, puede aplazarla en su lugar.

Determinar qué scripts son necesarios y cuáles no dependerá de su criterio. Pero servicios como GTMetrix pueden ayudarlo a identificar JavaScript no utilizado en su sitio web.

Cualquier script que se encuentre dentro de esta categoría debe ser seguro para eliminar. Para otros scripts, puede usar complementos (como Jetpack Boost) o modificar el archivo functions.php manualmente para diferirlos.

¿Puedo eliminar JavaScript de forma segura en lugar de diferirlo?

Esto depende de los scripts a los que te refieras. No es raro que los sitios web de WordPress acumulen código sin usar a medida que crecen. Esto sucede cuando instala y desactiva complementos, prueba servicios de terceros y deja de usarlos.

Dejar ese JavaScript "huérfano" en su sitio web a veces puede crear un riesgo de seguridad. Además, puede afectar el rendimiento de su sitio web porque es posible que los navegadores aún necesiten analizarlo.

Si revisa la pregunta anterior, le mostramos cómo usar GTMetrix para identificar JavaScript en su sitio web que puede eliminar de manera segura.

¿Aplazar JavaScript mejora el rendimiento de la página?

Aplazar JavaScript debería hacer que las páginas de su sitio web se carguen más rápido. Cuánto más rápido dependerá de la cantidad de secuencias de comandos que esté aplazando y qué tan bien optimizado esté su sitio web.

Si ya tiene un sitio web rápido y ha tomado medidas para optimizarlo, como eliminar las secuencias de comandos no utilizadas, es posible que diferir JavaScript no tenga un impacto significativo. Aún así, cada bit de optimización cuenta cuando se trata del rendimiento de la página.

¿Qué más puedo hacer para mejorar la velocidad de carga de mi página?

Hay muchas formas de mejorar la velocidad de carga de las páginas de un sitio web. Para obtener el mayor impacto, estas son las optimizaciones que sugerimos implementar:

1. Considere usar un proveedor de alojamiento de WordPress administrado.
2. Implementar una red de entrega de contenido (CDN).
3. Mejore Core Web Vitals en WordPress.
4. Minimizar CSS.
5. Habilite la carga diferida en WordPress.

Optimizar el rendimiento de su sitio web puede llevar un tiempo, pero los complementos de WordPress como Jetpack y Jetpack Boost hacen que el proceso sea mucho más fácil y rápido.

Recuerde que cualquier esfuerzo que haga para mejorar la velocidad de carga de su página valdrá la pena con el tiempo. Si puede mantener su sitio web funcionando en la mejor forma, sus visitantes tendrán una experiencia mucho mejor.

Mejore el rendimiento de su sitio web hoy

Hay muchos cambios que puede hacer en su sitio web para mejorar su rendimiento. Si usa varios scripts y complementos de terceros en su sitio, es probable que haya una gran cantidad de código JavaScript ejecutándose en segundo plano. Ese código es importante, pero puede evitar que el resto de su sitio web se cargue lo más rápido posible.

Aplazar el análisis de JavaScript en WordPress es más fácil de lo que piensa y puede afectar significativamente el rendimiento de su sitio web. Estas son las formas en que puede diferir el análisis de JavaScript:

1. Use un complemento como Jetpack Boost.
2. Diferir JavaScript usando el archivo functions.php .

Jetpack ofrece varios complementos para mejorar el rendimiento de su sitio web de WordPress. Jetpack Boost es solo uno de ellos. Si usa el complemento Jetpack, también obtiene acceso a un CDN gratuito que puede mejorar drásticamente las velocidades de carga de su sitio. ¡Considere comenzar con Jetpack hoy!