Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

pixelambacht.nl

Post reply on HN
Print view View original

71–80 of 156 posts

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#71

Post by billyhoffman »

Klathmon wrote: post #12
anonymish wrote: post #4

There are some really valid points in here and I dislike the idea of using the whole font when only a few icons are required. But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? I would think that does more harm than everyone grabbing a fully cached copy once from a cdn.

It's one of those things that works "in a perfect world", but in the real world it just doesn't work out that well. For starters, leveraging caching via a common CDN pretty much requires everyone to be using a single version from a single CDN. If you can't agree on that, then every time a new version comes out the web is split and the caching doesn't work, and every time someone decides to use another CDN (or someone…

Awesome description of the fragmentation and browser cache size problems that prevent these shared CDNs for common JS/CSS/Whatever files from providing optimal benefits the vast majority of the time. The challege is that oeople still say "well, even if it only works some of the time, that's OK."

It's not. Because does this hurts page load times.

You are having to create a new, cold, TCP connection to go fetch 50-100KB of CSS/JS/whatever from some random server. Which even in HTTP/1.1 is usually slower than just bundling that into your own CSS/JS/Whatever. HTTP/2 makes it even more so.

Just store and serve these things yourselves.

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#72

Post by fortawesome »

niij wrote: post #67
fortawesome wrote: post #58

Earlier quoted context omitted.

73 million sites comes from our friends at Meanpath (their search engine isn't running anymore, sadly). They showed us on 7.3% of websites. Best guess is there are about a billion sites on the internet. Thus, 73 million.

Where did the 1000/visitors/site/day come from? This is what seems unlikely and improbable. This resource is being cached as well, so these numbers do seem obtuse.

Not sure on the 1000/visitors/site/day. But we're also on some pretty big sites as well. IIRC, the final number there is higher than what MaxCDN (BootstrapCDN folks) serves. Not by much though. Within an order of magnitude I think (which is pretty accurate for this kind of guesswork).

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#73

Post by hmottestad »

chrisan wrote: post #50
hmottestad wrote: post #25

Earlier quoted context omitted.

On my machine, the otf version uses much less bandwidth. From 52.4 kb to 16.4.

I'm getting the same results in Chrome using mac, win10, or ubuntu. Are you using the same URLs I posted?

http://imgur.com/a/acTMh

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#74

Post by jlarocco »

IgorPartola wrote: post #48
aerique wrote: post #10

Earlier quoted context omitted.

Icon fonts have been breaking websites for people that do not allow websites to set their fonts.

Are those the same people that disable JavaScript everywhere too? Imagine that you were running desktop apps and said "ok I want this program, but I only want it to use standard widgets, my chosen font, and not use certain API's. Wait why does this look funny and not work right?!"

Actually not. I allow Javascript but I block web fonts because I think they're a stupid idea.

Your argument about desktop apps isn't very good because people can (and do) prevent desktop apps from doing certain things and accessing various stuff, like web cams, the microphone, system directories, the internet, etc. If my text editor breaks because it can't access my webcam, I'd say it's a serious problem.

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#75

Post by yumraj »

anonymish wrote: post #4

There are some really valid points in here and I dislike the idea of using the whole font when only a few icons are required. But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? I would think that does more harm than everyone grabbing a fully cached copy once from a cdn.

Unfortunately it's the same with Bootstrap and other JS/CSS frameworks/libraries like that. You typically only use a small subset but it is non-trivial to carve out the much smaller set that you need. There is some tooling that claims to attempt at cleanup, but not sure how tested they are.

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#76

Post by russellsprouts »

tmd83 wrote: post #54
nandhp wrote: post #45

Earlier quoted context omitted.

> For starters, leveraging caching via a common CDN pretty much requires everyone to be using a single version from a single CDN. If you can't agree on that, then every time a new version comes out the web is split and the caching doesn't work, and every time someone decides to use another CDN (or someone provides a new one) the group is split again. All this common web stuff that is distributed by several CDNs (as w…

Yeah have thought about this a few times myself. Maybe missing something that makes it impossible/risky? Or maybe its just the tendency to ignore simple solutions. This not only solves the CDN issue but it also solve the issue of having to rename the files manually everytime someone do a change. It just makes caching that much saner.

It can be used to subvert the same origin policy and content security policy.

If you see a script tag with the URL bank.com/evil.js, the browser shouldn't assume that the bank is actually hosting evil.js. Even if the hash matches, the content might not be there.

The bank might be using a content security policy to minimize the damage that an XSS attack can do. It only allows script tags from the same origin. However, now an attacker just needs to load evil.js with a particular hash into the cache, and they can create the illusion that the site is hosting it, without having to hack the server to do so.

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#77

Post by Bedon292 »

fortawesome wrote: post #58
the_duke wrote: post #53

Earlier quoted context omitted.

I don't know where they came up with the 73 million sites umber, but let's assume there are that many sites using font awesome. Most sites are obscure, and rarely get any visitors at all. Maybe 10 a month, or none. Popular sites that receive a lot of traffic are also visited very frequently by the same user, so the font will be in the cache. In addition, plenty of sites use a CDN for fontawesome. I guess that number…

73 million sites comes from our friends at Meanpath (their search engine isn't running anymore, sadly). They showed us on 7.3% of websites. Best guess is there are about a billion sites on the internet. Thus, 73 million.

Of those 73 million, how many of them are serving the file themselves, vs pointing to it hosted by someone else? I know you can just point to google directly for their fonts, or unpkg.com for js packages. Is that something people also do for font awesome? Those shared links would greatly increase the cache level, and reduce the number of cache misses, and amount of data served.

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#78

Post by chrisan »

hmottestad wrote: post #73
chrisan wrote: post #50

Earlier quoted context omitted.

I'm getting the same results in Chrome using mac, win10, or ubuntu. Are you using the same URLs I posted?

http://imgur.com/a/acTMh

Well I'm stumped. Would love to know how we are getting different results, and how your results (16KB) are _so_ much better than mine (110KB)

Here is a codepen if someone else wants to try OTF results

http://codepen.io/anon/pen/gLjLMv

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#79

Post by nthcolumn »

fortawesome wrote: post #44

This is a great article. Some of these are already on the agenda for FA5, but there's some new stuff there for us too. We'll dig in and it's a TODO on the FA5 roadmap now. :) Another thing I'm super excited about is stray points in vectors. We found some new tools for Illustrator that make this a LOT easier and will have a very real impact on bandwidth as well. Super fun.

I like and use font-awesome. Thanks and keep up the awesome work. Are there advantages to Wenting Zhang's [approach](http://cssicon.space)? Is there any way of lazy-loading - i.e. just accepting that some people - either through ignorance or laziness will load the entire set - and only use a couple of icons? Even if this were just some tool to craft the url it might get us on the road to that petabytes per day (really?).

Re: Saving the Internet 2000TB a Day: Fixing Font Awesome’s Fonts

#80

Post by richardw »

Klathmon wrote: post #12
anonymish wrote: post #4

There are some really valid points in here and I dislike the idea of using the whole font when only a few icons are required. But, isn't subsetting going to result in users now caching your subset instead of a cached copy of everything? I would think that does more harm than everyone grabbing a fully cached copy once from a cdn.

It's one of those things that works "in a perfect world", but in the real world it just doesn't work out that well. For starters, leveraging caching via a common CDN pretty much requires everyone to be using a single version from a single CDN. If you can't agree on that, then every time a new version comes out the web is split and the caching doesn't work, and every time someone decides to use another CDN (or someone…

If old mobile browsers have 4MB caches, 160+k of that is a big chunk. If you could reduce it to e.g. 10k, you'd need 16 sites all using FA with different font selections before you equal the original size. There's a reasonable chance that it's an investigation worth doing.

Another option: find the most-used icons or combinations. Group them.

Another option: similar to nandhp, get a hash of the font selection and name the file so. There's a very good chance a nearby proxy has that combination stored already.

Post reply on HN