High Performance Web Sites para pruebas de performance

“High Performance Web Sites” para pruebas de performance.

Comencé a leer por segunda vez “High Performance Web Sites” de Steve Souders. Un libro enfocado en conocimientos esenciales sobre el performance web para ingenieros de software frontend. Pero también me atrevería a decir que este libro es una buena opción para QA y Tester de performance, ya que muchas veces estas mejoras desde el frontend no se tienen en cuenta en los equipos de desarrollo. Desde hace unos meses junto con mis colegas estamos llevando a cabo procesos de pruebas de performance que también incluyen el análisis y optimización del frontEnd, y este proceso se está llevando a cabo en colaboración con desarrolladores, QA y Tester de Performance.

El libro “High Performance Web Sites” presenta 14 reglas específicas a tener en cuenta en aplicaciones web, de acuerdo con su autor Steve Souders, estas pueden reducir entre un 25% y un 50% el tiempo de respuesta de las aplicaciones. Sobre el autor y su libro, Joe Hewitt mejor conocido por su trabajo en el desarrollo de Firebug debugger y DOM Inspector dijo:

“Si todos implementaran solo el 20% de las pautas de Steve, la Web sería un lugar mucho mejor. Entre este libro y la extensión YSlow de Steve, realmente ya no hay excusa para tener un sitio web lento”.

También Eric Lawrence, desarrollador de Fiddler Web Debugger, dijo:

“Steve Souders ha hecho un trabajo fantástico al convertir un arte masivo y semi-arcano en un conjunto de pasos de ingeniería concisos, prácticos y pragmáticos que cambiarán el mundo del rendimiento web”.

La implementación de estas reglas son claves para acelerar los tiempos de respuestas en las aplicaciones web. A continuación te presentamos estas reglas y en los siguientes post estaremos mostrando las mismas con ejemplos reales.

1.- Hacer menos peticiones HTTP #

Reducir las solicitudes HTTP es la técnica más esencial para optimizar su sitio web.Disminuir el número de componentes en una página reduce el número de solicitudes HTTP necesarias para representar la página. Existen múltiples soluciones como la combinación de JavaScript y CSS en un solo archivo, usar mapas de imágenes o CSS Sprites, entre otros.

2.- Usar CDN #

Content Delivery Network (CDN) es una forma de entregar contenido desde su sitio web o aplicación móvil a los usuarios de manera más rápida y eficiente, según su ubicación geográfica. Está formada por una red de servidores ubicados alrededor del mundo brindando una experiencia web igualmente rápida a sus usuarios. La proximidad del usuario a su servidor web tiene un impacto en los tiempos de respuesta. La implementación de su contenido en varios servidores dispersos geográficamente hará que sus páginas se carguen más rápido.

3.- Agregar un encabezado Expires #

Al agregar un encabezado Expires a sus componentes con una fecha futura, se pueden almacenar en caché, lo que reduce el tiempo de carga de sus páginas. Eso debería hacerse con imágenes, scripts y stylesheets. Esto no afectará el rendimiento de las páginas, incluso en las visitas posteriores a la página podrían reducirse los tiempos de respuesta. Estos son importantes para reducir las solicitudes HTTP, lo que reduce el tiempo que tarda el servidor en comunicarse con el navegador. También permite a sus usuarios reutilizar los archivos de caché que se han almacenado en el navegador para reducir la cantidad de archivos que necesitan descargar.

4.- Componentes Gzip #

La mayoría de las aplicaciones en la actualidad implementan algún tipo de compresión. La compresión reduce los tiempos de respuesta al reducir el tamaño de la respuesta HTTP. Comprimir tantos tipos de archivos como sea posible es una manera fácil de reducir el peso de la página y acelerar la experiencia del usuario. Gzip es el método de compresión más popular y eficaz actualmente disponible y generalmente reduce el tamaño de respuesta en aproximadamente un 70%. Aproximadamente el 90% del tráfico de Internet actual viaja a través de navegadores que afirman ser compatibles con gzip.

5.- Colocar hojas de estilo en la parte superior #

El autor del libro especifica que al investigar sobre rendimiento web en Yahoo!, descubrieron que al mover las hojas de estilo al HEAD hizo que las páginas parecieran cargarse más rápido. Esto se debe a que colocar hojas de estilo enpermite que la página se renderize progresivamente. Esto es especialmente importante para páginas con mucho contenido y para usuarios con conexiones a Internet más lentas. La importancia de dar a los usuarios comentarios visuales, como indicadores de progreso, ha sido bien investigada y documentada. Cuando el navegador carga la página progresivamente, el encabezado, la barra de navegación, el logo en la parte superior, etc., sirven como retroalimentación visual para el usuario que está esperando la página. Esto mejora la experiencia general del usuario.

6.- Colocar script en la parte inferior #

Colocar los script al final de las páginas permite que otros recursos no se bloquean, mientras se descarga un script, el navegador no iniciará ninguna otra descarga, incluso en diferentes hostname. Si se colocan los scripts al final de una página, se cargarán de últimos. En otras palabras, el contenido/estructura (css,imágenes, HTML) se cargará primero, mostrándose “algo” en el navegador más rápido; los usuarios finales no tienen que esperar a que termine de descargarse un script para poder visualizar algo en la aplicación.

7.- Evitar Expresiones CSS #

Las expresiones CSS son una forma poderosa (y peligrosa) de establecer propiedades CSS de forma dinámica. Las expresiones pueden producir miles de evaluaciones CSS innecesarias. Estas expresiones se evalúan con frecuencia: cuando la página se renderiza y cambia de tamaño, cuando usamos en la página el scroll down, e incluso cuando el usuario mueve el mouse sobre la página. Estas evaluaciones frecuentes degradan la experiencia del usuario.

8.- Hacer archivos Javascript y CSS de manera externa #

El uso de archivos externos permite que las páginas sean más rápidas, porque el navegador almacena en caché los archivos JavaScript y CSS. Estos archivos están insertados en documentos HTML que se descargan cada vez que se solicita el HTML. Esto reduce la cantidad de solicitudes HTTP necesarias, pero aumenta el tamaño del HTML. Por otro lado, si los archivos JavaScript y CSS están en archivos externos almacenados en caché por el navegador, el tamaño del HTML se reduce sin aumentar el número de solicitudes HTTP.

9.- Reducir Búsquedas DNS #

Las búsquedas de DNS añaden retrasos a las solicitudes iniciales a un host. Realizar solicitudes a una gran cantidad de hosts diferentes puede afectar el rendimiento. Los DNS tienen un costo en cuanto a tiempo, normalmente, tarda de 20 a 120 milisegundos en buscar la dirección IP de un hostname. El navegador no puede descargar nada del host hasta que se complete la búsqueda.

10.- Minify JavaScript and CSS #

Elimine los caracteres innecesarios de JavaScript y CSS para acelerar los tiempos de descarga. La minificación elimina los caracteres innecesarios de un archivo para reducir su tamaño, mejorando así los tiempos de carga. Cuando se minimiza un archivo, se eliminan los comentarios y los espacios en blanco innecesarios (espacio, nueva línea y tabs, entre otros). Esto mejora el tiempo de respuesta ya que se reduce el tamaño de los archivos de descarga.

11.- Evite redireccionamientos #

Evite el uso de redireccionamientos de URL, ya que agregan demoras adicionales a la carga de una página. Los redireccionamientos de URL se realizan utilizando los códigos de estado HTTP 301 y 302, estos le indican al navegador que vaya a otra ubicación. La inserción de una redirección entre el usuario y el documento HTML final retrasa todo en la página, ya que no se puede representar nada en la página y no se pueden descargar componentes hasta que llegue el documento HTML.

12.- Eliminar Scripts Duplicados. #

Daña el rendimiento incluir el mismo archivo JavaScript dos veces en una página. En otras palabras y más simple, la duplicación de JavaScript y CSS generan solicitudes adicionales y una pérdida de tiempo, ya que se evaluarán más de una vez.

13.- Configurar ETags #

Estos son un identificador único asignado a una versión específica de un recurso dado en un servidor web. Los ETag son uno de los varios mecanismos que proporciona HTTP para la validación del caché, lo que permite a un cliente realizar solicitudes condicionales. El problema con los ETag es que no coincidirá cuando un navegador obtiene el componente original de un servidor y luego realiza una solicitud GET condicional que va a un servidor diferente. Esto es común en sitios web que usan un clúster en el lado del servidor. Para sitios web “muy ocupados” con varios servidores, los ETag pueden hacer que los recursos idénticos no se almacenen en caché, lo que degrada el rendimiento. Por lo que estos deberían ser configurados correctamente.

14.- Hacer que las peticiones Ajax se guarden en caché (Sean cacheables) #

Al permitir que las solicitudes AJAX se almacenen en caché, puede evitar retrasos innecesarios.Uno de los beneficios de AJAX es que proporciona retroalimentación instantánea al usuario porque solicita información de forma asincrónica desde el servidor web backend. Sin embargo, el uso de AJAX no garantiza que el usuario no esperará a que regresen las respuestas asincrónicas de JavaScript y XML. Optimizar las respuestas AJAX es importante para mejorar el rendimiento, y hacer que las respuestas se puedan almacenar en caché es la mejor manera de optimizarlas.

Conclusión #

Llevar a cabo la implementación de estas reglas proveerá a las aplicaciones de una mejora exponencial en cuanto a tiempos de respuestas y experiencia de usuario. Si bien es cierto que muchas de ella pudieran ser muy fáciles de implementar y traerán grandes mejoras en términos de tiempo de respuesta, otras pueden conducir a soluciones un poco más técnicas y terminarán siendo un poco costosas, pero la recomendación acá es trabajar de la mano con todos los involucrados en el desarrollo de software: desarrolladores, infraestructura, arquitectos, project manager, incluso diseñadores de UX.
Si te animas a profundizar en estos temas, este libro será un buen aliado, porque te enseñará con ejemplos prácticos cada una de las reglas. Incluso para los principiantes tiene un excelente capítulo para enseñar sobre el protocolo HTTP, uno de los conocimientos elementales para todos los involucrados en esta área.