Web Fonts Performance(speakerdeck.com)
speakerdeck.com
Web Fonts Performance
https://speakerdeck.com/bramstein/web-fonts-performance
15 comments
Wouldn't this break sites using icon fonts (e.g. Font Awesome)?
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).
Maybe one alternative is to have fonts like Font Awesome built into the browsers, although I am not sure if that is practical.
I liked this comment [1] from earlier: Use ligatures. That way, a meaningful text could be displyed when the font is not loaded, but fuses into a symbol with the appropriate font.
[1] https://news.ycombinator.com/item?id=10326630
[1] https://news.ycombinator.com/item?id=10326630
Or that you download the font once, manually, and install it.
Can you add a button in the browser for turning it on and off? :)
Thanks for the extension.
Thanks for the extension.
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.
That is all you should do, it will land in Chrome stable shortly and is already in Firefox.
Maybe a year from now:
http://caniuse.com/#feat=link-rel-preconnect
http://caniuse.com/#feat=link-rel-preconnect
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:
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
--disable-remote-fonts
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
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.
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.
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.
I guess prefetch does exactly that, but wondering if the "hack" would work.
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.
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
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
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.
It will save lots of Request, and latency.
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.
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.
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.
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
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
> 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...
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...
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.
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.
Speaking of readability, I cannot stand these 200 weight thin fonts that only look good on a "retina" device places choose to use sometimes
I also have the same feeling that thin fonts look ugly on my humble LCD screen with dismal resolution and low ppi.
I was once complaining to a friend how ugly site X is and he said it looked right to him; later when I saw his machine it has a nice display that made site X look twice as better on my shitty display.
Lots of sites are designed on (and for?) high density displays and it ends up looking awful on low resolution screens like mine.
I was once complaining to a friend how ugly site X is and he said it looked right to him; later when I saw his machine it has a nice display that made site X look twice as better on my shitty display.
Lots of sites are designed on (and for?) high density displays and it ends up looking awful on low resolution screens like mine.
It's baffling for me that designers/coders don't realize that desktop and laptop display panels are probably the first thing a manufacturer will look at when it comes to cutting some corners and lowering the overall price of the product.
Also most 'normal' users will never pay the x4-x10 premium price for some fancy IPS display and calibrate its colors.
Also most 'normal' users will never pay the x4-x10 premium price for some fancy IPS display and calibrate its colors.
Personally I really like extra light fonts, I find them much more readable.
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.
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.
All the Google-served web fonts are open source, mostly OFL or Apache licensed.
https://github.com/google/fonts
https://github.com/google/fonts
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?
Did they budget for those 2 seconds extra load time while they set up the new design?
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!
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!
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.
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.
A little CSS goes a long way:
http://bettermotherfuckingwebsite.com
http://bettermotherfuckingwebsite.com
> A little CSS goes a long way
But don't overdo it:
https://bestmotherfucking.website
But don't overdo it:
https://bestmotherfucking.website
I would not want to live in a world where all websites look like yours.
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.
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.
> So change your User Agent so the website renders the way you like
So if I visit 100 different websites daily, and most of them are the ones I've never seen before - I will have to spend half of my life just writing stylesheets for each of them? No, thanks, It's not a world I want to live in...
So if I visit 100 different websites daily, and most of them are the ones I've never seen before - I will have to spend half of my life just writing stylesheets for each of them? No, thanks, It's not a world I want to live in...
Ok, do you seriously not understand what it means to be the default stylesheet? Have you ever actually changed the font setting in the browser?
I didn't say anything about writing custom stylesheet for a particular website. I said you should change your user agent so it renders html in the style you want. You do this ONCE.
I didn't say anything about writing custom stylesheet for a particular website. I said you should change your user agent so it renders html in the style you want. You do this ONCE.
Ok, do you seriously not understand what it means to not want every website you come across to look the same? (Even if it's the same of your own choosing).
Design, fashion, and art aside... how can 1 design or style even work for the entire range of websites and web apps? UX is important, and must be different depending on the goals of the site.
Design, fashion, and art aside... how can 1 design or style even work for the entire range of websites and web apps? UX is important, and must be different depending on the goals of the site.
> Ok, do you seriously not understand what it means to not want every website you come across to look the same?
Yes. Does you get annoyed that most books have the same formatting - a style you didn't get to choose? My mother absolutely loves her kindle, because it let her do exactly what I'm talking about and apply a font that she can actually read to all books.
> how can 1 design or style even work for the entire range of websites and web apps?
Of course not. That's why HTML let you specify styling to override the default stylesheet in the cases when it is important.
More importantly, I never said anything about not styling your pages, nor did I claim one style should apply to ll pages on the internet. I replied to a post complaining about the DEFAULT STYLE. I suggested that it is the responsibility of the client to render that style as they like.
How, exactly, does this get in the way of your ability to apply formatting?
Yes. Does you get annoyed that most books have the same formatting - a style you didn't get to choose? My mother absolutely loves her kindle, because it let her do exactly what I'm talking about and apply a font that she can actually read to all books.
> how can 1 design or style even work for the entire range of websites and web apps?
Of course not. That's why HTML let you specify styling to override the default stylesheet in the cases when it is important.
More importantly, I never said anything about not styling your pages, nor did I claim one style should apply to ll pages on the internet. I replied to a post complaining about the DEFAULT STYLE. I suggested that it is the responsibility of the client to render that style as they like.
How, exactly, does this get in the way of your ability to apply formatting?
> These options are still available today.
Not like they used to make them though, at least not out of the box :(
http://www.opera.com/docs/usercss/
http://slashdot.org/story/02/12/18/1328245/opera-gives-that-...
In Firefox, I see options to change font sizes and colors, but nothing to select a default stylesheet. I know it's bound to be in about:config, but it might as well not exist then. Opera had it right there in the "view" menu, changing between author and user mode took two clicks, selecting a user stylesheet took three, while it takes me four clicks in FF to realize it doesn't even have that option, and mere common sense to not even bother checking in Chrome. Progress!
Not like they used to make them though, at least not out of the box :(
http://www.opera.com/docs/usercss/
http://slashdot.org/story/02/12/18/1328245/opera-gives-that-...
In Firefox, I see options to change font sizes and colors, but nothing to select a default stylesheet. I know it's bound to be in about:config, but it might as well not exist then. Opera had it right there in the "view" menu, changing between author and user mode took two clicks, selecting a user stylesheet took three, while it takes me four clicks in FF to realize it doesn't even have that option, and mere common sense to not even bother checking in Chrome. Progress!
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 :)
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.
I bet a website with inlined CSS on a CDN is much faster than yours.
He has lots of links. It's the web as TBL intended.
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).
And of course, javascript just to show static content.
Needs html, body tags, but otherwise I like it.
Needs html, body tags, but otherwise I like it.
Which browsers fail to render html if it's missing <html> and <body> tags?
The existence of Quirks Mode is not an excuse to write sloppy markup.
a) "The Google Style Guide for HTML recommends omitting all optional tags. That includes <html>, <head>, <body>, <p> and <li>" https://google.github.io/styleguide/htmlcssguide.xml#Optiona...
b) HTML5 spec: A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
b) HTML5 spec: A body element's start tag may be omitted if the element is empty, or if the first thing inside the body element is not a space character or a comment, except if the first thing inside the body element is a meta, link, script, style, or template element.
> Google Style Guide
Who cares what google thinks. They are not the w3c.
> HTML5 spec
It's not an HTML5 document.
https://validator.w3.org/check?uri=http%3A%2F%2Fandrewbelt.n...
Even if you want to ignore the required <!DOCTYPE html>, the document is still missing the required <head> with exactly one <title> element.
Who cares what google thinks. They are not the w3c.
> HTML5 spec
It's not an HTML5 document.
https://validator.w3.org/check?uri=http%3A%2F%2Fandrewbelt.n...
Even if you want to ignore the required <!DOCTYPE html>, the document is still missing the required <head> with exactly one <title> element.
>Who cares what google thinks.
90% of the web?
>They are not the w3c.
W3C? What's this 1999? It's all about the HTML5 group now.
90% of the web?
>They are not the w3c.
W3C? What's this 1999? It's all about the HTML5 group now.
This is not an exercise in moral justification. I'm asking if there are any browsers that fail to render documents without <html> and <body> tags. Do you have an actual answer?
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.
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.
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.
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.
It disables web fonts for all uses except icons.
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
Edit: found the relevant bug: https://code.google.com/p/chromium/issues/detail?id=58456
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
http://piratepad.nl/ep/pad/view/rirCTCqTPZ/HFjj5IyqJD
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.
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.
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.)
(See sibling comment about typography.com failure mode.)
Prefetch is interesting, but with Google Fonts, the target URL will be unpredictable due to browser detection techniques.
[0]: http://github.com/captn3m0/disable-web-fonts
[1]: https://chrome.google.com/webstore/detail/olmabeadgbpmhllgdk...