6 formas fáciles de reducir el tiempo de ejecución de JavaScript en WordPress

Nada frustra a los visitantes del sitio web más que una página de carga lenta. Hay muchas razones para esto y una de ellas es el tiempo excesivo de ejecución de JavaScript.

Cuando JavaScript tarda demasiado en procesarse, retrasa todo, que causa cargas de página lentas, una experiencia de usuario deficiente e incluso perjudicar su clasificación de SEO.

Pero no te preocupes. La optimización de JavaScript no tiene que ser complicada.

En esta guía, lo guiaremos a través de formas fáciles y efectivas de reducir el tiempo de ejecución de JavaScript en WordPress.

Ya sea que sea un usuario principiante o un usuario avanzado de WordPress, estas maneras fáciles ayudarán a acelerar su sitio, mejorar los vitales de la web central y aumentar su rendimiento de SEO.

¡Vamos a sumergirnos!

¿Cuál es el tiempo de ejecución de JavaScript?

El tiempo de ejecución de JavaScript se refiere a la cantidad de tiempo que tarda un navegador web en procesar y ejecutar el código JavaScript en una página web.

Cada vez que un usuario carga un sitio, el navegador debe analizar, compilar y ejecutar scripts de JavaScript. Si estos scripts son demasiado complejos, no optimizados o de bloqueo de renderizado, pueden ralentizar el rendimiento de la página, lo que lleva a tiempos de carga más altos y una mala experiencia del usuario.

¿Cuál es el impacto del tiempo de ejecución de JavaScript en el rendimiento?

Aquí hay un desglose de cómo el tiempo de ejecución de JavaScript afecta el rendimiento:

1. Bloquear el hilo principal

Piense en un túnel estrecho donde solo un automóvil puede pasar a la vez. El tráfico se mueve suavemente siempre que ningún vehículo permanezca demasiado tiempo por dentro.

Los navegadores funcionan de la misma manera: dependen de un solo hilo principal para administrar tareas como cargar contenido, hacer páginas y procesar las interacciones del usuario.

Cuando JavaScript se ejecuta, tiene prioridad en este hilo. Si lleva demasiado tiempo ejecutarse, es como un camión que se detiene en el túnel, sosteniendo todos los demás autos. Este retraso evita que el navegador maneje otras tareas, causando cargas de página lentas e interacciones que no respondan.

2. Representación retrasada

Cuando visita un sitio web, espera que el contenido aparezca en la pantalla rápidamente. Este proceso, conocido como "pintura" el contenido, garantiza una experiencia de usuario fluida.

Sin embargo, cuando la ejecución de JavaScript lleva demasiado tiempo, retrasa esta representación inicial, dejando a los usuarios mirando una pantalla en blanco, lo que causa una mala experiencia del usuario.

3. Primera retraso de entrada (FID)

Hace cuánto tiempo tarda el sitio web en responder a la primera interacción de un usuario, como hacer clic en un botón. Un FID retrasado da como resultado una experiencia lenta para los usuarios, lo cual es frustrante.

El aumento del tiempo de ejecución de JavaScript tiene un impacto directo en el primer retraso de entrada (FID). Cuando JavaScript está sobrecargado, el sitio web no puede responder a la entrada del usuario de inmediato, por lo que no responde y proporciona una mala experiencia del usuario.

4. Consumo de memoria

El código JavaScript, como cualquier otro programa, requiere que se ejecute la memoria. El código complejo o mal optimizado puede comer una cantidad significativa de memoria.

Como resultado, esto puede ralentizar el navegador y potencialmente causar bloqueos, especialmente en dispositivos móviles con poca memoria.

5. Afecta negativamente el SEO

Los motores de búsqueda como Google usan la velocidad de la página al clasificar los resultados de búsqueda.

La ejecución lenta de JavaScript puede reducir el rendimiento de la página y afectar la clasificación del sitio en los resultados de búsqueda.

En resumen, la ejecución de JavaScript retrasada ralentiza la representación, aumenta FID e incluso puede sobrecargar el navegador. Todo esto se suma a una terrible experiencia del usuario, lo que podría hacer que los visitantes abandonen su sitio web.

¿Cómo medir el tiempo de ejecución de JavaScript?

Para optimizar el tiempo de ejecución de JavaScript, primero debe medirlo con precisión. Afortunadamente, existen varias herramientas y técnicas disponibles para monitorear el rendimiento de JavaScript e identificar problemas que afectan la velocidad de su sitio de WordPress.

Medición del tiempo de ejecución de JS con PageSpeed ​​Insights

Google PageSpeed ​​Insights es una herramienta gratuita de Google que mide la velocidad de la página web y proporciona ideas de optimización.

Aquí le mostramos cómo usarlo para medir el tiempo de ejecución de JavaScript:

Visite el sitio web de PageSpeed ​​Insights o use la extensión de Chrome de PageSpeed ​​Insights.

Aquí, ingrese la URL del sitio web que desea analizar y haga clic en el botón "Analizar".

PageSpeed ​​Insights proporcionará un informe que contiene una serie de indicadores de rendimiento, incluido el tiempo de ejecución de JavaScript.

Si obtiene una advertencia sobre el tiempo reducido de ejecución de JavaScript, siga las sugerencias.

Medición del tiempo de ejecución de JS con GTMetrix

GTMetrix es otra herramienta común para medir el rendimiento de la página web, que incluye el tiempo de ejecución de JavaScript.

Vaya al sitio web de GTMetrix, ingrese la URL de la página web y luego haga clic en la opción Prueba ahora.

Después de un tiempo de carga, GTMetrix generará un informe completo con métricas de rendimiento, incluido el tiempo de ejecución de JavaScript.

Puede usar estas ideas de GTMetrix para optimizar su código JavaScript y mejorar el rendimiento general de la página web.

Cómo reducir el tiempo de ejecución de JavaScript

Aquí hay algunas formas fáciles de reducir el tiempo de ejecución de JavaScript, lo que hace que su sitio web sea más rápido y mejorando la experiencia del usuario.

1. Evite el tema/complementos hinchados

Una de las razones más comunes para la ejecución lenta de JavaScript en WordPress son los temas hinchados y los complementos excesivos.

Si bien los temas y complementos ricos en características pueden parecer atractivos, a menudo tienen costo de rendimiento.

Cada script, animación o función adicionales se suma al tiempo de carga de su sitio web, lo que lleva a una ejecución más lenta, un mayor uso de CPU y una mala experiencia del usuario.

¿Por qué los temas y complementos hinchados son un problema?

• Ejecución excesiva del código: los temas pesados ​​y los complementos mal codificados requieren más recursos, aumentando el tiempo de ejecución de JavaScript.
• Solicitudes HTTP adicionales: algunos temas y complementos cargan CSS, JavaScript y fuentes adicionales, incluso si no los usa.
• Aumento de la carga del servidor: demasiados complementos activos pueden ralentizar el tiempo de respuesta de su servidor, afectando la experiencia del SEO y el usuario.

¿Cómo elegir alternativas livianas?

• Use temas optimizados por rendimiento: quédese con temas rápidos y mínimos como GeneratePress, Astra o Kadence que priorizan la velocidad.
• Auditar sus complementos: revise los complementos de forma regular y desactive los que ya no sean necesarios. Si un complemento tiene mucho JavaScript, intente usar una alternativa liviana.
• Use solo lo que necesita: evite instalar múltiples complementos para funciones similares. En su lugar, opte por soluciones todo en uno que minimicen la sobrecarga de script.
• Limite los scripts externos: evite usar temas y complementos que contengan scripts, fuentes o códigos de seguimiento innecesarios de terceros.

Al mantener su configuración de WordPress optimizada, reducirá el tiempo de ejecución de JavaScript, acelerará su sitio de WordPress y mejorará tanto las clasificaciones de SEO como la experiencia del usuario.

2. Retraso JS y elimine JS no utilizado

Debe retrasar los archivos JS para que no se puedan cargar hasta la interacción del usuario. Significa que el navegador no ejecutará ningún scripts JS a menos que el usuario haga clic en un botón o se desplaza a través del contenido de una página.

La mayoría de los complementos de optimización como FlyingPress, WP Rocket, Perfmatters, Scripts Flying, etc., hacen esto. Sin embargo, cada uno lo hace de manera diferente, así que lea la documentación del complemento sobre cómo agregar archivos (por nombre de archivo, palabra clave o automática, como con WP Rocket).

Por ejemplo, si está utilizando el complemento WP Rocket, puede aprovechar su función de ejecución de JavaScript de retraso.

Simplemente navegue a la pestaña Optimización de archivos y verifique la opción de ejecución de JavaScript de retraso . El complemento retrasará automáticamente la carga de los archivos JS hasta la interacción del usuario.

O, si está utilizando perfmatters, simplemente vaya a la configuración del complemento de perfmatters . Haga clic en el menú JavaScript , luego altere el retraso JavaScript en la sección de retraso .

Además, debe eliminar cualquier archivo JS no utilizado. En otras palabras, todos los scripts JS que son innecesarios o no aparecen en el contenido de arriba a la página solo deben cargarse después de que se haya mostrado la página.

Permite que el navegador solo represente el material necesario en lugar de estar empantanado por archivos JS innecesarios.

3. Diferir JS

Otra forma efectiva de reducir el tiempo de ejecución de JS es retrasar los archivos JS.

Al posponer JavaScript en su sitio web de WordPress, el navegador solo lo cargará cuando se represente la página.

Puede diferir los archivos JS tanto manualmente como con la ayuda de complementos.

Si desea utilizar el atributo de diferir manualmente, primero debe identificar los scripts JS para diferir antes de agregar el atributo de diferir.

Aquí hay un ejemplo de un atributo de referencia:

Si prefiere usar un complemento, puede elegir entre WP Rocket, AutOptimize, FlyingPress, Cleanup de activos, etc.

Por ejemplo, al igual que el retraso JS, WP Rocket también ofrece la función de diferencial de carga JavaScript.

En la pestaña Optimización de archivos , puede cargar JavaScript diferido y restringir que cualquier archivo JS específico se aplazara. ¡En solo unos pocos clics, podrá implementar una técnica importante de optimización de rendimiento web!

4. Minificar JS

Una de las formas más fáciles pero más efectivas de reducir el tiempo de ejecución de JavaScript en WordPress es la minificación.

Minificar JavaScript significa eliminar caracteres innecesarios, como espacios en blanco, saltos de línea y comentarios, sin afectar su funcionalidad. El resultado? Tamaños de archivos más pequeños, descargas más rápidas y velocidad de página mejorada.

Hay varias herramientas de minificación de JavaScript disponibles que lo ayudarán a hacer el trabajo.

Para un enfoque sin problemas, use un complemento como AutoPtimize, WP Rocket, Fast Velocity Minify, FlyingPress, etc.

Simplemente instale su complemento preferido, habilite la minificación de JavaScript y deje que la herramienta haga el trabajo.

5. Descargar JavaScript en páginas específicas

No todos los script deben ejecutarse en cada página de su sitio de WordPress. Si es así, puede aumentar el tiempo de ejecución, ralentizar el rendimiento e afectar negativamente la experiencia del usuario.

Por ejemplo:

• Se carga el script de formulario de contacto en cada página, incluso cuando no hay forma.
• WooCommerce Script que se ejecuta en una publicación de blog que no lo necesita.
• Script Script aparece en páginas de texto pesados ​​que no tienen controles deslizantes.

Cada script innecesario aumenta la carga de trabajo de ejecución de JavaScript, desacelerando la representación de la página.

Una de las soluciones más fáciles de este problema es deshabilitar los scripts innecesarios en las páginas donde no son necesarios.

Los complementos como la limpieza de activos o los perfmatteros le permiten deshabilitar JavaScript por página, tipo de publicación o categoría sin modificar el código.

O, si se siente cómodo con el código, use wp_dequeue_script () en su archivo functions.php para evitar que se carguen scripts innecesarios.

function remove_unnecessary_js() { if (!is_page('contact')) { wp_dequeue_script('contact-form-script'); } } add_action('wp_enqueue_scripts', 'remove_unnecessary_js');

6. Host JavaScript de terceros localmente

Las fuentes, los scripts de análisis y los códigos de seguimiento son algunos de los archivos JavaScript de terceros que a menudo se cargan de fuentes externas. Si bien estos scripts proporcionan una funcionalidad útil, pueden aumentar considerablemente el tiempo de ejecución de JavaScript debido a las solicitudes externas tardías, la latencia de la red y los tiempos de respuesta del servidor.

Al alojar archivos de JavaScript de terceros localmente, puede mejorar los tiempos de carga, reducir la dependencia de los servidores externos y aumentar el rendimiento general del sitio.

Para alojar a JavaScript de terceros localmente, visite el sitio del proveedor de terceros y descargue el archivo JavaScript que necesita (por ejemplo, Google Fonts, Recaptcha o Analytics Scripts).

Ahora, use FTP para almacenar el archivo en su /wp-content/uploads/ o /wp-includes/js/ directorio.

A continuación, modifique las funciones de su tema.php o enqueue el script en wp_enqueue_script () para apuntar a la versión local en lugar de la URL externa.

function load_local_script() { wp_enqueue_script('local-js', get_template_directory_uri() . '/js/script-name.js', array(), null, true); } add_action('wp_enqueue_scripts', 'load_local_script');

Use complementos como WP Rocket o AutOptimize para minificar y almacenar en caché los archivos JavaScript alojados localmente para una ejecución más rápida.

Comience a reducir el tiempo de ejecución de JS hoy

Un sitio lento de WordPress puede frustrar a los visitantes y dañar su clasificación de SEO. ¿Uno de los culpables clave? Tiempo de ejecución excesivo de JavaScript. Cuando JavaScript tarda demasiado en procesarse, bloquea el hilo principal, retrasa la representación, aumenta el primer retraso de entrada (FID) e impacta negativamente el rendimiento.

Esta guía le mostrará formas fáciles de reducir el tiempo de ejecución de JavaScript en WordPress, lo que le permite mejorar la velocidad del sitio y la experiencia del usuario. Las estrategias clave incluyen:

• Evitar temas y complementos hinchados para evitar la ejecución innecesaria del código.
• Retrasar y eliminar JavaScript innecesario para evitar que los scripts no esenciales ralenten sus páginas.
• Diferir la ejecución de JavaScript para permitir que el navegador priorice el contenido crítico primero.
• Minificar archivos JavaScript para reducir el tamaño del archivo y acelerar la ejecución.
• Descargar JavaScript no utilizado de páginas específicas para eliminar scripts innecesarios.
• Host JavaScript de terceros localmente para eliminar los retrasos causados ​​por las solicitudes de servidor externas.

Al implementar estas técnicas de optimización de JavaScript, logrará mejores vitales de la Web Core, alta velocidad de página y experiencia de usuario perfecta para sus visitantes.

Para obtener más información, consulte estos otros recursos útiles:

• 10 mejores complementos de caché de WordPress (opciones gratuitas y premium)
• Cómo arreglar fácilmente el almacenamiento de almacenamiento de apalancamiento en WordPress
• WP Rocket Review: ¿Realmente vale la pena pagar?
• ¿Vale la pena los perfmatters? Revisión en profundidad
• Revisión de Nitropack: ¿Mejor herramienta de velocidad o SEO de sombrero negro?

Por último, síganos en Facebook y X (anteriormente Twitter) para mantenerse actualizados sobre los últimos artículos relacionados con WordPress y blogs.