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

131–140 of 156 posts

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

#131

Post by keville »

meirelles wrote: post #38

That's a lot a bandwidth for a single thing. Makes me wonder, perhaps we should have a global repository of popular web libraries for browsers, all of them versioned, like happens on npm/bower. It's possible be backwards compatible with old browsers using a real and standardized URL. A single source of the truth. It's better than many CDNs providing the same thing over and over again... Being immutable packages brows…

You're not the first to think this is a good idea.

I can think of a few [1][2][3] examples just off the top of my head.

[1] https://developers.google.com/speed/libraries/ [2] https://www.jsdelivr.com [3] https://cdnjs.com

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

#132

Post by sloanesturz »

monochromatic wrote: post #97
jsnell wrote: post #28

Is the 2000TB/day number reasonable, or just clickbait? It's all based on coming up with two numbers that when multiplied say that this resource is downloaded 73 billion times a day. That's 20 times / day for every internet user (even those using it on a 2G connection once a year). Given a reasonable caching period of 1 month, that'd mean the average user visits 600 different sites a month. That seems like much more…

Indeed. > If each day 73 million websites serve the Font Awesome WOFF to an average of a thousand visitors who don’t have these fonts in the browser’s cache... This assumption that they don't have the fonts cached is only sensible if each user is unique. But that means that we have 73 BILLION unique users.

Not necessarily: your browser caches a different version of font-awesome for each website you visit. There's no way for it to tell that site1.com/static/font-awesome is the same as site1.com/resources/font-awesome until it makes the HTTP request and downloads it.

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

#133

Post by Avshalom »

kalid wrote: post #125
Avshalom wrote: post #121

Earlier quoted context omitted.

Oh shit, you're the asshole[1] behind instacalc? I love instacalc. [1] I mean that in the most endearing way.

Hah, yes, I'm that bad mamma jamma.

seriously, been using it for years, one of my favorite tools P.S. I'm sure you've looked into it but any plans for graphing capabilities?

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

#134

Post by Steeeve »

maxerickson wrote: post #96
nathan-wall wrote: post #26

Earlier quoted context omitted.

I've been converting each font awesome image I need to SVG by hand. It's actually really easy. 1. Open fontawesome-webfont.svg in a text editor. 2. Find the glyph you want to use. 3. Copy it into a new file. 4. Add boilerplate[1] to new file. 5. Change the tag to a tag. 6. Add the attribute `transform="scale(0.1,-0.1) translate(0,-1536)"` 7. Open the file in Chrome and see your SVG. [1] boilerplate: {glyph goes here}…

That's more straightforward than it is easy. Easy would be: fa2svg f015

https://github.com/encharm/Font-Awesome-SVG-PNG

This converts the icons to either svg or png in whatever color you want, in any size you want.

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

#135

Post by dcousens »

kalid wrote: post #90
koliber wrote: post #35

Earlier quoted context omitted.

By renaming the CSS file from `font-awesome.min.css` to `fa.min.css` they could save 660GB a day: 73,000,000 sites * 1000 visitors * 10 bytes / 1024^3

A calculator for you, because I'm in pitch-my-side-project mode ;) https://instacalc.com/50060

If you moved your scripts to 1st party, uMatrix wouldn't block it

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

#136

Post by jcl »

olegkikin wrote: post #64
espadrine wrote: post #16

Earlier quoted context omitted.

That is what I did for the shields.io logo: https://raw.githubusercontent.com/badges/shields/master/logo... Unfortunately it is still a bit big. Simply converting it to SVG would probably be smaller. I'd welcome a simple tool that does that!

Here, reduced it from 8832 bytes down to 4710 http://olegkikin.com/badge2_cleaned.svg And it GZips better as well (4793 -> 2120). I opened it in Inkscape, converted the text to path. Then ran it through SVGCleaner. You can also do manual simplification in Inkscape (Ctrl + L) till the quality starts to degrade. This lets you reduce things even further: http://olegkikin.com/badge3_cleaned.svg 3516 bytes, 1726 GZipped.

When reducing SVGs for data urls, I've found you can reduce size even further by scaling the image up, then rounding coordinates to integers. I've written a few scripts to assist with this, but I imagine you could get a similar effect in Inkscape by snapping everything to an integer grid.

Also, merging path elements together helps.

For example, here's the logo in 1952 bytes: http://pastebin.com/YYBpWsDE

And I'm sure there's further room for manual reduction, maybe by switching between strokes/fills and further cleaning up the paths.

(It would be cool if someone were to work on an automated system for doing this kind of simplification. But I have a feeling that it's difficult find a general technique that will work across SVG hierarchies, like scaled/rotated groups, etc.)

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

#137

Post by efrafa »

theandrewbailey wrote: post #20
mosburger wrote: post #13

If you're only using a small subset of FontAwesome (as I suspect many people do), I'd imagine at some point it'd make a lot of sense to use data-uri's to effectively embed them directly in an existing request, which would be faster than a CDN? I saw a talk by someone from Smashing Magazine where they basically did this for a subset of their WebFonts (downloading the entire font asynchronously afterward), then they ca…

For my blog, I embedded all my webfonts into my CSS using base64 data URIs. That CSS is 100k, but my server gzips it to 72k, which is not much bigger than the CSS without the fonts + the fonts separately. Because I don't have HTTP2 yet, fewer requests make it faster (especially considering HTTPS), despite the extra size.

Base64 fonts is not always good idea. We switched back to woff as browser was actually longer parsing base64 than downloading woff file in most cases.

With base64 you are also downloading all of them all the time.

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

#138

Post by stephen_g »

sloanesturz wrote: post #132
monochromatic wrote: post #97

Earlier quoted context omitted.

Indeed. > If each day 73 million websites serve the Font Awesome WOFF to an average of a thousand visitors who don’t have these fonts in the browser’s cache... This assumption that they don't have the fonts cached is only sensible if each user is unique. But that means that we have 73 BILLION unique users.

Not necessarily: your browser caches a different version of font-awesome for each website you visit. There's no way for it to tell that site1.com/static/font-awesome is the same as site1.com/resources/font-awesome until it makes the HTTP request and downloads it.

Many sites use the provided MaxCDN URL though, which would be cached between sites.

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

#139

Post by kalleboo »

sorahn wrote: post #126
koliber wrote: post #35

Earlier quoted context omitted.

By renaming the CSS file from `font-awesome.min.css` to `fa.min.css` they could save 660GB a day: 73,000,000 sites * 1000 visitors * 10 bytes / 1024^3

skip the `min` for production completely. use `fa.css` and if you want the expanded one for development, then you could have `fa.[max|debug|whatever].css`

Do you even need the ".css"? Just set the proper mime type in the server configuration

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

#140

Post by therein »

dcousens wrote: post #135
kalid wrote: post #90

Earlier quoted context omitted.

A calculator for you, because I'm in pitch-my-side-project mode ;) https://instacalc.com/50060

If you moved your scripts to 1st party, uMatrix wouldn't block it

Writing this so that the owner of the site knows it affects more than one person.
Post reply on HN