Cómo afectan las tareas largas de JavaScript al rendimiento del sitio web y qué hacer al respecto

Ejecutar tareas de JavaScript suele ser el origen de los problemas más comunes de rendimiento de un sitio web. Evitar las llamadas tareas largas y bloquear el hilo principal de JavaScript (JS) es una de las estrategias más importantes para mejorar el rendimiento y en este artículo, echaremos un vistazo a cómo las tareas largas pueden afectar al rendimiento del sitio web y también a cuáles son las medidas que se pueden tomar para solucionarlas.

Índice

• ¿Qué es una tarea larga de JavaScript?
• ¿Por qué son perjudiciales las tareas largas de JavaScript para Core Web Vitals?
• ¿Cómo encontrar y medir las tareas largas de JavaScript?
• Recomendaciones generales para eliminar las tareas largas de JavaScript
• Cómo resolvimos el problema de las tareas largas de JavaScript en Prism

¿Qué es una tarea larga de JavaScript?

Los navegadores realizan las operaciones de visualización de la página en un solo hilo, por lo que es crucial que el tiempo de ejecución de la tarea en JS no sea superior a 50 ms., y si supera este indicador, el fenómeno se denomina tarea larga. Cuando se produce, el usuario nota una carga mayor en el navegador, por lo que en este caso, los clics en los elementos de la página se retrasan, el desplazamiento se vuelve brusco o la página no responde.

También, además del código del sitio (ejecución de JS), la formación de tareas largas puede estar influenciada por la velocidad de la red y la potencia de procesamiento. Por ejemplo, si las tareas de larga duración bloquean el hilo principal del navegador debido a la baja potencia de procesamiento, el navegador no podrá procesar los datos de usuario con la suficiente rapidez, lo que provocará un retraso en la respuesta de la página.

Cabe mencionar que las tareas largas pueden surgir cuando se cambia el estilo de un elemento a través de JS (por ejemplo, cuando cambia la altura de un bloque), lo que obliga a recalcular las coordenadas en la página: recalcular el estilo => reflujo, repintar.

¿Por qué son perjudiciales las tareas largas de JavaScript para Core Web Vitals?

La métrica FID (First Input Delay o latencia de la primera interacción) es la más afectada por las tareas largas. De hecho, el hilo principal del navegador no está ocupado de manera uniforme a lo largo de la vida de una página, por lo que la FID puede variar mucho, dependiendo de cuándo exactamente interactúa el usuario por primera vez con la página. Como resultado, algunos usuarios pueden no experimentar ninguna latencia, mientras que otros se enfrentan directamente a los síntomas de sobrecarga que hemos comentado antes. Por eso, es importante entender cómo buscar tareas largas y optimizar el código para mejorar la FID de su sitio.

La FID depende directamente del comportamiento de los usuarios reales y, tal y como hemos mencionado anteriormente, es único para cada uno de ellos. La clave aquí es la monitorización del comportamiento, que se puede hacer con una herramienta de monitoreo de Core Web Vitals para realizar una optimización basada en datos reales.

¿Cómo encontrar y medir las tareas largas de JavaScript?

Los servicios que se muestran a continuación nos ayudarán con ello:

Chrome DevTools

En el panel de rendimiento, registre la traza de carga de la página web.

 [1] 

Busque las banderas rojas en el área de flujo. Por su parte, las «tareas» aparecen en gris.

Pase el cursor por encima de la barra para ver el tiempo de ejecución de la tarea y si se considera «larga».

Para averiguar el origen de una tarea larga, seleccione la barra de tareas gris. En el panel de deslizamiento de la parte inferior, seleccione las opciones de abajo a arriba y de agrupación por actividad y verá qué acciones han contribuido más a la ejecución de la tarea.

​​

Webpagetest.org

El bloqueo del hilo principal durante 50 ms se muestra en el diagrama mediante bloques rojos. Este evento también bloquea la entrada del usuario. El color verde significa que el hilo no está bloqueado.

API de tareas largas

Podemos medir tareas largas en cualquier aplicación después de suscribirnos a la interfaz PerformanceObserver con el siguiente código:

var observer = new PerformanceObserver(function(list) {

var perfEntries = list.getEntries();

for (var i = 0; i < perfEntries.length; i++) {

     // Process long task notifications:

     // report back for analytics and monitoring

     // …

}

});

// register observer for long task notifications

observer.observe({entryTypes: [“longtask”]});

// Long script execution after this will result in queueing

// and receiving “longtask” entries in the observer.

Recomendaciones generales para eliminar las tareas largas de JavaScript

• Ejecutar el código de los Web Workers en un hilo separado, permitiendo que el hilo principal se centre en otras tareas importantes, como el análisis sintáctico de HTML, la preparación del árbol de renderizado, el renderizado de píxeles, la respuesta a la entrada del usuario, etc.
• Dividir el código JavaScript marcado como tareas largas en tareas más pequeñas, utilizando las funciones «setTimeout/requestidlecallback/requestAnimationFrame», ya que esto hará que el hilo principal se ejecute de la manera más eficiente posible y realice todas las operaciones sin ningún retraso.
• Facilitar la carga de la red al cargar una página (hacer el menor número posible de peticiones de red o cargarlas lo más tarde posible, preferiblemente después del evento FID).
• Retrasar el JavaScript no utilizado utilizando async o defer.

Cómo resolvimos el problema de las tareas largas de JavaScript en Prism

Clickio Prism utiliza tecnología avanzada para crear una versión de un sitio web de carga rápida y optimizada para móviles. Al desarrollar Prism, era importante asegurarse de que las páginas se cargarán rápidamente, sin ningún impacto negativo en la experiencia de usuario, por lo que tomamos las siguientes medidas para eliminar las tareas largas de JavaScript:

• Dividir las tareas largas en otras más pequeñas utilizando la función requestidlecallback/requestAnimationFrame.
• Conseguir grandes datos que no interactúen con el DOM (utilizando Web Workers).
• Crear una cola de scripts de carga de widgets.
• Reducir la carga de la CPU de los procesos al cargar la página (reduciendo el número de peticiones y la transferencia de datos mientras se renderiza la página).
• Cargar algunos rastreadores de terceros con la biblioteca partytown.js.

Al incorporar ajustes técnicos como estos, junto con otras características como una CDN global y una carga lenta inteligente, Prism puede marcar una diferencia significativa en el rendimiento del sitio y la experiencia de usuario. De hecho, los editores que utilizan Prism ven cómo los visitantes pasan un 45 % más de tiempo en su sitio y registran un aumento del 59 % en su RPM de sesión.

Para obtener más información sobre Prism, o hacer una prueba gratuita, haga clic aquí.