Episodio #3

Desempeño Web - Parte 1

En este episodio explicamos qué es el desempeño web, por qué es importante y cómo podemos medirlo. También exponemos que el impacto de no cuidar el desempeño se traduce en pérdida de tiempo y dinero.

Links de Recursos

Transcripción

Angel El desempeño lo podemos definir como el grado de eficiencia que algo o alguien logra respecto a una meta dada. Ahora, una página web es un sistema, dado que está conformada de diferentes partes que interactúan entre sí. Entonces, si aplicamos la definición de desempeño a lo que viene siendo una página web estamos hablando de qué tan optimizados están los distintos elementos que la conforman y como resultado qué tan optimizada está la página web en sí.

Existen varias maneras en que podemos evaluar el desempeño de un sitio web; una de ellas, y tal vez la más obvia, es el peso de un sitio. El peso del sitio tiene un impacto bien directo sobre el tiempo de carga, o sea, qué tan rápido se despliega una vez que le picamos a un link o que acabamos de escribir la dirección en la barra de direcciones del navegador.

Otra manera de evaluarla, el desempeño, es que una vez que ya está cargado, qué tan fluido se siente el sitio. Pero creo que esto es algo que tú vas a poder explicar mejor.

Natalia Así es, lo que pasa es que desempeño web también es experiencia de usuario. No nada más es el hecho de estar esperando qué tan rápido o qué tan lenta se está cargando la página web sino que una vez que ya se cargó: ¿Cuál es tu percepción? ¿Cuál es tu experiencia? La experiencia de la persona que está interactuando con ese sistema, en este caso, la página web.

No sé si les ha tocado que, en alguna ocasión cuando visitan una página web le dan click a un botón. Ya está cargada y todo, pero le dan click a ese botón y parece como si no estuviera haciendo nada. El hecho de estar haciendo click, click, click, click pues también ya te está dando cierta experiencia.

Por otro lado, también cuando estás dando scroll down, yo creo que todo mundo esperaría que al scrollear la página fuera un poco más fluido y que no se sintiera como una presentación de power point.

Angel Sí, últimamente de esas páginas como que cada vez abundan más ¿no?. Inclusive, algunas están regresando a, como la época de oro de Flash.

Natalia Yo la llamaría la época del oscurantismo de web.

Angel Bueno sí, todavía, parecía que iba a ser el futuro Flash ¿no? y a final de cuentas no lo fue.

Natalia Así es, ahorita parece que la manera en la que se están diseñando las páginas es de que creen que, si hacen una página que esté sacando chispitas y que las imágenes estén bailando, la persona va a estar toda impactada de que: ¡Wow! ¡Qué página tan padre! Pero lo que no se dan cuenta es de que todo eso está haciendo que la página tarde en cargarse y poner ese contadorcito así como cuando se diseñaban las páginas con Flash, no ayuda.

O sea, por algo se dejó de utilizar el típico intro que todo mundo se saltaba.

Angel Yo creo, es como una, dicen por ahí: Todo lo viejo es nuevo otra vez; pero en este caso yo creo que estaríamos mejor sin regresar a esas épocas donde una página está tan pesada que tiene que tener un contador, un cargador.

Bueno, vamos a pasar a: ¿Por qué es importante el desempeño de un sitio? ¿Por qué es importante que cargue rápido? y yo creo que aquí no hay tanto qué explicar, porque simplemente: ¿A quién le gusta esperar?

¡A nadie le gusta esperar! Absolutamente a nadie le gusta esperar. Bueno, no sé, tal vez por ahí haya alguien a quien sí le gusta esperar por algún motivo obscuro, pero a la mayoría de la gente no.

No sé, se me ocurre, cuando van al cine el miércoles en la tarde…

Natalia ¿Cuando es 2x1?

Angel Ándale, o sea, ¡Hay unas filas enormes para comprar boletos! y ¡filas enormes para la dulcería! y creo que nadie dice: ¡Wow! ¡Una fila gigante! ¡Excelente!

Natalia ¡Voy a ir a formarme ahora mismo!

Angel ¡Exacto! Debido a esto, por ejemplo, cinépolis y algunos otros cines empezaron a ofrecer que pudieras comprar los boletos por internet, y después dieron un paso más allá y ofrecieron también asientos numerados. De manera que si tú quieres puedes pasar directo a la sala sin tener que haber hecho una sola fila.

Esto es lo mismo con las páginas web. Cuando un sitio web está grande, cuanto más pesado esté por, independientemente qué tan padre esté al final, como dice Natalia: si saca chispas o no , mientras tú estás esperando a que cargue es el equivalente a estar haciendo fila en las palomitas del cine. ¡Y a nadie le gusta!

Natalia Además debemos de tomar en cuenta que cada vez se incrementa más la cantidad de personas que navegan desde su dispositivo móvil. Ya son menos las que están navegando desde su laptop o desde la computadora de escritorio y esto tiene un gran impacto. Porque se ha comprobado, ha habido varios estudios por ahí que dicen que las personas que están navegando a través de su dispositivo móvil se vuelven todavía más intolerantes al tiempo de descarga de un sitio.

Que para empezar, ellos psicológicamente ya piensan que, o sea, están esperando que el sitio se cargue más rápido. Si tarda en cargar, se hacen todavía más intolerantes a estar esperando.

Por otro lado, afecta mucho a las personas que tienen su tienda en línea. Super importante, porque, también se ha demostrado que el bounce rate , que es una, eh ¿Qué podríamos decir? Así como lo llama Google, cuando alguien entra a tu sitio y lo abandona rápido.

Angel La probabilidad o el porcentaje de gente que entra a tu sitio y se va.

Natalia Ajá. Bueno, pues eso llamado bounce rate o rebote como he visto por ahí también que lo llaman, se incrementa más si la página tarda más en cargar. O sea, es directamente proporcional al tiempo de carga del sitio. Mientras pese el sitio más te abandonan los usuarios. Y eso se traduce en pérdida de ventas.

Angel Porque ni siquiera llegan a ver el sitio entonces. O sea de que, no ha terminado de cargar y dices: ¡Bye!

Natalia Exactamente. Y ahí pues, yo creo que podemos resumir la importancia del performance en qué costo tiene ¿no? ¿Qué costo tiene a tus clientes, a los usuarios a uno mismo?

Angel ¡Ándale! Le diste a un tema que está bien cercano a mi corazón. El desempeño de un sitio web tiene una relación extremadamente directa con un costo. Porque a final de cuentas el internet no es gratis.

No es gratis para nadie, no es gratis si tú como usuario, eh, si estás en tu casa, estás pagando por internet. Pero como dijiste, es aún más importante si estás en un dispositivo móvil, generalmente un teléfono.

Si tienes un plan de datos, ya no hay planes de datos ilimitados, ya tienes un plan de datos con una cierta cantidad de Megabytes o Gigas, no te va a urgir que se te acaben lo más rápido posible.

Y por el otro lado, si tú tienes una tienda también te va a afectar, de la siguiente manera:

El año pasado tuve la oportunidad de estar en una plática a la que Jesús Martínez, el fundador de enviaflores.com. Enviaflores.com en México es el sitio más exitoso de enviar flores a través de internet. Entonces, el año pasado él mencionaba que todos los días el tráfico que tenían era alrededor de los 400 mil a 500 mil usuarios. ¿Cómo es que a él le afecta cuánto pesa un sitio?

Cuando tienes un sitio así de grande, usualmente estás con algún tipo de servicio o proveedor que, al que tú le estás pagando lo que gastas. Entonces, literalmente, si tu sitio web está mal optimizado, te está pesando más de lo que necesita pesar, cada persona que lo accede te está consumiendo datos.

Y esos datos, a tí, literalmente se traduce, en muchísimo dinero. Entre más usuarios tengas, más dinero …

Natalia Estás pagando

Angel ¡Estás pagando! Exacto. Entonces, tú como compañía te conviene, por todos lados tener un sitio lo más ligero posible. No quiere decir que esté completamente plano, no. Yo creo que estamos hablando más de que pese lo que tiene que pesar y ni un bit más.

Natalia Más bien es el hecho como de estar decidiendo cómo estar utilizando tus recursos de la mejor manera. De la manera más adecuada que tú le saques más provecho.

Angel Así es, como mencionabas al mero inicio del podcast, es un tema muy importante, es un tema que tiene un beneficio bien real para todo mundo porque te ahorras dinero y porque también te ahorras tiempo. Y a final de cuentas podríamos decir que el tiempo también es dinero .

Y sin embargo es algo que casi nadie está tomando en cuenta. Este es un tema que al menos en inglés si está muy sonado, pero en español es algo que casi no ves.

Natalia No estamos viendo a muchas personas que le estén dando la importancia que deberían.

Angel Ajá, exacto.

Natalia Fíjate que, ahora que lo mencionas, yo recordé muchísimo lo que es la página de Interjet. Y lo recordé porque yo me la paso analizando esa página web. Yo soy una usuaria, estoy viajando por Interjet, y bueno, sí me decepcioné un poco el año pasado que la rediseñaron. En tanto, pues tienen muchas cosas que arreglar por ahí, pero algo de lo que me di cuenta, eh, tienen en la navegación principal, tienen ahí estructurado de que te salga una imagencita en alguno de los cuadros de cuando le das hover a esa navegación. Entonces yo desde mi casa inclusive desde mi teléfono que la he llegado a utilizar al principio notaba de que: Oye es que son, habían cuadros en blanco. Que para empezar no sabía ni por qué eran ¿no? Dije pues ¿Y este desperdicio de espacio?

Ya después de estarla visitando en otras ocasiones pues ya notaba, ya que me esperaba un poquito más que salía ahí una imagen. Eso me hace pensar de que, realmente ¿cuánto te están ayudando o cómo estás utilizando los recursos cuando tú construyes tu página web? Porque en el caso de Interjet, están utilizando esas imágenes que aparecen en el área de la navegación y sin embargo, te aseguro que mucha gente como yo no las están viendo. O sea ¿cuál es el beneficio de utilizarlas? ¿realmente deberían de utilizarlas? y son imágenes que están haciendo que el sitio sea más pesado.

Angel El desempeño web empieza desde la planeación. No es algo, el desempeño no es algo que tú le puedas simplemente…

Natalia Arreglar al final.

Angel Ajá, no es algo que: Ay, al… no te preocupes de eso, al final el desarrollador lo va a optimizar . ¡No!. Habrá cosas que se pueden hacer, puedes optimizar tamaños de imágenes, comprimir ciertos archivos, ya hablaremos de esto en más detalle después.

La verdadera ganancia en el desempeño comienza desde la planeación del sitio. Y es algo que mucha gente se está saltando.

Natalia Y es ahora más que nunca que como diseñadores debemos de tomar en cuenta que las decisiones que hacemos a la hora de diseñar un proyecto tienen un gran impacto a la hora del performance. No es algo que tú haces y que el desarrollador vaya a arreglar.

Angel Cierto. Todo este show del performance o del desempeño ha tomado mayor importancia especialmente desde que los sitios responsivos empezaron a ser más comunes.

Y esto ha sido debido a que, previamente se manejaba que si tú tenías un sitio, también tenías un sitio móvil. Y eran dos sitios diferentes. Eventualmente nos dimos cuenta que dos sitios diferentes no es práctico, porque, literalmente tienes que estar manejando dos sitios diferentes.

Natalia O más, a veces.

Angel Ujumm, si tienes que actualizar contenido, tienes que actualizarlo en dos lugares y es más probable que de repente eso no vaya a pasar y entonces el sitio de escritorio tenía contenido actualizado pero si alguien entraba desde el teléfono era contenido diferente.

Y eventualmente nos dimos cuenta de que los sitios responsivos eran una solución a este problema. Después de varios años de estar utilizando sitios responsivos empezó a surgir otro problema, que fue precisamente el desempeño.

¿Qué pasaba? Que los mismos archivos que tú estabas viendo en escritorio se estaban cargando en tu dispositivo de pequeña pantalla ¿no?, como tu teléfono.

Natalia Y estamos hablando de que es a lo mejor una imagen super grandísima o tres imágenes super grandísimas porque a la gente le gusta tanto el efectito este parallax, que también se están descargando en tu teléfono, y en tu teléfono ni siquiera los estabas viendo ¿no?.

Angel O en algunos inclusive sí se estaban viendo, pero, está un poco cuestionable si hay alguna ventaja o no.

Por eso ha cobrado mucha importancia desde los sitios responsivos, porque es el mismo sitio el que estás accediendo desde todos lados, especialmente, desde tu dispositivo móvil.

Natalia Y entonces pues hay que tomar más en cuenta, tener más cuidado de cómo vas tener, cómo vas a estar utilizando tus recursos.

Angel Así es.

Natalia Y, fíjate que, no nada más es el hecho de estar pensando en los recursos sino también en tu usuario final. A nosotros, bueno, cuando yo estaba diseñando páginas de abogados, teníamos mucho el problema de que nuestros clientes nos estaban pidiendo muchísimas imágenes porque lo habían visto en los sitios de sus competidores.

Entonces cuando les dábamos el argumento de que: Mira, es que esto te va a afectar porque está haciendo que tu sitio web se haga muy pesado y por tal motivo la gente a lo mejor no lo vaya a visitar porque si lo visita desde su teléfono, pues te vas a acabar todo su plan de datos nuestros clientes nos decían: ¡No!, es que, ellos, pues que utilicen el WiFi .

Que utilicen el WiFi o que no utilicen su plan de datos ¿no? (Yeah, right!). Entonces, es un problema, es un poco irresponsable estar pensando que la gente va a hacer las cosas como tú quieres. O sea, es muy difícil atinarle al contexto de todos. Cómo estás seguro de que esa persona que a lo mejor acaba de tener un accidente, y está buscando un abogado o algo de ayuda, se pone a buscar una página desde su teléfono, no va a estar desde WiFi, y ya por ese motivo ese abogado ya perdió muchísimos clientes.

Angel Eso que mencionas también, a veces no nada más es el cliente, también es el desarrollador o el diseñador. Porque usualmente nosotros como diseñadores y desarrolladores de web a veces tenemos condiciones ideales, ¿no?. Tenemos acceso a un gran ancho de banda o tenemos pantallas grandes y de repente se nos olvida que el usuario final no va a tener las mismas condiciones en las que nosotros lo estamos viendo.

Esto es algo que a mí me ha llegado a pasar. Hago un sitio y lo checo en mi teléfono que está conectado al WiFi y luego lo checo en la calle cuando no estoy conectado al WiFi y te das cuenta que es una realidad distinta y tienes que estar muy consciente de las condiciones en las que el usuario final…

Natalia Las condicione ¡reales!…

Angel ¡Ajá! Entonces, igual de todas estas cosas vamos a hablar en futuros episodios, ahorita ya nada más para finalizar queremos hablar, rápidamente de cómo podemos evaluar el desempeño de un sitio web. ¿Cómo nos podemos dar cuenta de ello?

Una manera es, como mencionábamos, qué tanto tarda en cargar. La percepción que ustedes tienen como usuarios al momento de cargar un sitio. Pero hay maneras un poquito más, llamémosle “ científicas ”.

Existen varios sitios que nos pueden desglosar todo lo que conforma un sitio: desde la velocidad de la conexión hasta cuántas imágenes, cuántos javascripts, cuántos archivos de html, cosas por el estilo. Y esto nos sirve para darnos cuenta qué cosas tenemos de más a lo mejor, y considerar reducirlas.

Uno de ellos es de Google, se llama page speed insights . Ese es el más sencillo de todos, trata de darnos una calificación del 0 al 100 y te, inclusiva una vez que hace el análisis, te sugiere qué cosas pudieras mejorar.

Ahora, tenemos otro que se llama webpagetest.org . Este es un poquito más avanzado y nos arroja bastantísima información respecto al desglose exacto de todos los elementos de nuestra página y tiempos de conexión. E inclusive tiene una herramienta que encuentro yo muy útil, la he usado en un par de ocasiones para hacer argumentos y tratar de convencer a la gente de la ventaja del desempeño, y es que te permite comparar más de un sitio. Te permite compararlo de una manera visual. Tú puedes meter varias direcciones y decirle al final, así de que: compáralas . Y entonces te genera imágenes en una línea de tiempo. Entonces tú puedes ver exactamente cuánto tarda un sitio en cargar respecto a otro de una manera visual. Está muy padre.

El último se llama whatdoesmysitecost.com y éste habla del costo monetario de un sitio. Ustedes le pueden poner ahí cualquier sitio web, darle comenzar y al final del análisis en base a cuánto pesa, les va a poner por países, usando el promedio de ese país el costo, qué precio tiene abrir esa página desde un dispositivo móvil. Ese se me hace muy interesante porque puedes darte cuenta de ¡cuánto cuesta!. Literalmente cuánto te cuesta.

(Para aquellos que se lo estén preguntando, hablemosdeweb.com les cuesta menos de un peso, así es que, los tomamos mucho en cuenta)

Natalia Y pues más que nada son herramientas que te ayudan a ver toda la importancia de tomar en cuenta lo que es el performance y que éste tiene un costo muy tangible muy real, que se traduce más que nada, en dinero.

Pues yo creo que sería todo por este primer episodio de esta serie, entonces, muchas gracias, hasta la próxima.