Cómo ahorrar casi 2000 Terabytes diarios en Internet arreglando Font Awesome
5 minutos

Cómo ahorrar casi 2000 Terabytes diarios en Internet arreglando Font Awesome

Font Awesome es probablemente la fuente de iconos más famosa del mundo. Hace unas semanas lanzaron una campaña en Kickstarter para aumentar el número de iconos que ya incluye, alcanzando la friolera de 1 millón de dólares en financiación.

Según sus creadores, Font Awesome es utilizado por 73 millones de sitios web actualmente. La tipografía que está actualmente disponible para su uso ocupa 162Kb. Si pudieramos reducir ese tamaño optimizando la fuente conseguiríamos un ahorro más que considerable. Debido a la enorme popularidad que tiene, cada bit cuenta.

Usando OTF en lugar de TTF

Si echamos un vistazo a su Github, Font Awesome proporciona un fichero OTF para "escritorio" y un fichero TTF para "web". En realidad no hay ninguna razón para no usar una fuente OTF en web; además, los ficheros TTF suelen ser mayores en tamaño que los OTF.

Por tanto, si utilizaramos el fichero OTF (132 Kb) en lugar del TTF (162 Kb) ahorraríamos unos 30 kb. El único "pero" es que la versión OTF de Font Awesome está un poco desactualizada y no incluye algunos iconos que sí están en la versión TTF. Pero imaginemos esos 30 Kb de ahorro multiplicados por el número de sitios que usan la fuente diariamente.

Reduciendo las unidades por pulgada (unitsPerEm)

El valor unitsPerEm determina el grado de finura de la plantilla de caracteres. Los valores más comunes suelen rondar los 1000 y 2048. Cuando una fuente tiene un unitsPerEm de 2048 y se renderiza a un tamaño de 16px (font-size: 16px) significa que un pixel es renderizado en un grid de 128x128 (2048 / 16 = 12😎, y esto es muchísimo detalle para un simple pixel de un caracter.

Si miramos la especificación vemos como las coordenadas pueden ser almacenadas como short (16 bits) o como byte (8 bits). Esto significa que un contorno de ocho coordenadas:

Copiar
<contour> <pt x="1000" y="750" on="1"/> <pt x="1000" y="500" on="1"/> <pt x="500" y="500" on="1"/> <pt x="500" y="750" on="1"/> </contour>

Necesita 8 shorts (o 16 bytes) para almacenar una coordenada (x, y), mientras que usando solamente 8 bytes (1 byte para cada coordenada) quedaría de la siguiente forma:

Copiar
<contour> <pt x="100" y="75" on="1"/> <pt x="100" y="50" on="1"/> <pt x="50" y="50" on="1"/> <pt x="50" y="75" on="1"/> </contour>

El resultado sería idéntico. Cualquier valor por debajo de 255 cabe en 1 byte. En este ejemplo hemos ahorrado 8 bytes en este contorno de ejemplo (un caracter de Font Awesome puede estar compuesto por multitud de ellos).

En el caso de Font Awesome se está utilizando un valor de 1792 para unitsPerEm. Como hemos explicado que esto quizás es demasiado para una fuente de iconos como esta, si la reducimos a 256 y suponemos que una fuente como Font Awesome puede tener unas 100.000 coordenadas combinadas entre todos los caracteres, ¡conseguiríamos reducir su tamaño en aproximadamente unos 15 Kb!.

Claro que ahora podríamos pensar que si hacemos esta reducción perderíamos bastante calidad. Pero esto sería realmente perceptible si renderizáramos los iconos a un tamaño bastante grande. Por lo general, Font Awesome se utiliza para iconos en sitios muy discretos así que el resultado sería el mismo en realidad.

Ejemplo de Font Awesome animado entre 1792 y 256 unitsPerEm

Eliminando información innecesaria

Las herramientas que generan las fuentes de Font Awesome incluyen información en los archivos como metadatos y demás que hacen que el fichero aumente en tamaño. Existen herramientas como pyftsubset (parte de TTX/FontTools) que ejecutan optimizaciones en paquetes tipográficos para eliminar este tipo de información que realmente no es necesaria.

Ejecutando esta herramienta sobre Font Awesome vemos que el fichero se reduce en unos 9 Kb. Aunque no parece un ahorro significativo, estamos hablando de un ahorro de este calibre para miles de millones de usuarios.

Generando archivos WOFF/WOFF2 super comprimidos

Hasta ahora hemos visto el ahorro en kilobytes partiendo de la versión TTF de Font Awesome. Como fuente web lo ideal sería utilizar WOFF y WOFF2.

El fichero WOFF ocupa 98.024 bytes. Comprimiéndola con Zopfli obtenemos un fichero de 71.632 bytes. Si hacemos lo mismo con el fichero WOFF2 vamos desde los 77.160 hasta los 59.000 bytes.

Ahora el fichero WOFF ocupa unos 26 Kb menos, y el fichero WOFF2 18 Kb menos. Como vemos todo esto lo hemos hecho utilizando una herramienta de compresión superior a la que utiliza Font Awesome por defecto.

Insertar sólo lo que usamos

Aunque pueda parecer obvio, la mejor manera de optimizar este tipo de paquetes tipográficos es generar e insertar únicamente los que usaremos en nuestro sitio web. Actualmente Font Awesome tiene 675 iconos y es muy poco probable que los utilicemos todos. El ahorro que tendríamos si generáramos una fuente con sólo los iconos que utilizamos sería muy grande.

Conclusión

Como ya comentamos, cada día 73 millones de webs utilizan Font Awesome en su versión WOFF. Suponiendo una media de 1.000 usuarios sin la versión cacheada del archivo, y utilizando el ahorro potencial que hemos visto al generar los archivos WOFF/WOFF2:

73.000.000 sitios x 1.000 visitantes x 26 kilobytes = 1.898 Terabytes

Es decir, estaríamos ahorrando casi 2 petabytes de datos en descarga. Obviamente Font Awesome está alojado en la mayoría de CDNs con políticas de caché muy buenas para mejorar la transferencia y disponibilidad, pero optimizando y exprimiendo un poco más el tamaño del archivo se podría conseguir un ahorro bestial en datos descargados.

Está claro que ahorrar 26 kilobytes en un sitio web no va a hacer que esa web vaya más rápida; deberíamos preocuparnos primero por las imágenes de gran tamaño, código JS inútil, minificar el CSS y el JS, etc. Pero si hablamos de una escala más global, el ahorro es tan abismal que nos hace plantearnos el verdadero poder de esos 26 Kb ahorrados.

Enlaces relacionados