Mejora la velocidad de carga optimizando tus fuentes icónicas

Las iconic fonts (fuentes icónicas) se han adoptado como estandar a la hora de incluir iconos en nuestros sitios web, al ser vectores nos permiten cambiar el tamaño y color sin tener que incluir varias imágenes por cada icono.

Aunque el ahorro de recursos es evidente hay un par de puntos a tener en consideración.

Lo primero es la cantidad de elementos, Font Awesome a la fecha cuenta aproximadamente con 600 iconos de los cuales no solemos usar mas de 30, lo que resulta en un montón de elementos innecesarios que afectan la velocidad de carga. Lo segundo es que si quisiéramos utilizar iconos de otro paquete nos tocaría incluir ambas fuentes, mas peso, mas lentitud.

Custom builds

La mejor manera de solucionar estos problemas es extraer únicamente los iconos que vamos a utilizar sin importar que pertenezcan a paquetes diferentes, en lo personal Fontastic cumple muy bien esta labor, pero, ¿Qué tanto mejora la carga el utilizar un custom build en vez de la fuente completa?.

Veamos esto en números, haremos 2 pruebas, en una incluiremos las 2 fuentes completas y en la segunda el custom build con 20 iconos de 2 fuentes diferentes.

Para generar la custom build entramos a Fontastic, nos registramos de manera gratuita, seleccionamos los iconos que vamos a utilizar y hacemos clic en la pestaña publish donde se encuentra el boton de descarga.

Fuente completa : 325 KB

Custom build : 6 KB

Conclusión

No hay mucho que agregar al resultado, a todos nos caería bien ahorrarnos ~300 KB de carga en nuestros sitios web.

Compártelo o cuéntanos qué tanto mejoró la carga de tu sitio con esta herramienta.