Probar el impacto de JavaScript en la velocidad de tu página

Tuvimos una objeción el día de hoy sobre el impacto de JavaScript. El prospecto sugirió que añadir el código afectaría la velocidad de la página. Añadir el código no es necesario, pero ES un ahorrador de tiempo muy conveniente. Esto me hizo pensar que una publicación sobre cómo puedes MEDIR el impacto que JavaScript puede tener en la velocidad de un sitio puede ser algo útil. Mientras que yo voy a utilizar JavaScript en una página de WordPress para hacer la prueba, tú puedes hacer fácilmente las mismas pruebas para CUALQUIER pieza de JavaScript que se te haya pedido añadir a un sitio web.

Herramientas fáciles de utilizar para medir el impacto de JavaScript

Yo decidí probar nuestro JavaScript utilizando dos herramientas de pruebas independientes:

Web.dev era la herramienta que utilizó el cliente con el que estaba hablando. Esta herramienta gratuita ejecuta la demanda y no era el que yo había utilizado anteriormente.

Lighthouse viene con Chrome y se ejecuta en tu navegador. Dado que el buscador va a ejecutar JavaScript y vas a ver cualquier efecto, esto pareció una buena opción también. Es un curso gratuito por supuesto y también es de Google. También hay muchas otras herramientas por ahí. Debo mencionar GT Metrix así como una buena conocida, pero pienso que dos herramientas deben ser suficientes para hacer el punto..

Web.dev mostró virtualmente que no hay disminución en el rendimiento al añadir JavaScript

Muy simple, yo utilicé el plugin “Header and Footer” en WordPress para instalar scripts como el que proporcionamos en InLinks. Yo ejecuté las pruebas en la “página de inicio de la guía semántica de SEO”, el cual funciona con WordPress. Web.dev mostró casi resultados idénticos con y sin el código:

Había (en este caso) un solo punto de diferencia en el desempeño. Las cosas para notar aquí incluyen que el tiempo de “First Cointentful Paint” no cambió. Eso es porque el código que añadimos en este caso utiliza la etiqueta “aplazar”, que significa que no se ejecuta hasta que las cosas importantes se ejecutan de cualquier forma. Sin embargo, hubo un pequeño cambio en el “índice de velocidad”.

Debes ejecutar la prueba algunas pocas veces, así como otros factores en el índice de velocidad. La ejecuté una segunda vez con el código y obtuve una calificación de 53 en el desempeño, luego 54, y cuando comencé a utilizarlo rápidamente, pude reducirlo a 47, pero esto probablemente comenzó a causar otro tráfico en el servidor.

Tu experiencia puede variar. ¡Algunos códigos de JavaScript van a tener un código mucho más alto en el tiempo de carga que InLinks! En este caso, ¡la carga de JavaScript era mucho menos importante que otros problemas de renderizado que el CSS inflado que está siendo utilizado en el plugin de WordPress!

¿Lighthouse está de acuerdo con Web.Dev?

La herramienta Lighthouse se incluye con Chrome y puede encontrarla fácilmente haciendo «clic derecho» en el menú de cualquier página que desee ver, luego seleccione «inspeccionar». La herramienta faro está en las pestañas.

Aquí estaban las diferencias, que nuevamente eran menores:

¡Pero ESPERA! ¡Esa no es la historia completa!

Hasta ahora eso implicó que puedo simplemente utilizar estas herramientas con y sin JavaScript para medir el impacto. Bueno, resulta que, si tú usas estas herramientas para arreglar estos problemas PRINCIPALES, entonces ¡probablemente vas a terminar haciendo que la página se desempeñe MEJOR con JavaScript que sin ella!

En este caso, modifiqué algunas cosas y en Lighthouse la puntuación de rendimiento pasó de los 60 a los 90 ¡CON EL CÓDIGO JAVASCRIPT!

¿Qué hay sobre Web.Dev? ¿Está de acuerdo? Lo hace aún mejor al 99%

¿Cómo aceleré la página?

Implementé la mayoría de las opciones en el plugin de “WP-Optimize”. Incluyendo:

• Almacenamiento en caché de archivos .JS y CSS
• Limpié mi base de datos
• Eliminé el complemento «Force https» ya que podía hacer Https Force con WP-Optimize
• De hecho, AGREGÉ Jetpack. La gente dice que hincha el código, pero para mí mostró un aumento de rendimiento.

En resumen

Esta prueba me dijo tres cosas.

1. El desempeño de la página PUEDE ser mejorado de forma marginal sacando una pieza de JavaScript, pero…
2. Hay mejores maneras de mejorar el desempeño (en este caso) que eliminar JavaScript.
3. El concepto de que JavaScript ralentiza un sitio parece ser un mito. Es el código detrás de JavaScript lo que puede alentar un poco las cosas, pero como el JavaScript de InLinks llama a archivos de texto plano, debería poder agregar InLinks sin impacto en el rendimiento de su sitio.