Web y Performance I: Ese enemigo invisible (o no tanto)

Considerando a las paginas y aplicaciones web como servicios para los usuarios, es lógico considerar la calidad del mismo evaluando el contenido y presentación que ofrecen.
En estos aspectos es donde puede verse que el desarrollo e inversión tienen mayor enfásis, sin embargo, un factor no menos importante son el rendimiento y experiencia que ofrecen, tanto por la experiencia del usuario como por la carga que generan las peticiones sobre el servidor.

La experiencia de usuario es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo.*

*Wikipedia: Experiencia de usuario.

Los sospechosos

Existen diversos factores que afectan en mayor o menor medida el rendimiento de los sitios, los mismos abarcan el ciclo de vida completo del request así como también el tiempo de ejecución, siendo cada etapa muy específica en cuanto a problematicas.

1. Servicio de contenidos

Cantidad y peso

Bytes, bytes y más bytes.

lanacion.com es cosa seria.

La cantidad y peso de los recursos cargan con gran protagonismo en la optimización de websites. Obviamente, a mayor cantidad de información a descargar, mayor será la demora, lo mismo ocurre con la cantidad de recursos solicitados, donde el cuello de botella se encuentra en la cantidad de descargas en simultaneo que puede realizar el browser.
Además hay que considerar que el browser no realizará el renderizado hasta completar la descarga secuencial de recursos bloqueantes.

Recursos externos

El uso de APIs externas o librerías hosteadas (CDN) puede bloquear las descargas de archivos del sitio con su consecuente “blank page” o sitio a medio renderizar.


API Facebook congelando el sitio

Ouuu no! (I)

Particularmente, esto puede verse bastante seguido con los scripts sociales (Facebook Connect, Addthis, Twitter API) así tambien como con Google Analytics, donde básicamente se confía en la capacidad de respuesta (muchas veces pésima) de un servidor remoto.

2. Renderizado de contenidos y setup de scripts

A la hora de renderizar un sitio suele ser bastante problematico tener un HTML complejo (principalmente en el anidamiento), ya que impacta directamente en la performance inicial del sitio.

Al cargar un sitio, se produce un renderizado completo, lo cual implica generar la estructura en memoria (render) y posteriormente calcular el su layout (flow) y dibujarla en pantalla (draw). Además del mencionado problema de niveles de anidamiento, otros factores que suelen impactar en esta etapa son selectores css poco eficientes, imagenes sin tamaño explícito, falta de especificación de charset, etc.

De igual manera, la inicialización de scripts puede bloquear o alentar la navegación inicial de la web.

3. Ejecucion

JavaScript cuelga el browser

Ouuu no! (II)

Finalmente, una vez alcanzada la etapa de de ejecución, la problematica se vuelca mayormente a los scripts, situación que se hace evidente en algunas aplicaciones web (GMail, Facebook) sobre todo cuando las condiciones de ejecución no son optimas (pc y browsers anticuados).

En esta etapa, es donde hay que tener muy en cuenta que el browser usa un mismo thread para la ejecución de scripts y renderizado, con lo cual las situaciones de mucha carga en scripts se hace excesivamente evidente en la experiencia de usuario.

En este ejemplo puede comprobarse la dificultad de navegación cuando el browser esta ejecutando código.


En la próxima entrada del tema, vamos a investigar sobre las distintas herramientas que permiten identificar y mesurar los problemas relacionados con la performance para posteriormente centrarnos en las soluciones a los problemas más comunes.

Shortlink: http://goo.gl/cXnWu

 



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comment

You may use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>