Get best of the week

¿Qué es el rendimiento de la aplicación web?

imagen

Algunas aplicaciones se cargan rápidamente, algunas lentamente, pero debido a lo que sucede. ¿La velocidad de carga de la página es la única medida del rendimiento de la aplicación?

Sería muy difícil responder estas y muchas otras preguntas en un artículo. Así que armé un catálogo de enlaces y lo dividí en categorías. Pero para empezar, una pequeña teoría sobre qué es el rendimiento y cuándo debería pensarlo.

Cuando surgen problemas de rendimiento


Puede desarrollar aplicaciones web durante años y prácticamente no tiene problemas con el rendimiento de la aplicación.

Pero, muy probablemente, surgen problemas en las siguientes situaciones:

  1. Aparece una gran cantidad de datos (debe representar grandes listas o cientos de miles de puntos en el mapa).
  2. La aplicación se vuelve grande (cientos de escenarios de usuarios, docenas de pantallas, formularios, etc.).
  3. Una gran cantidad de clientes de diferentes regiones (por ejemplo, más de 300,000 clientes por día de todo el mundo).
  4. Alta competencia en el mercado (seguro, el usuario preferirá la aplicación de su competidor si funciona más rápido).
  5. Se necesita una versión móvil (los navegadores en dispositivos móviles aún sufren problemas de rendimiento).

En qué consiste el rendimiento


A nivel mundial, los problemas de rendimiento de las aplicaciones web se pueden dividir en dos categorías: transferencia de datos y tiempo de ejecución.

  • La transferencia de datos significa descargar todos los recursos necesarios para que la aplicación funcione.
  • En tiempo de ejecución: operación de la aplicación, procesamiento y procesamiento de entrada del usuario.

Cada una de estas categorías contiene muchos matices en los que a menudo no pensamos, pero que distinguen las aplicaciones de alta calidad de las de baja calidad.

Estas son las métricas de rendimiento de aplicaciones web más populares (todas deberían ser mínimas):

Carga de la página



Tiempo de ejecución


  • Tiempo de respuesta de entrada del usuario.
  • Tiempo de redibujo de interfaz.

Aunque TTFB y TTI están relacionados con las métricas de rendimiento de carga de la página, pueden verse afectados por problemas relacionados con el tiempo de ejecución.

Cómo buscar y analizar problemas de rendimiento


El conjunto de herramientas principal en el arsenal del desarrollador es Chrome DevTools o herramientas similares, como las herramientas para desarrolladores Firebug / Firefox .
Se pueden escribir artículos separados sobre ellos, pero nos limitaremos a los puntos más importantes.

Red : le permite analizar en detalle qué recursos se cargan en la página, desde qué recursos, con qué velocidad, etc. Esta herramienta se usa a menudo para analizar manualmente la velocidad de carga de la página.

Rendimiento : en esta pestaña, puede habilitar la grabación de llamadas de ejecución de código, operaciones de entrada / salida y otras. Además, la grabación se puede hacer con la emulación de la red de estrangulamiento y la CPU. Por ejemplo, verifique la aplicación en dispositivos débiles.

Faro - Una herramienta integrada en Chrome DevTools que comienza a cargar la página, registra las métricas, las analiza e incluso ofrece recomendaciones para mejorar el rendimiento.

Cómo medir / monitorear el desempeño


Las herramientas para supervisar el rendimiento de las aplicaciones web se pueden dividir en dos categorías: las que toman medidas sintéticas y las que registran datos de rendimiento de usuarios reales.


Además, hay herramientas como Webpack-bundle-analyzer que no se pueden asignar a estas dos categorías. Pero con su ayuda, puede medir algunos parámetros que afectan el rendimiento, como el tamaño del paquete.

Transferencia de datos


Conexión TCP, búsqueda de DNS : puede acelerar la carga de la página incluso debido a la configuración correcta de las conexiones al servidor. En particular, si utiliza la búsqueda previa de DNS o incluso las direcciones IP en lugar de los nombres de dominio.

TTFB (Tiempo hasta el primer byte) . El tiempo para obtener el primer byte es una métrica importante. Para acelerarlo, debe intentar implementar la menor lógica posible en el servidor antes de emitir index.html.

HTTP1 vs HTTP2 : HTTP2 puede acelerar enormemente la carga de la página multiplexando o comprimiendo encabezados. Además, un nuevo protocolo (relativamente) abre un montón de características, como la inserción del servidor.

Fragmento de dominio. Si necesita enviar muchos encabezados HTTP para solicitudes API, pero no para solicitudes estáticas, es mejor separarlos en diferentes dominios.

CDN (red de entrega de contenido) ayudará a acelerar la carga para clientes distribuidos geográficamente.

La priorización de recursos (preload, prefetch, preconnect) es la aceleración de la carga de la página debido a la estrategia correcta de carga de recursos. Los navegadores le permiten establecer prioridades para diferentes tipos de recursos y descargar antes lo que es importante para la primera representación.

Compresión estática: GZIP y Brotli . Brotli es un algoritmo de compresión que reducirá el peso estático y, en consecuencia, aumentará la velocidad de descarga. Y aquí hay una gran solución de mi colega.

Webp vs Png y Jpg. Webp es una gran alternativa a Png. Además del menor peso de las imágenes, Webp no es inferior en calidad. Ahora este formato es compatible con aproximadamente el 78% de los navegadores . Pero incluso si necesita un 100% de soporte, puede implementar el respaldo en Png usando la etiqueta de imagen .

Tiempo de ejecución


Tareas, Microtasks . Al priorizar correctamente la ejecución del código, puede deshacerse de los frisos y acelerar la respuesta a la entrada del usuario.

requestIdleCallback es una función útil que le permite ejecutar código en su tiempo libre al final del marco (marco / marca) o cuando el usuario está inactivo. Ayudará a deshacerse de todos los mismos retrasos y "congelaciones".

requestAnimationFrame le permite planificar adecuadamente la animación y maximizar las posibilidades de renderizar 60 cuadros por segundo.

ES2015 vs ES5 . ES2015 ofrece muchas funciones más productivas que ES5.

Manipulación Dom. Las manipulaciones con el DOM son caras, debe realizarlas con cuidado y de manera significativa. Por ejemplo, no llame a querySelector () en un bucle si esto se puede hacer con una sola llamada.

Renderizar recurso de bloqueo . Cargar algunos recursos puede bloquear la representación. Para evitar esto, debe usar los atributos aplazar, asincrónico, precargar.

60 FPS por puntero-eventos: ninguno es un gran truco con el que puedes lograr 60 FPS desplazándote por la página. Funciona de manera muy simple: todos los controladores de eventos del mouse están deshabilitados durante el desplazamiento.

Evento pasivo oyente- una forma de hacer que la página se desplace sin problemas en las pantallas táctiles. En resumen, el navegador tiene un procesamiento de flujo imperfecto para los oyentes de eventos táctiles. Si configura el parámetro pasivo al crear el controlador de eventos, el navegador comprenderá claramente que el controlador no cancelará el desplazamiento y el renderizado, sin esperar a que se complete.

El desplazamiento virtual es una forma inteligente de no generar listas grandes, sino generarlas al desplazarse. Le permite consumir menos memoria y facilitar las listas de desplazamiento.

Evite los diseños complejos grandes y los cambios de diseño . El diseño / reflujo es una operación costosa que realiza muchos recálculos de los parámetros de representación. Para evitar sus llamadas frecuentes, debe construir correctamente el diseño y manipular el DOM.

Lo que fuerza el diseño / reflujo - una hoja de trucos donde puede encontrar una lista de funciones y parámetros con los que funciona que causa el diseño / reflujo.

Montaje


Agitación del árbol : elimine el código no utilizado del paquete y acelere la carga de la página.

División de código : al dividir el código en fragmentos, puede optimizar la primera carga y abrir la capacidad de descargar partes del código "perezosamente".

La ofuscación puede reducir el tamaño del paquete e incluso ayudar un poco a ocultar su código de miradas indiscretas.

Arquitectura


La representación del lado del servidor es probablemente la forma más conocida de hacer que la representación SPA sea inmediata en el primer arranque. Este es un requisito importante para algunos motores de búsqueda (y no solo).

Carga lenta de imágenes y video ( + nativo ): una solución nativa diseñada para mejorar las métricas de la primera representación debido a la carga "lenta" de imágenes y videos.

Módulos / rutas de carga diferida es una herramienta que se encuentra en todos los marcos y bibliotecas populares. Le permite cargar "perezosamente" piezas de funcionalidad de la aplicación.

El almacenamiento en caché de archivos con los trabajadores del Servicio le permite almacenar archivos en un navegador y no descargarlos cada vez desde el servidor. Quizás la única forma de hacer el modo fuera de línea en una aplicación de navegador.

Almacenamiento en caché HTTP - Usando algunos encabezados HTTP puede mejorar enormemente la velocidad de carga de la página y reducir la carga del servidor.

More articles:


All Articles