Ajuste de Font Awesome para mejorar la productividad trucos CSS
Gran fuente es una biblioteca de iconos increíblemente popular. Desafortunadamente, es algo fácil de usar de una manera que resulta en un rendimiento menos que ideal. Al subdividir Font Awesome, podemos eliminar todos los glifos no utilizados de los archivos de fuente que proporciona. Esto reducirá la cantidad de bytes transmitidos a través del cable y mejorará el rendimiento.
Multipliquemos las fuentes juntas en un proyecto de Font Awesome para ver la diferencia que hace. A medida que avanzamos, supongo que está importando el archivo CSS que proporciona Font Awesome y usando sus fuentes web para mostrar iconos.
vamos a configurar las cosas
Para demostración, no tengo nada más que el archivo HTML que importa. El archivo CSS principal de Font AwesomePara obtener una muestra razonable de íconos, enumeré cada uno de los que uso en uno de mis proyectos paralelos.
Así es como se ve nuestro archivo HTML en un navegador antes de un subconjunto de fuentes:
Aquí hay un vistazo a la pestaña Red de DevTool para ver lo que viene.
Ahora veamos cuántos bytes se necesitan para que nuestros archivos de fuentes muestren todo esto.
Aquí está nuestro caso principal.
Queremos ver cuál es el uso más simple y menos efectivo de Font Awesome. En otras palabras, queremos la implementación más lenta posible sin optimización. yo importo all.min.css
archivo proporcionado por Font Awesome.
Como vimos anteriormente, el archivo gzip pesa 33,4 KB, lo cual no está nada mal. Desafortunadamente, cuando echamos un vistazo a la sección Fuente de DevTool, las cosas empeoran un poco.
Si bien los archivos de fuentes no son como un recurso costoso para que su navegador lo maneje como JavaScriptestos todavía son bytes que su navegador necesita bajar, solo para algunos íconos pequeños. Tenga en cuenta que algunos de sus usuarios pueden estar navegando por su sitio en un dispositivo móvil, lejos de una conexión a Internet fuerte o rápida.
Primera experiencia con PurifyCSS
La hoja de estilo principal de Font Awesome contiene definiciones para literalmente miles de iconos. Pero, ¿y si necesitamos como máximo unas pocas docenas? ¿Seguramente podríamos cortar cosas innecesarias?
Existen muchas herramientas que analizarán su código y eliminarán los estilos no utilizados de la hoja de estilos. lo uso por accidente PurificarCSS. Aunque esta biblioteca ya no se mantiene activamente, la idea es la misma y, en última instancia, esta no es la solución que estamos buscando. Pero veamos qué sucede cuando reducimos nuestro CSS a lo que necesitamos hacer con este script:
const purify = require("purify-css");
const content = ["./dist/**/*.js"]; // Vite-built content
purify(content, ["./css/fontawesome/css/all.css"], {
minify: true,
output: "./css/fontawesome/css/font-awesome-minimal-build.css"
});
Y cuando cargamos este archivo CSS recién creado, nuestros bytes CSS sobre el cable se reducen mucho, ¡de 33 KB a solo 7,1 KB!
Desafortunadamente, nuestros otros archivos de fuentes Font Awesome no han cambiado.
¿Qué sucedió? PurifyCSS ha hecho su trabajo. Realmente eliminó las reglas CSS para todos los íconos no utilizados. Desafortunadamente, no pudo llegar al verdadero archivos de fuentes para recortar glifos además de las reglas CSS.
Si tan solo existiera una herramienta como PurifyCSS que maneje archivos de fuentes...
¡Subconjuntos al rescate!
Existen, por supuesto, herramientas que pueden eliminar el contenido no utilizado de los archivos de fuentes, y se denominan subgrupos.A subversivo analiza su página web, escanea sus archivos de fuentes y elimina los caracteres no utilizados. Hay un montón de herramientas para crear subconjuntos de fuentes, como la de Zach Leatherman. colgador de glifosResulta que el subconjunto Font Awesome es bastante fácil porque viene con sus propios subconjuntos integrados. Vamos a ver.
Establecer fuentes automáticamente
Las herramientas de subconjunto automáticas y manuales que le mostraré requieren pago Gran fuente suscripción profesional.
Font Awesome te permite personalizar lo que llama equiposque se describen en Documentos de Font Awesome como “una mochila que lleva todos los íconos y la grandeza que viene de necesita un paquete pequeño y ordenado que pueda colocar en la parte posterior de su proyecto con facilidad ". Entonces, en lugar de importar cada archivo CSS, el kit le brinda una sola etiqueta de secuencia de comandos que puede agregar a su archivo HTML <head>
y desde ahí el kit solo envía los glifos de la fuente que realmente necesitas del archivo de fuente.
Crear un kit lleva alrededor de un minuto. Obtienes una etiqueta de script que se parece a esto:
<script src="https://kit.fontawesome.com/xyzabc.js" crossorigin="anonymous"></script>
Cuando se carga el script, ya no tenemos ningún archivo CSS y el archivo JavaScript tiene solo 4 KB. Echemos otro vistazo a la sección Fuentes de DevTools para ver qué archivos de fuentes se están cargando ahora que hemos creado algunos subconjuntos.
Reducimos de 757 KB a 331 KB. Esto es más del 50% de descuentoPero aún podemos hacerlo mejor que eso, especialmente si todo lo que mostramos son íconos 54. Aquí es donde entra en juego el restablecimiento manual de fuentes de Font Awesome.
Subconjunto de fuentes manualmente
¿No sería bueno si Font Awesome nos diera una herramienta para seleccionar literalmente los íconos exactos que queremos y luego proporcionar un diseño personalizado para que? Bueno, lo hacen. No anuncian esto demasiado por alguna razón, pero en realidad tienen una aplicación de escritorio solo para subdividir fuentes manualmente. la aplicación es disponible para descargar desde su sitio web - pero, al igual que los subconjuntos automáticos, esta aplicación requiere una suscripción paga de Font Awesome para usarla.
Busque los íconos, seleccione la familia, agregue lo que quiera y luego haga clic en el icono azul grande Construcción Eso es realmente todo lo que se necesita para generar un subconjunto personalizado de iconos de Font Awesome.
Después de hacer clic en el botón, Font Awesome le preguntará dónde guardar su compilación personalizada y luego descartará el archivo ZIP que contiene todo lo que necesita. De hecho, la estructura que obtendrá es exactamente la misma que la de una descarga normal de Font Awesome, lo que facilita especialmente las cosas y, por supuesto, le permite guardar la compilación personalizada como un archivo de proyecto para que pueda abrirlo más tarde para agregar o elimine los iconos si es necesario.
Abriremos DevTools para ver el tamaño final de los íconos que estamos cargando, pero primero veamos los archivos de fuentes reales. La compilación personalizada crea muchos tipos diferentes, dependiendo de lo que use su navegador. concentrémonos en .woff2
archivos que carga Chrome. Los mismos archivos ligeros, simples, de dos tonos, sólidos y de marca que estaban allí todavía están en su lugar, excepto que esta vez ningún archivo tiene más de 5 KB... ¡y eso es antes de ser archivado!
¿Qué tal un archivo CSS? Solo se reduce a 8KB. ¡Con gzip son solo 2KB!
Aquí está el cálculo final en DevTools:
Antes de irnos, eche un vistazo rápido a los nombres de los archivos de fuentes fa-light-300.woff2
El archivo de fuente todavía está ahí, pero los otros se ven diferentes.Esto se debe a que uso Vite aquí y decidí incrustar automáticamente los archivos de fuente en CSS porque son muy pequeños.
Es por eso que nuestro archivo CSS se ve un poco más grande en la partición de DevTools Network que los 2 KB que vimos antes en el disco. La compensación es que la mayoría de estos "archivos" en las fuentes anteriores no son archivos en absoluto, sino cadenas integradas codificadas por Base64 exactamente en este archivo CSS, ahorrándonos solicitudes de red adicionales.
Dicho todo esto, Vite incorpora muchos formatos de fuente diferentes que el navegador nunca usará. Pero en general, esa es una cantidad bastante pequeña de bytes, especialmente en comparación con lo que hemos visto antes.
Antes de continuar, si se pregunta si esta herramienta GUI de fuente de subconjunto de escritorio está disponible en la CLI, que se puede integrar con CI/CD para generar estos archivos durante la construcción, la respuesta es... todavía no. Envié un correo a la gente de Font Awesome y me dijeron que algo estaba planeado. Esto permitira consumidores para agilizar el proceso de construcción, siempre y cuando se entreguen.
Como puede ver, usar algo como Font Awesome para íconos es genial. Pero el uso predeterminado puede no ser siempre el mejor enfoque para su proyecto. Para obtener el tamaño de archivo más pequeño posible, los subconjuntos de fuentes son algo que podemos hacer para cortar lo que no necesitamos y solo dar servicio a lo que hacemos. Este es el tipo de rendimiento que queremos, especialmente cuando se trata de cargar fuentes que tradicionalmente han sido difíciles de discutir.
Deja una respuesta