Font Awesome is a popular library of icons, but it can easily lead to poor performance in the way it is used. By selecting Font Awesome by subset, we can remove any unused glyphs from the font file. This will reduce the number of bytes transmitted by the network, thereby improving performance.
Let's take a font subset selection in a Font Awesome project and see what changes it can make. In the following process, I assume you are importing the CSS file provided by Font Awesome and using its web font to display the icon.
For demonstration, I only have one HTML file that imports the basic CSS file of Font Awesome. To get a reasonable sample of icons, I have listed each icon I use in a side project.
Here is how our HTML file looks in the browser before selecting a font in the subset:
The following is the Network tab of DevTool, which displays the loaded content.
Now let's see how many bytes it takes for our font file to render all of this.
We want to see what the most direct and worst-performance way of using Font Awesome is. In other words, we want to implement the slowest and no optimization solution. I'm importing the all.min.css file provided by Font Awesome.
As shown above, the compressed file size is 33.4KB, which is not bad. Unfortunately, things got worse when we looked at DevTool's Fonts tab.
Although font files are not as expensive as JavaScript for browsers, they are still the bytes that browsers need to download, just for a few small icons. Consider that some of your users may browse your website on mobile devices, stay away from a strong or fast internet connection.
Font Awesome's main stylesheet contains thousands of icon definitions. But what if we only need dozens of icons? We can certainly remove unwanted things?
There are many tools to analyze your code and remove unused styles from the stylesheet. I happen to be using PurifyCSS. Although this library is no longer actively maintained, its philosophy is the same, and ultimately, it is not the solution we are looking for. But let's see what happens when we prune CSS to only contain the required content, we can implement it using the following script:
<code>const purify = require("purify-css"); const content = ["./dist/**/*.js"]; // Vite 构建的内容purify(content, ["./css/fontawesome/css/all.css"], { minify: true, output: "./css/fontawesome/css/font-awesome-minimal-build.css" });</code>When we load the newly built CSS file, the number of CSS bytes we transfer over the network dropped significantly, from 33KB to 7.1KB!
Unfortunately, our other Font Awesome font files have not changed.
what happened? PurifyCSS does its job. It does remove the CSS rules for all unused icons. Unfortunately, it cannot enter the actual font file to trim the glyphs, as well as the CSS rules.
It would be great if there was a tool like PurifyCSS that could handle font files...
Of course, there are tools that can remove unused content from font files, and they are called subset selection tools . The subset selection tool analyzes your web page, views your font files, and trims unused characters. There are many subsets of tools for selecting fonts, such as Zach Leatherman's Glyphhanger. It turns out that Font Awesome is very simple to choose subsets because it comes with a built-in subset selection tool. let's see.
My upcoming automatic subset selection and manual subset selection tool requires a paid Font Awesome Pro subscription.
Font Awesome allows you to set up what is called a toolkit , which is described in the Font Awesome documentation as “a backpack that can easily put all the icons and wonderful content you need in a clean and lightweight package that makes it easy for you to add it to your project.” So instead of importing any and all CSS files, the toolkit provides you with a one that can be added to the HTML file
The single script tag from where the toolkit sends only the font glyphs you actually need from the font file. It takes about one minute to create a toolkit. You will get a script tag similar to this:
<code></code>
When the script is loading, we now have no CSS files at all, while the JavaScript files are only 4KB. Let's look at the DevTools Fonts tab again to see which font files are loaded after we've made some subset selections.
We have dropped from 757KB to 331KB. Reduced by more than 50% . But we can still do better, especially if we only render 54 icons. This is where Font Awesome's manual font subset selection tool comes into play.
Wouldn't that be great if Font Awesome gave us a tool that allows us to select the exact icon we want and then provide it with a custom build? Yes, they did. For some reason, they didn't hype this, but they actually do have a desktop app dedicated to manual subset selection of fonts. The app can be downloaded from their website – however, like the automatic subset selection tool, this app requires a paid Font Awesome subscription to actually use.
Search the icon, select the series, add what you want, and click the large blue build button. This is really all the work you need to do to generate a custom subset of Font Awesome icon.
After clicking the button, Font Awesome will ask it where it should save the custom build, and then it will dump a ZIP file with everything you need. In fact, the structure you will get is exactly the same as a normal Font Awesome download, which makes things particularly simple. Of course, it allows you to save your custom build as a project file so that you can reopen it later to add or remove icons as needed.
We will open DevTools to see the final size of the icon we are loading, but first, let's look at the actual font file itself. Custom builds create many different types, depending on what your browser uses. Let's focus on the .woff2 file, which is the one loaded by Chrome. The same light, regular, duotone, solid and brand files that existed before still exist, but this time none of them are larger than 5KB...and this is before they are compressed by gzip!
How about CSS files? It shrinks to only 8KB. After compression using gzip, it only has 2KB!
Here are the final statistics in DevTools:
Before we leave, if you're wondering if the desktop font subset GUI tool has a CLI that can integrate with CI/CD to generate these files at build time, the answer is...not yet. I emailed the Font Awesome staff and they said they were planning. If it is published, this will allow users to simplify their build process.
As you can see, it's very cool to use tools like Font Awesome to display icons. But the default usage is not always the best way to do it for your project. To get the smallest file size possible, selecting fonts for a subset is something we can do to trim what we don't need and to only provide what we need. That's the performance we want, especially when it comes to loading fonts, which are traditionally difficult to handle.
The above is the detailed content of Subsetting Font Awesome to Improve Performance. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
