Web Fonts Performance

https://speakerdeck.com/bramstein/web-fonts-performance

by nnx • 11 years ago

113 57 11 years ago

mrmondo2• 11 years ago

I've found the performance of web fonts to become more of a problem over the past year or so, I guess this is as their popularity has increased.

1. Privacy

It's well known that companies such as Google and Adobe use web fonts to track users that may not even (knowingly) be their customers.

2. Performance

Just last week I logged a bug with our developers when our monitoring started picking up that one of their staging / demo sites was taking a long time to render, turns out they were using a web font provided by Hoefler & Co's 'typography.com' which is incredibly slow to load, here's the waterfall of the page load: http://i.imgur.com/riNT3hH.png

dingaling• 11 years ago

3. Readability

My enjoyment of the web improved immensely when I disabled font selection on web pages and imposed my own serif font over them all.

Occasionally this does result in breakages when a particular site relies on icons embedded in a web font but I accept that as the cost of my choice.

chrisan• 11 years ago

Speaking of readability, I cannot stand these 200 weight thin fonts that only look good on a "retina" device places choose to use sometimes

spankalee• 11 years ago

It's well known that companies such as Google and Adobe use web fonts to track users that may not even (knowingly) be their customers.

Citation?

Google Web Fonts explicitly doesn't use any cookies or track users in any way: https://developers.google.com/fonts/faq?hl=en#what-does-usin...

kzrdude• 11 years ago

How can typography.com still have customers, if it looks like this?

Did they budget for those 2 seconds extra load time while they set up the new design?

Theodores• 11 years ago

Now there is a story... On the website I work on we had some horrid typography.com font loaded, which was theoretically a good idea, once upon a time. Since this is a legacy site I work on with whomever having worked on it before, I realised that there was no significant content using this font, in fact it was only in email templates (not that email does web fonts). So I ripped the little blighter out.

I added in some 'lookalike' fonts from Google in the places where the typography.com font should have been, all looked improved, everything worked.

But then we hire some new clowns to do some new theme. Obviously I am typecast as a 'backend dev' so I was not privy to whatever those conversations were. So the typography.com font is back in use! Fantastic (not)!!!

So the same process that led to the last awful frontend (get some agency that don't care about our product to project manage something to death) results in the reappearance of the same awful font technology.

That sir is how typography.com still get customers. The marketing people, the managers that have no technical skills, the print designer and some outside agency just do it even though (four months earlier) the only coder in the building speeded up the site and made it vaguely legible by getting rid of the silly typography.com junk.

I am very much a believer in design which is content first and, as Steve Jobs said, 'how it works'. I too like a good font and always inspect a page where the typography stands out as I like to be informed on font names and combinations. I am also a believer in going for AA accessibility. Obviously the typography.com font will be spidery grey text against a grey background, not accessible!

jrochkind13• 11 years ago

I tried to look into this once, and I _think_ Google's license for the free fonts, allows you to download all the font assets and serve them yourself if you want too. If you want to trade the convenience of google hosting for your own local hosting (or more likely your own CDN), to avoid tracking and have your own control of performance.

But I wasn't even completely sure I was reading Google's licenses right (and I don't have notes to track what docs I was looking at, sorry), and then other hosts like Adobe are another thing entirely.

kps• 11 years ago

All the Google-served web fonts are open source, mostly OFL or Apache licensed.

https://github.com/google/fonts

vortico• 11 years ago

I'll admit I didn't know about the HTML link preload feature. This presentation does a good job at emphasizing (but hopefully not exaggerating) its effectiveness.

However, may I suggest a completely radical alternative at optimizing your webpages? Don't just avoid Web Fonts, avoid CSS altogether. Take a look at my website. Did you notice how fast it loaded, despite not using a CDN? Of course, this is a bit tongue-in-cheek. There are many legitimate uses of styling web pages, but for websites whose purpose is simply to convey information (the main reason people were excited about the WWW in the 90's), I personally think unstyle'd, or mostly unstyled HTML is the best way to go.

usaphp2• 11 years ago

I would not want to live in a world where all websites look like yours.

pdkl955• 11 years ago

So change your User Agent so the website renders the way you like. That is the entire point of HTML; the client decides how to render the page, with the HTML (and CSS) optionally providing suggestions.

In the case of this website, the author has decided to leave the question of how to render the page almost entirely to the client,

Even in the early Netscape days the Navigator browser supported setting the default font sizes and colors. These options are still available today. If you want more control over the default rendering, you may want to submit a feature request for your browser of choice, but you may be able to simply edit the default stylesheet.

mixmastamyk2• 11 years ago

And of course, javascript just to show static content.

Needs html, body tags, but otherwise I like it.

stonogo2• 11 years ago

Which browsers fail to render html if it's missing <html> and <body> tags?

slemklump• 11 years ago

This. CSS should be left to the clients and not to the servers. Just serve a plain HTML file and let the users (or their browsers) decide what to do with it.

imaginenore• 11 years ago

Why serve HTML at all then? Serve text, it's even faster.

I bet a website with inlined CSS on a CDN is much faster than yours.

mixmastamyk2• 11 years ago

He has lots of links. It's the web as TBL intended.

vbezhenar• 11 years ago

Ha-ha. I initially spent quite a lot of time to make my website nicely styled, with fonts and JS. But then I decided that all those bells and whistles just not worth it and used pure HTML as you did. Probably I'll add just a little bit of styling anyway, but it works fine as of now. And it works fine on tablets and smartphones without any effort :)

sotojuan• 11 years ago

A little CSS goes a long way:

http://bettermotherfuckingwebsite.com

discreditable• 11 years ago

A little CSS goes a long way

But don't overdo it:

https://bestmotherfucking.website

jordanlev3• 11 years ago

People like design. People like things to not all look the same. Companies require design for their branding and marketing. To suggest that everyone's website looks the same and just be browser default styles is ignoring an enormous fact of human nature (not to mention the global economy and civilization in general).

ksec2• 11 years ago

Can we not have a way to count, the most used Javascript, and Web Front in the most popular worldwide 500 Website in one And these will always be cached by one Repository, and all browser maker will constantly check and update a same copy of cache within the users computer?

It will save lots of Request, and latency.

jordanlev3• 11 years ago

Not a bad thought. But I wonder if the "political problems" would be too much to overcome. For example, I'm sure some of those most-popular fonts require a license, and I don't know how TypeKit/fonts.com/etc would work if those weren't hosted from their own servers.

ksec2• 11 years ago

We could leave out the non-free stuff for a start. What other political problems are there?

In a perfect world, these most popular website would have their Script and Fonts in CDN and be cached already. But what we are seeing is that still lot of the same stuff used around still not being cached.

DiabloD3• 11 years ago

Prefetch is interesting, but with Google Fonts, the target URL will be unpredictable due to browser detection techniques.

ck22• 11 years ago

Too much work for 30ms speedup.

However link preload seems to be golden.

But what is preload vs prefetch?

Ah firefox will only prefetch when the browser is idle.

So we have to wait for preload support.

http://caniuse.com/#feat=link-rel-prefetch

http://caniuse.com/#feat=link-rel-prerender

http://caniuse.com/#feat=link-rel-preconnect

(doesn't work as of 10/2015) http://caniuse.com/#feat=link-rel-preload

http://www.w3.org/TR/preload/#introduction

buro9• 11 years ago

Use preconnect headers: https://www.igvita.com/2015/08/17/eliminating-roundtrips-wit...

That is all you should do, it will land in Chrome stable shortly and is already in Firefox.

ck22• 11 years ago

Maybe a year from now:

http://caniuse.com/#feat=link-rel-preconnect

jeremyw• 11 years ago

Note this is also relevant to any external dependency, re degraded performance and outright failures of third-party hosting. Apply to all vendors.

(See sibling comment about typography.com failure mode.)

captn3m0• 11 years ago

While we are discussing web fonts, I think I should point out my Chrome extension that disables Web Fonts on all websites (or tries to). Uses Request filters, and I made it because I was trying to minimise bandwidth usage on a metered EDGE connection long time back. (Opera Turbo is best for that, but Chrome is a better browser).

[0] http://github.com/captn3m0/disable-web-fonts

[1] https://chrome.google.com/webstore/detail/olmabeadgbpmhllgdk...

mmahemoff• 11 years ago

Wouldn't this break sites using icon fonts (e.g. Font Awesome)?

tedunangst• 11 years ago

Yes. You get a long series of squares (maybe with hex codes if you're lucky) instead of icons. I try to avoid using such sites when possible. (this notably includes github and twitter).

paradite• 11 years ago

Maybe one alternative is to have fonts like Font Awesome built into the browsers, although I am not sure if that is practical.

kmfrk• 11 years ago

Can you add a button in the browser for turning it on and off? :)

Thanks for the extension.

dingdingdang• 11 years ago

OK, here's the breakdown from all those slides to get parallel loading (on new browsers) and avoid FOUT (flash of unstyled text) each pageload:

http://piratepad.nl/ep/pad/view/rirCTCqTPZ/HFjj5IyqJD

kuschku2• 11 years ago

By the way, as someone who often uses mobile connections: I will skin you alive if you hide text before the fonts loaded

Seriously. FLOUT is NOT in any way bad. Stop trying to hide the unstyled text, I don't have 20 minutes to wait for your shitty webfont to load. If you do hide your unstyled text, I'll instantly leave your website again.

BillinghamJ• 11 years ago

For Safari, I made this user style sheet (set on the Advanced tab of Safari Preferences): https://gist.github.com/billinghamj/d789c0bbfe97131da04e

It disables web fonts for all uses except icons.

ivan_ah• 11 years ago

The OP mentions font loading starts as soon as a .css directive using the font is encountered, which makes me think the initial html page load could include a tiny snippet of .css with the font defs and a dummy styling instruction that use the font. The idea is to load the rest of the .css in parallel with the .woffs. Would this work?

I guess prefetch does exactly that, but wondering if the "hack" would work.

jrochkind13• 11 years ago

That seems worth pursuing. I'd want to verify that when the font is loaded this way, it's loaded async, and doesn't stop further asset loading until complete. Or else it might not be a great solution.

evmar• 11 years ago

Caveat: the slides indicate you can indicate prefetching via an HTTP header but in my local testing (and subsequent Googling) it appears that doesn't work in Chrome (perhaps it's Firefox-specific?).

Edit: found the relevant bug: https://code.google.com/p/chromium/issues/detail?id=58456

signaler• 11 years ago

There is a switch in Chromium where one can disable remote fonts entirely. Obviously not for the average user, and more of a power-user thing, but still handy:

    --disable-remote-fonts

You can find a tonne of other optimizations you can do to Chromium here: peter.sh/feed/chromium-command-line-switches

Also if you want fonts that load faster than Google Wenfonts, have a look at http://brick.im/

I use Brick on a tonne of different side projects, and there is a marked decrease in loading time. Brick uses Fastly, which is (arguably) a faster CDN than Google Webfonts and other webfont initiatives like Adobe Webfonts.

Also using Brick is another chance to ban Google from your web traffic as many are doing...Google is like a barnacle that is stuck to the web and is hard to remove entirely without them slurping some of your data

tadfisher• 11 years ago

Unfortunately, this is a Tragedy of the Commons issue, where the ever-expanding list of webfont hosts results in a detrimental experience for users, where otherwise a single popular host would result in a much higher likelihood of cache hits.

Not saying you shouldn't use the best solution for you. In fact, I ship code that hits the Hoefler & Co. webfont CDN because it's the only source for the fonts we use.

jrochkind13• 11 years ago

These seem like good techniques.

But I still don't consider reliable FOUT a victory -- it's still annoying as a reader. I'm not sure if the final slide cross this out because his design has a solution to it, or because he decides not to consider it a problem. I _think_ the latter maybe? (Slidedeck without the accompanying narrative can be hard to interpret sometimes!). If so, I disagree, reliable FOUT with otherwise quick loading may be the lesser evil in the present environment, but it's still annoying.

Web Fonts Performance

Related Stories