Clever Geek Handbook

¿Por qué el rendimiento web de los sistemas back-end es importante y necesita optimización?

Un día tuve una interesante conversación con el equipo de soporte del Departamento de Comercio Internacional (DIT) . Querían mejorar el rendimiento de una de sus aplicaciones web. Hablar así es lo que más me gusta en mi puesto actual. Hablo de temas que me interesan, conozco gente nueva, les hablo de oportunidades que tal vez no conozcan, por ejemplo, cómo mejorar la UX de una aplicación.



Para ser honesto, me molestó un poco cuando me informaron que este servicio es para uso interno y no público. Esto significaba que mis herramientas de goto habituales para evaluar el rendimiento web no estaban disponibles. A saber:





Esto me dio una idea: ¿cómo se pueden probar los servicios y productos internos? En este artículo intentaré averiguarlo.



La condición más importante para sistemas internos rápidos.



Como todos sabemos, el mundo ha cambiado significativamente debido a la pandemia mundial . Debido a los bloqueos generalizados, todos los que tuvieron la oportunidad comenzaron a trabajar desde casa. Esto ha tenido un impacto significativo en el rendimiento de Internet en todo el mundo y ha generado un tráfico elevado y un aumento de los tiempos de descarga. Debido a esto, todas las herramientas que los empleados necesitan para realizar su trabajo deben cargarse rápidamente y también ser interactivas.



Anteriormente, no había tales problemas de rendimiento porque los usuarios internos trabajaban desde la oficina y usaban una red de área local (LAN). El problema se agrava por el hecho de que muchos viven en ciudades pequeñas con conexiones a Internet lentas e inestables. O, por el contrario, en ciudades con alto coeficiente de competencia (ratio de contención). Dado que estamos hablando de sistemas internos, la mayoría de las veces los empleados necesitan usar una VPN para ingresar a la red de la oficina. Pero esto tampoco es muy conveniente: VPN a menudo ralentiza la velocidad de Internet .



Es importante recordar que los empleados también son usuarios. Por lo tanto, asegúrese de optimizar también sus sistemas internos, ya que el bajo rendimiento de las aplicaciones web afecta negativamente el trabajo de los empleados. ¿Qué herramientas utilizar si los sistemas internos suelen ser privados? Hablaremos de esto más a fondo.



WebPageTest



Lo primero que me gustaría aclarar es que cuando esté probando sistemas internos, no podrá utilizar la versión de código abierto de WebPageTest . Pero puedes configurar uno privado. Gracias a esto, será posible utilizarlo en la red interna.







Después del lanzamiento, se abrirá el acceso a una gran cantidad de datos para todos los sistemas internos. Asegúrese de leer la guía para obtener la mayor cantidad de información posible de WebPageTest. Configurar su propia versión no es tan difícil como parece. Hay algunos excelentes tutoriales sobre cómo configurarlo usted mismo en AWS en un par de minutos:





Esta opción permitirá que WebPageTest se ejecute automáticamente. Esto se puede hacer de varias maneras:





De esta forma, puede realizar un seguimiento del impacto en el rendimiento (positivo o negativo) de los nuevos cambios en el sistema.



Faro



La siguiente herramienta de goto que probablemente ya tenga es Lighthouse de Google. Si ha instalado una copia de Google Chrome en su computadora, entonces usar Lighthouse para auditar su sistema interno es muy simple:







En la pestaña DevTools, busque "Lighthouse" y haga clic en "Generar informe".







Un minuto después del lanzamiento, la auditoría devolverá el resultado, como se muestra en la imagen de arriba. Recomiendo encarecidamente configurar un nuevo perfil de Chrome específicamente para probar Lighthouse, ya que las extensiones del navegador pueden afectar negativamente el rendimiento (según lo que hagan exactamente en la página).



Pero Lighthouse no es solo un panel de auditoría. Aquí hay algunas otras formas en que puede usar esta herramienta:



Puede ejecutar Lighthouse usando la interfaz de línea de comandos (CLI)



Puede ejecutar Lighthouse fácilmente en todas las páginas de su sitio .



Compare el rendimiento antes y después con Lighthouse CI Diff



Ejecute Lighthouse automáticamente a intervalos regulares en varios sitios mediante la ejecución de pruebas .



Agregue su propia auditoría para monitorear partes específicas del sitio



Comparta los resultados a través de Github Gist y Lighthouse Report Viewer .



Sitespeed.io



Puse Sitespeed.io en uno de los primeros lugares de esta lista porque muchos lo subestiman. Es un maravilloso conjunto de herramientas para mejorar el rendimiento del sitio web. Se puede configurar rápida y fácilmente con un simple comando docker



o npm



. Además, Sitespeed.io es fácil de ejecutar en su máquina local para realizar pruebas rápidas.







Con sitespeed.io, puede realizar un seguimiento continuo de tantas páginas como necesite enviando datos a Graphite / Grafana para obtener paneles como este . Básicamente, Sitespeed.io es el siguiente conjunto de herramientas:



  • Coach es una herramienta automatizada que te ayuda a aumentar la velocidad de carga de tu página.
  • Browsertime es la herramienta principal de Sitespeed . Interactúa con navegadores de prueba (por ejemplo, Chrome, Firefox, iOS Safari) y recopila métricas de rendimiento, imágenes, videos y más.
  • PageXray se utiliza para convertir archivos HTTP (HAR) a JSON para facilitar su lectura y uso. (Lea más sobre los archivos HAR a continuación)
  • Throttle es una herramienta de línea de comandos para limitar la conectividad de la red para las pruebas de rendimiento.


Nota: Throttle bloquea la conexión a Internet en toda la computadora, así que recuerde apagarlo cuando lo apague.



  • Compare es una herramienta en línea para comparar archivos HAR rápida y fácilmente (por ejemplo, antes y después).


DevTools en Chrome



Todos los navegadores modernos ya tienen herramientas de desarrollo integradas. Hemos recorrido un largo camino desde Firebug en Firefox . Lo más importante es que las DevTools son cada vez más potentes con cada nueva versión del navegador. Esto es conveniente tanto para los desarrolladores como para los usuarios, porque debería haber menos errores en los sitios, ¿verdad? ¡Decir ah!







La imagen de arriba muestra la información detallada que puede proporcionar una auditoría de rendimiento de una página web ( pestaña Rendimiento ). Pero Chrome DevTools, además de la pestaña de medición del rendimiento, tiene muchas otras características:





Y si está buscando artículos que no sean de Google sobre este tema, consulte estos:





DevTools en Firefox



Hay otros navegadores que pueden ayudarlo a evaluar los problemas de rendimiento con DevTools. Soy un usuario de Firefox, por lo que utilizo regularmente las herramientas de este navegador. Firefox también tiene un conjunto completo de pestañas que puede usar para encontrar problemas en su sitio:







Puede usar estas herramientas para:





Bibliotecas para ampliar datos analíticos



Es posible que esto no funcione con herramientas internas, pero si realiza un seguimiento del uso mediante análisis (como Google Analytics, Fathom, Matomo), puede ampliar los datos recopilados para incluir información más completa sobre el rendimiento web.







Varias bibliotecas que puede utilizar:





Perfume.js se destaca de otras herramientas por la cantidad de datos recopilados Real User Monitoring (RUM). Se puede personalizar completamente para recolectar todo lo que necesite. Aquí hay un par de tutoriales sobre cómo hacerlo:





Análisis de JavaScript



Este artículo no cubre JavaScript internamente, aunque creo que minimizar su uso puede mejorar el rendimiento web y la estabilidad general . Pero si usa JavaScript, intente optimizarlo tanto como sea posible.







Afortunadamente, existen muchas herramientas para esto:



  • bundle-wizard : herramienta CLI para crear visualizaciones de un paquete de JavaScript (vea la imagen de arriba) para que pueda eliminar todo lo que no necesite.
  • Fobia al paquete : descubra cuánto costará agregar un paquete npm a su paquete.
  • Webpack Bundle Analyzer : visualice la estructura interna de los archivos de salida del paquete web con esta herramienta interactiva de mapas escalables.
  • source-map-explorer : use mapas de origen para analizar código JavaScript inflado (esta herramienta también funciona con Sass y LESS para analizar CSS).


También se encuentran disponibles marcos especiales para analizar herramientas y artículos:



  • reactopt , la herramienta de optimización del rendimiento de la CLI de React , determina si la página debe volver a procesarse.
  • TracerBench es una herramienta de prueba de rendimiento supervisada para aplicaciones web. Proporciona un análisis claro, práctico y conveniente de las diferencias de rendimiento.
  • Aplicación React Performance - DebugBear


Análisis CSS



Además de la pestaña Cobertura mencionada anteriormente en Chrome DevTools, también hay herramientas que puede ejecutar a través de la Interfaz de línea de comandos (CLI). Analizarán el CSS dada su complejidad y también identificarán los selectores no utilizados en todo el sitio web:



  • analyse-css es un analizador de complejidad y rendimiento de selector de CSS que se ejecuta desde la interfaz de línea de comandos.
  • uCSS : recorra todo el sitio en busca de selectores CSS no utilizados que luego se puedan eliminar.


Medición del rendimiento del servidor



La regla de oro del rendimiento es que: 80-90% del tiempo que un usuario pasa en el front-end.



Sigue siendo una buena idea asegurarse de que el backend / servidor esté optimizado. Después de todo, "El tiempo hasta el primer byte es importante" .







También es importante asegurarse de que el servidor pueda continuar funcionando con una carga pesada, si es que alguna vez lo hace. Hay una serie de herramientas que pueden ayudarlo a hacer estas dos cosas:



  • httpstat es un pequeño script de Python para visualizar los datos de tiempo de conexión devueltos por curl (vea la imagen de arriba).
  • h2load es una herramienta de interfaz de línea de comandos para probar HTTP / 2 y HTTP / 1.1.
  • Hey — .
  • k6 — , JavaScript. API CLI.
  • Server- — , -. - .


Puppeteer



Puppeteer es una biblioteca de Node que proporciona una API de alto nivel para controlar Chrome o Chromium mediante el protocolo DevTools. La mayoría de las cosas que hace manualmente en un navegador se pueden reproducir con Puppeteer. ¿Cómo se puede utilizar esto para las pruebas de rendimiento web? Addy Osmani escribió una publicación de blog sobre el uso de Pupperteer para las pruebas de rendimiento web y también compartió el código en Github. Estas pruebas se pueden ejecutar fácilmente a través de la CLI para probar sitios web internos y externos:





Extensiones de navegador



Hay muchas extensiones de navegador que se pueden utilizar para medir el rendimiento web. Recomendaría usar un perfil separado con un mínimo de extensiones incluidas cuando las inicie. Esto se debe a que algunas extensiones del navegador interactúan con la página y pueden degradar el rendimiento, lo que genera resultados incorrectos. Puede utilizar las siguientes extensiones:



  • sloth es una extensión que ralentiza la CPU y la red en el navegador, lo que facilita la simulación del rendimiento de la página en dispositivos más lentos.
  • Perfmap : cuando se usa esta extensión, el navegador crea un mapa de calor de los recursos cargados en el navegador y su impacto en el rendimiento individual de acuerdo con la API de tiempo de recursos .
  • Web Vitals Chrome Extension es una extensión de Chrome que muestra las métricas centrales de Web Vitals (LCP, CLS, FID) para cualquier página que visite. Nota: Esto pronto se integrará en Chrome DevTools, ahora está disponible en Canary .
  • perf-diagnostics.css no es realmente una extensión de navegador, sino un montón de CSS que puede agregar a su página para solucionar problemas comunes de rendimiento. Una forma simple y efectiva de resaltar imágenes sin un atributo de ancho / alto, entre muchos otros.


También hay extensiones diseñadas específicamente para mejorar el rendimiento cuando se utilizan ciertos marcos de JavaScript:







Network Throttling



La limitación de la red es una forma de ralentizar una conexión de red. Es importante comprender que muchos usuarios no tendrán conexiones de banda ancha rápidas y estables en una gran ciudad. Otros, por otro lado, pueden estar en áreas rurales con banda ancha deficiente y una intensidad de señal móvil muy débil. Al limitar su propia conexión de red, obtiene información sobre el rendimiento del sitio para los usuarios en ese entorno de red específico.



Podría preguntar, "¿Por qué querría bloquear mi red cuando está integrada en Chrome DevTools?" Es importante comprender que no todos los métodos de regulación de la redfuncionan de la misma manera. La limitación con Chrome DevTools aplica un retraso a nivel del navegador para cada respuesta. Lighthouse ejecuta la prueba a toda velocidad y luego simula la velocidad de la conexión, sacrificando la precisión por la velocidad del mensaje. Las siguientes herramientas son mucho más precisas. Utilizan la limitación de la red a nivel del sistema operativo que funciona a un nivel mucho más bajo.



Nota: Estas herramientas a continuación regulan la conexión en toda la computadora, así que asegúrese de cerrar las aplicaciones innecesarias al realizar la prueba y también deshabilite la limitación cuando haya terminado.





Siempre uso throttle



porque es bastante simple: 



# Enable 3G Slow
throttle 3gslow

# Use a custom connection profile
throttle --up 1600 --down 780 --rtt 250

# Disable throttle
throttle --stop


Analizando archivos HAR



Mencioné los archivos HTTP Archive (HAR) anteriormente en este artículo. Estos archivos le permiten registrar la interacción de red de los navegadores web con un sitio web. Lo mejor de estos archivos es que puede usarlos para cualquier sitio al que se pueda acceder a través de un navegador (interno o externo). Encontrarlos es bastante fácil en las herramientas de desarrollo de Firefox y Chrome:



Firefox





Chrome





Hay otras herramientas que puede usar para ver y analizar:





Web APIs



Volviendo a las capacidades nativas del navegador, hay varias API que puede utilizar para medir el rendimiento del sitio usted mismo, sin utilizar bibliotecas.



  • performance.now () : el método de la now()



    interfaz de rendimiento del navegador devuelve una marca de tiempo de alta precisión desde el momento en que se llamó al método. Hace que sea muy fácil medir el tiempo entre 2 llamadas. Agregarlos antes y después de un fragmento de código específico le permitirá medirlo y optimizarlo.
  • Tiempo de navegación : esta API permite a los desarrolladores recopilar datos de tiempo asociados con la navegación de documentos.
  • Tiempo de recursos : esta API permite a los desarrolladores recopilar información de tiempo completa para los recursos que carga el documento.
  • Evaluación del rendimiento de carga en la vida real con navegación y sincronización de recursos - Jeremy Wagner - Un artículo muy detallado sobre cómo se pueden utilizar las dos API anteriores para medir el rendimiento de carga de una página web.


Resultados



Con suerte, en las herramientas enumeradas en este artículo, encontrará aquellas que lo ayudarán a mejorar sus sistemas internos. Si un servicio o sitio web es utilizado solo por empleados de la empresa, esto no significa que no sea necesario optimizarlo. A pesar de que muchas personas trabajan de forma remota en estos días, no todos tienen una conexión rápida y estable. Por lo tanto, recuerde que usted y sus colegas también son usuarios.


More articles:


All Articles