The Quest for a Lean and Mean Font Awesome 5
I’m worried, Ray, it’s getting crowded in there and all my recent data points to something big on the horizon.
Our team has been hard at work on Font Awesome 5. At the time of this writing we are 96% complete converting the older version 4 icons. We’ve added completely new styles: Regular and Light. There are tons of new brand icons and new features such as the SVG Framework and Power Transforms.
We’ve received a lot of positive feedback but something caught my attention while I was reviewing the issues thread on our private Font-Awesome-Pro GitHub repository.
To make working with SVG a piece of <i class=”fa fa-cake”></i> our new framework uses JavaScript. We’ve been focused on adding features and haven’t spent time optimizing performance or file size. As of beta 2 the main file had grown to an embarrassingly large size.
Part of this is intentional. We don’t want to waste time optimizing something that we aren’t sure is gonna stick or be rewritten.
But 66kb…
How large is Font Awesome 4?
With version 4 you often have two different files that must be loaded in order for it to work.
- 30kb css/fontawesome.min.css
- 96kb fonts/fontawesome-webfont.woff
From the beginning we’ve been watching that 30kb CSS file size. Our new JavaScript file–yes that 66kb version–includes the CSS. From the beginning we’ve held this thought:
“Hey, wouldn’t it be cool if the entire JavaScript framework could be about the same size as the old 30kb CSS file?”
We went from 66kb to 22kb
The first step was removing Lodash and using some functional programming additions from fast.js. Lodash is a robust library but we didn’t need all that power. New size 48kb.
🤓 Next we removed the usage of some ES6 features like array destructuring. This makes a difference because our build tool, Babel.js and Rollup.js, doesn’t need to include the extra functions to make it run in the ES5 browsers.
const [width, height, _ligature, _unicode, vectorData] = iconBecame:
const width = icon[0]
const height = icon[1]
const vectorData = icon[4]Down to 33kb.
We then minimized the embedded CSS and used some additional compression and mangling options in UglifyJS.
uglifyjs dist/js/fontawesome.js \
-c -m --toplevel -o dist/js/fontawesome.min.jsDown to 22kb. That’s not bad.
What’s next
Font Awesome 5 Pro includes 2 new styles: Regular and Light. You can head over to https://fontawesome.com to check out some examples. These uncompressed packs are still rather large compared to the compressed WOFF and Brotli-compressed WOFF2.
One of our stretch goals in our Kickstarter was to include a subsetter that would reduce your packs to only the icons that you are using.
We also have just recently included Universal / Isomorphic Javascript packages that are node.js and npm-compatible. If you have a Font Awesome 5 Pro license you can download the latest beta and use those today. What’s great about this is subsetting can be attained by using Tree Shaking which is supported in Webpack 2.0 and Rollup.js. You only import and use the icons that you need.
As we approach the final release of version 5 we’ll do an apples-to-apples comparison of file size and time to paint (1) performance.
👉🏻 Pre-order Font Awesome Pro.
1 Time to paint is the time it takes for something to first appear in the browser.
