Episodio #7

Técnicas de Front-End para un buen desempeño web

Angel nos comparte distintas técnicas de Front-end que podemos utilizar para mejorar el desempeño de nuestros sitios y también nos explica qué es el presupuesto de desempeño.

Links de Recursos

Transcripción

AngelBienvenidos al tercer y último episodio de esta serie de capítulos que hemos estado dedicando al desempeño web. Esto no quiere decir que ya nunca más vayamos a tratar este tema; de hecho, este tema es un tema que siempre va a ser recurrente de alguna u otra manera porque es muy importante. Simplemente que queríamos tocar ciertos temas sobre el desempeño en una serie compacta de episodios.

Antes de comenzar, necesitamos conocer un concepto básico primero, y esto es: ¿Qué es lo que pasa cuando nuestro navegador solicita una página web? Para en qué consiste o cómo podemos mejorar el desempeño; necesitamos primero saber cómo funciona este proceso.

Cuando tú visitas una página en un teléfono, o no sé, una tablet o en tu computadora, tu laptop, lo que pasa es que tu navegador se comunica con el servidor y le solicita una página.

En este momento el servidor busca una página y dice: sí la tengo, aquí está, ahí te va. Y después le empieza a mandar todos los archivos que le corresponden a esa página; todos los archivos que ocupas para ver: El HTML, el CSS, el Javascript y las imágenes, etc, etc.

Aquí el concepto es que, entre más archivos tengamos más viajes va a tener que realizar nuestro navegador hacia con el servidor. Entonces, entre menos archivos tengamos menos viajes, y por lo tanto, usualmente, menos tiempo también.

El otro factor importante a tomar en cuenta es el peso. Entre menos pesen estos archivos, pues también va a ser más rápido nuestro sitio.

Entonces vamos a enfocarnos en cuatro puntos principales que podemos poner en práctica hoy en día. Cuatro cosas que hoy mismo podemos hacer y hoy mismo vamos a ver el resultado.

Entonces esos puntos serían: Las fuentes especiales, las imágenes, los archivos de texto como HTML, CSS, Javascript y al final una técnica que se llama “presupuesto de desempeño”.

Vamos a hablar primero de las fuentes especiales. ¿Cuáles son las fuentes especiales? Pues son todas aquellas que no vienen instaladas con el sistema. Yo creo que han entrado a una página y han visto que tiene fuentes que claramente son distintas a lo común y usualmente las emplean hoy en día, pues para darle un look distintivo a la página, para hacer cosas que no se podían antes.

Existen dos maneras principales. Una, usando un servicio que nos permita poner fuentes en nuestra página o nosotros mismos implementarlas. Nosotros mismos ponerlas en la página.

Entonces, de los primeros los servicios web, usualmente, los más populares son Typekit, es uno de los más grandes y después sigue Google Fonts que también es uno de los más grandes.

Quisiera hacer una pequeña anotación o advertencia tal vez, respecto a cuando decidimos depender de un tercero como Typekit y como Google Fonts que a veces estos servicios no son 100% confiables. Van a ser superconfiables la mayor parte del tiempo pero no siempre. Typekit hace como un par de semanas tuvo un problema bien grande y se cayó el servicio todo un día. Todo ese día, cualquier persona que usara Typekit no podía usar el servicio.

Y Google Fonts es lo mismo, no porque sea Google significa que nunca le va a pasar nada. Para Google, esto es un servicio gratuito y Google tiene fama de que los servicios gratuitos a veces simplemente los quita y ya.

Entonces hacer nuestra propia implementación, ponerlos en nuestro propio servidor y mandar llamar nuestras propias fuentes es usualmente un poco más seguro.

Pero bueno, dejando esto de lado, independientemente de cómo vayamos nosotros a poner fuentes especiales en nuestra página, lo que tenemos que tomar en cuenta para que pese menos es: Existe una técnica llamada subset.

¿Qué significa esto? Como Natalia explicaba en el episodio pasado de esta serie, el archivo de la fuente está conformado por muchísimos caracteres. Cada letra es un caracter, cada signo de puntuación es un caracter. Una fuente completa, muchísimas veces llega a tener doscientos, trescientos o cuatrocientos caracteres; la mayoría de los cuales, tal vez nunca vayamos a usar.

En este caso, el subset lo que hace, es crearnos un archivo de fuente que nada más va a contener los caracteres que vamos a usar: Caracteres como las letras minúsculas, mayúsculas, números, signos de puntuación.

Configurar el subset de las fuentes es muy sencillo. Depende de qué vayamos a usar. Si usamos Typekit, Typekit tiene sus propios controles para subset y nos permite seleccionar para qué idioma lo vamos a ocupar. Seleccionamos en este caso, si fuera idioma español, pues, idioma español y nos va a incluir nada más los caracteres necesarios para el idioma español.

En Google Fonts también podemos configurar a través de la URL qué archivos o qué lenguaje o inclusive qué letras nada más queremos.

Si vamos a implementar la fuente nosotros mismos, entonces es un proceso ligeramente distinto. Estando en Windows o en Mac, podemos usar una página que se llama Font Squirrel o “Ardilla de las fuentes”. Y aquí básicamente nos permite subir archivos de fuentes y tiene una herramienta que te permite hacer este mismo proceso, el subset.

Esas son las opciones que tenemos a nuestra disposición y es muy importante que configuremos esto porque si no lo hacemos, vamos a estarle enviando la fuente completa a la gente y muchas veces, la mayor parte del tiempo no van a usarla.

Ahora vamos a hablar de las imágenes. Hoy en día un sitio pesa en promedio, más o menos alrededor de 2MB. Y de estos 2MB el 70% son puras imágenes. Fácilmente es lo que más tamaño ocupa en un sitio. La primer recomendación para nuestras imágenes es la siguiente: Hay que guardar la imagen en el formato adecuado.

Existen varios tipos de formatos de imágenes que nosotros podemos usar en el web, pues tenemos el PNG, tenemos el GIF, el JPG y últimamente el SVG que es para imágenes vectoriales. Cada uno de estos formatos tiene pros y tiene contras; y sirven principalmente, para un tipo e particular de imágenes.

Por ejemplo, el JPG es excelente para guardar fotografías. Cada que checan su Facebook las imágenes que ven son JPGs porque son muy muy buenas para ese tipo de imágenes.

Los GIFs son excelentes para imágenes con muy pocos colores y sólidos, y el PNG24 es usualmente empleado cuando ocupamos algún tipo de transparencia.

Pero, ¿Qué pasa cuando usamos el formato no adecuado para algún tipo de imagen? Por poner un ejemplo rápido; si guardamos una foto en PNG, la fotografía se va a ver muy similar, se va a ver igual con una diferencia: Que va a pesar el doble o el triple.

¿Por qué? Porque el PNG24 es un formato que no pierde calidad es un formato que se llama loseless, o sin pérdida de calidad. Entonces es por este motivo que es importante que sepamos qué formatos existen y para qué son.

Entonces si usamos el formato adecuado nos vamos a ahorrar mucho espacio.

Lo siguiente es, una vez que ya tenemos guardadas nuestras imágenes, hay una cosa, hay un paso que podemos hacer, y esto es pasarlo a través de programas de optimización.

Desde web hay una página que se llama kraken.io. Es de paga, es un servicio de paga pero tiene también su versión gratuita. Tiene ciertas limitantes, creo que no pueden subir archivos más grandes de 1MB, pero es gratuita. Ésta la pueden usar tanto desde Windows como desde Mac.

Ahora, para Mac hay un programa que se llama ImageOptim, este es un programa completamente gratuito. Para Windows hay otro más o menos similar que se llama File Optimizer. Todas estas cosas las vamos a apuntar en las notas.

Pues ya vimos qué es lo que podemos hacer por la imágenes y por las fuentes. Nuestro siguiente paso es ver qué podemos hacer por el HTML, el CSS y el Javascript, que son los archivos de texto.

La principal técnica que podemos usar con ellos es la minificación. ¿En qué consiste esto?

Una vez que nosotros ya terminamos de escribir nuestro HTML o nuestro CSS o el Javascript, antes de subirlo al servidor, podemos pasarlos a través de diferentes programas que básicamente nos van a remover las cosas innecesarias para una máquina.

Cosas como los espacios; como decía, cuando nosotros escribimos el HTML, lo escribimos para nosotros como humanos. Y para que sea entendible insertamos espacios y enters, y tabs y todo ese tipo de cosas que para un servidor o para un navegador, esto no es necesario. Es una máquina.

Entonces, este tipo de programas minificadores remueven todas estas cosas. Aquí es importante notar que nosotros no vamos a trabajar nunca con el archivo minificado. Este es un proceso simplemente que hacemos antes de subir el archivo a su lugar final como el servidor.

Otra técnica que podemos implementar también es la consolidación de los archivos. Consolidar los archivos consiste en juntar varios archivos de un mismo tipo y que están relacionados entre sí en un solo archivo más grande.

Les voy a dar un ejemplo. Hace poco revisé la página de una televisora muy popular aquí en México y ellos tenían 12 archivos de javascript. 9 de estos archivos eran plug-ins de jQuery. Ellos estaban mandando llamar estos 9 plug-ins por separado como archivos independientes, cuando pudieron haber juntado estos plug-ins en un solo archivo y llamarlo plug-ins de jQuery. Tan sencillo como eso.

Aquí la única advertencia que voy a hacer es que si nos queda un archivo extremadamente grande, de digamos, no sé, 600KB o 1MB. En ese punto, ya no va a haber tanta ventaja porque significa que el usuario va a tener que esperar hasta que se descargue este archivote para poder ejecutarse.

Entonces, es algo que tenemos que estar balanceando.

Otra consideración que es extremadamente importante y no puedo terminar de hacer énfasis en qué importante es esto es: Habilitar la compresión de los archivos por parte del servidor.

Esto es algo bien sencillo, inclusive si ustedes no hacen nada de las cosas que les acabo de decir, con tan sólo habilitar la compresión de los archivos por el lado del servidor, instantáneamente van a recibir un beneficio bien grande. Cómo habilitar esta compresión va a depender del tipo de servidor web en el que esté su página. Todos tienen de alguna u otra forma opciones para habilitar la compresión de los archivos. Voy a estar poniendo algunos links en las notas para que puedan ver sobre cómo pueden habilitar esta opción.

La última recomendación que les voy a hacer el día de hoy es como les decía, sobre una técnica. Esta técnica se llama presupuesto de desempeño, y es posiblemente la técnica más importante relacionada con el desempeño web que podemos usar.

El presupuesto de desempeño nos va a dar un punto de referencia para tomar decisiones acerca de nuestro sitio. Decisiones que van a afectar el desempeño de nuestro sitio.

La manera en la que funciona, es muy similar a cualquier otro presupuesto donde tenemos una cantidad fija de algo, como, dinero, pero en este caso en lugar de dinero vamos a tener KB y MB.

Primero vamos a determinar cuál va a ser el peso máximo que nuestro sitio va a poder tener. Este peso máximo va a ser nuestro presupuesto y esto es increíble por lo siguiente:

Porque, usualmente cuando están trabajando en un proyecto web, muchas veces al inicio queda bien. Al inicio es excelente, es bonito, es precioso. Pero, conforme pasa el tiempo se van tomando distintas decisiones. Si alguien dice: Oye, agrégale esta cosa, y órale, ahí va, se la agregan.

Y después alguien más llega y dice: Oye, agrégale esta otra cosa; y así sucesivamente, hasta que después de un par de años, o inclusive en menos tiempo, tenemos un sitio horrible y pesado.

Y eso no quiere decir que haya sido nuestra idea desde el principio ¿verdad?. Teníamos todas las buenas intenciones.

Es por eso que, en esta misma situación, si hubiéramos tenido un presupuesto de desempeño y alguien se acerca con nosotros y nos dice: Necesitamos agregar esta cosa a la página.

En este momento nosotros agarramos esta cosa, sea lo que sea, una imagen tal vez, y nos damos cuenta que al agregarle esta imagen se va a pasar de nuestro presupuesto. En ese punto nosotros podemos decir: Mira lo que pasa es que si agrego esta imagen que tú me estás pidiendo nos vamos a pasar arriba de esto que nosotros no nos podemos pasar.

Entonces, necesitamos re-evaluar si esta imagen es realmente necesaria. Si al final de cuentas la imagen es realmente necesaria, entonces para incluirla, vamos a necesitar quitar algo más de la página.

Esta técnica nos permite estar siempre enfocados en qué es lo importante y en estarlo cuidando. Es por eso que sin algo como esto, es muy fácil que un sitio simplemente crezca y crezca y crezca.

Ahora, ¿Cómo podemos nosotros saber cuánto debe de ser nuestro presupuesto? Porque el asunto con el presupuesto, es que es distinto para cada quién. Cada quién tiene necesidades distintas y su presupuesto va a ser distinto.

La manera de nosotros poder sacar un presupuesto adecuado para nuestras propias necesidades, es bien sencilla. Simplemente evalúen quién es su competencia. No importa si ustedes son una empresa grande o es alguien que tiene un blog o un sitio o lo que sea. Siempre va a haber otras personas que están en el mismo nivel de ustedes. Otras personas que de una u otra forma vienen siendo su competencia.

Entonces, como ejemplo, tomemos lo siguiente: Imaginemos que somos una universidad y vamos a crear el nuevo sitio de la universidad. ¿Qué tenemos que hacer? Vamos a fijarnos en cuáles son las universidades que compiten con nosotros. ¿Cuáles son las universidades que nuestros candidatos también estarían considerando?

Entonces, una vez que ya sabemos cuáles son, vamos a ver cuánto pesan ellas y sacamos el promedio. Después de hacer esto, vamos a determinar que a lo mejor pesaban 5MB. El promedio de las páginas de estas universidades son 5MB.

Ok, entonces tenemos la referencia de los 5MB. No quiere decir que nosotros vayamos a pesar 5MB; lo que nosotros queremos hacer es que sea mejor. Entonces tiene que pesar menos.

Aquí les comento que compañías como Microsoft han hecho investigaciones y han determinado que la gente empieza a notar una diferencia a partir del 20%. Esto quiere decir que la gente va a notar una diferencia de velocidad si un sitio es al menos 20% más rápido que otro sitio.

Si el sitio es solamente 10% más rápido, no lo van a notar. Entonces, ese es el mínimo el 20%. Claro que si nuestro sitio es 30%, 40% o 50% más rápido que otro sitio, definitivamente lo van a notar.

Entonces habíamos dicho que nuestro sitio ficticio de universidades en promedio era 5MB. El 20% de 5MB es 1MB. Y esa es nuestra referencia base en este caso. Como máximo nuestro sitio debería de pesar entonces 4MB. Si pesa aún menos, obviamente va a ser más rápido y esto va a ser mejor.

Esta es la manera en la que nosotros podemos determinar cuál va a ser nuestro presupuesto de desempeño. Como pueden ver es realmente muy sencillo pero es una herramienta que tenemos que usar antes que vayamos a iniciar a trabajar.

Esta herramienta es muy efectiva porque es una herramienta de planeación. Las cosas que podemos nosotros optimizar después de haber ejecutado ya un trabajo, son muy pocas y no van a ser tan benéficas como algo que podemos hacer desde el proceso de planeación.

Espero que estos tips les hayan sido de utilidad y que los tomen en cuenta para su próximo proyecto. O inclusive, que los hagan de una vez como les decía al inicio del episodio.

Estas son cosas que ustedes pueden hacer hoy mismo y hoy mismo van a recibir la ventaja de ellas.

Entonces nos vemos en el siguiente episodio.