I hate Font Awesome like I hate jQuery

综合技术 2018-12-08 阅读原文

First off, if you don’t know me then you might be offended or enraged by that statement. Please, keep reading.

Font Awesome
is a truly great collection of icons that can be easily deployed with a simple CSS or JS include. A ton of work has gone into it to make it as small as possible and they’ve even encouraged use of things like subresource integrity
which is just great to see. Font Awesome is truly awesome.

I guess to be fair, I don’t actually hate Font Awesome, I hate that people use it blindly.

Once again, if you don’t know me, I’m a penny pincher
when it comes to HTTP requests, DNS lookups and bytes crossing the wire. When someone says “pull the data in with AJAX” I say “can you just inline the data on the server-side in a JS block?” When someone else says “here’s how to do something with jQuery” I’ll always come back with the vanilla JS version. Just load the jQuery from a CDN because the user might have it cached already? Nope, I’d rather host myself. One less DNS lookup and TLS handshake to worry about, not to mention a potential point of failure.

Back to Font Awesome, including it the way that most people blindly use it you’ll end up with a minimum of two calls, one for the CSS and one for one of the font files. But, how I usually see it is that someone wants a Twitter icon
, and exclamation mark
, and a check mark
, which, if you don’t already know actually causes three font files to download
! The Twitter logo is part of the brand fonts, the exclamation mark is solid fonts and the check mark is part of the regular fonts. In total you’ve added 150 KB to the page, just for those three icons that could have been inlined for probably 2 or 3 KB (and that’s not counting compression.)

Now, if you don’t care about 150 KB on your initial request, that’s fine, I’m not judging you. But 150 KB for X
plus another 100 KB for Y
starts to add up over time. And sites never shrink over time, they always grow. Tomorrow or next week or next year you’ll add a new feature which adds another
100 KB for feature Z

My further hatred of how people use it, and you’ll see this very often in the WordPress world, is that every plugin requests their own copy of Font Awesome, some on version 4, some on version 5, so you end up with multiple downloads of Font Awesome. On a recent site we audited we found 500 KB of Font Awesome data on the home page! That’s half of a megabyte! For icons!

Anyone still reading? Probably not.

I just had to say something, it was bugging me. Font Awesome is a great way to get started for fast designs. It is also a great tool if you have dynamic or unknown data entering your site that you need to support. And further, if you defer or lazy load things you can ease the burden even more. But just don’t use it blindly.

On the off-chance that someone actually reads this I turned comments off because I don’t care, I just wanted to rant.

责编内容by:cjhaas.com 【阅读原文】。感谢您的支持!


SelectMenu:简单、易用、多样的菜单解决方案... Simple, easily and diversity menu solution 简体中文文档 Docs、Demo、Guide Explorer on English official site...
problems with waiting for multiple deferred functi... I am trying to use the node-facebook-sdk to make FB graph API calls using Node.JS I want to ...
jquery 基础笔记 事件 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。 语法 $(selector).bind(event,data,function) 当元素失去焦点时发生 blur 事...
Extract a number from a string using jQuery I have a series of records with ids assigned to them. I.e. record1, record2, record3 etc I'm trying to get the id of...
Smoothing upwards and then repaired / fixe... I'm trying to put together a site that has a welcome-type screen followed by a header/navigation that scrolls to the to...