
Why don't websites immediately display their text these days? - laurent123456
http://superuser.com/q/547743/73619
======
DanielBMarkham
Agreed that this is a terrible nuisance.

Webmasters please: use a CDN, have a download budget, use YSlow, smarten up
how you use caching, push your scripts to end, and so forth. Nobody wants to
stare at a blank screen for 30 seconds while you're loading up all of your
bells and whistles. If you want to keep reader engagement you've got about 5
seconds from load to text appears, max. Probably a lot less than that.

And the same goes for web apps, btw. In fact, web apps are worse because
people aren't passively engaged. Your content site takes 20 seconds to load? I
bail out. Your web app takes 20 seconds to load? I'm spending the entire time
cursing you under my breath.

Anybody who delivers anything over the web should be stone cold brutal about
doing anything possible to decrease load times.

~~~
joshuacc
A lot of this can also be alleviated by being smart about using a web app's
login screen to preload resources that will be needed on subsequent screens,
as well. It's relatively simple to include a bit of JavaScript on the login
page to fetch webfonts for the rest of the app _before they are needed_.

Furthermore, if you use JS to load your webfonts, you can have the site
display in "web safe" fonts until your custom fonts are loaded.

Example:
[https://developers.google.com/webfonts/docs/webfont_loader#S...](https://developers.google.com/webfonts/docs/webfont_loader#Styles)

~~~
Groxx
IMO the websafe -> webfont transition generally looks crappy. You get a brief
window where you see the plain font, you start reading, then all the text
changes size ever-so-slightly, which moves the _entire_ page around. Jarring.
At least as bad as having a bunch of images that aren't fixed size that
reorganize the page as they load.

~~~
dredmorbius
All the more reason to use userContent.css to override site fonts. Size and
face are legible.

~~~
Groxx
Absolutely agree :) Add in a social-plugin blocker (if you're not a disable-js
person), and the internet moves like 3 times faster. Just preventing e.g.
someone's twitter feed from loading often makes the page respond a couple
seconds sooner, which is really unforgivably bad.

------
dizzystar
This stuff is seriously irritating to me as well.

The other thing that is irritating is websites that take so long to render
they freeze up my mouse and computer, rendering interaction with their website
useless for 10 seconds. It's not like I'm on an old machine either. I tend to
show my appreciation by clicking the little "x" on the tab that corresponds to
the webpage.

There really isn't any good excuse for this stuff: I've seen quite a few sites
that clearly use heavy javascript that render almost instantly. There is no
reason that a blog or simple site should take a long time to render.

There seems to be a trend of making things "awesome" with no consideration of
user-experience and usability, and frankly, the designers and programmers who
do this stuff make the good programmers look bad and ultimately hold back the
progress of the web.

And I don't use Google Fonts either because I'd rather have my fonts installed
locally.

~~~
pfisch
What OS/browser are you using? I have no idea what you are talking about. The
only time I have ever seen anything like what you are describing is when maybe
something is messed up with flash or an external pdf viewer. But even that
doesn't freeze up the mouse.

Also I am a pretty heavy browser user, I have 20+ tabs open on average and a
bunch of plugins.

~~~
dizzystar
Usually use Chrome on a Win7. I've seen this happen about once a day or every
other day. Comment got upvotes so I guess I'm not alone in this experience?

~~~
glogla
This happens to me with Chrome on Mac OS.

------
nodata
The blogger "javascript gears" loading animation from Google is even worse.

~~~
franze
the blogger "javascript gears" is one of the best examples of "javascript gone
wrong" on the internet. if you just want to display static text, use HTML. if
you want to offer functionality, use front end javascript. whenever i see
something like "use front end javascript to show non interactive text" then i
know something went terribly wrong.

------
josteink
This gets especially bad on mobile.

I can sit on a mobile connection under bad conditions, barely capable of
pushing 10kb/s. But you know what? The raw article text isn't going to be more
than those 10kb.

Anything exceeding that is fluff, and when you need to DL 5MB/s of webfonts
and god knows what to read those 10kbs, something is horribly wrong.

Good presentation is good, I don't disagree with that, but when you go down
that route, make sure that the actual _content_ gets the priority in loading
and rendering, and not fluff.

------
huhtenberg
Have you noticed how TechCrunch is a step ahead of this mess?

It shows the text quickly, but then _hides it_ only to show it again,
unchanged in few seconds. It must be a clever trick to make you get
disappointed with their web devs and to anchor your attention there, so that
you won't be as critical of their editors when you finally get to read that
blinkentext.

~~~
user-id
They probably use something like Google's WebFont Loader[1] to avoid the delay
in text visibility when using web fonts.

[1] <https://developers.google.com/webfonts/docs/webfont_loader>

------
jakobe
When web fonts came on the scene, I was enthusiastic to finally see headlines
rendered as images, or even worse, those sIFR Flash headlines, disappear.

But now people are using custom fonts even for body copy, and with this
whitespace problem, it's just as bad.

Webdesigners will always find new ways to sacrifice usability.

~~~
Volpe
custom fonts shouldn't be used for body copy?

Shouldn't technology be bending to our will? Not our will to technology?

~~~
papsosouid
>custom fonts shouldn't be used for body copy?

No.

>Shouldn't technology be bending to our will? Not our will to technology?

It has nothing to do with technology, it is about user experience. Pushing a
crappy font on me because you think it is pretty does two things. It makes you
feel good about yourself, and makes it harder for me to read your site. This
is the same narcissistic designer syndrome that gave use flash intros back in
the day.

~~~
Volpe
Erm... I think you are just not a designer yourself and don't understand the
difference custom fonts can make to the 'readability' and overall feel of a
website.

Using custom fonts for headlines and then a 'helvetica' variant to mix in on
copy only gets you so far.

I'm not a designer, nor a narcissist, but I've seen body copy fonts used well.

------
Osiris
I thought web browsers were supposed to use a built-in font until the web font
resource(s) were finished loading?

When I use Opera, the pages render and then a second or so later, the font
faces change. It's a little jarring, I admit, but at least the text is
rendered.

~~~
icebraining
It was my impression too. According to one of the comments on SuperUser,
Webkit based browsers like Chrome don't show any text until the font is
loaded.

~~~
cheald
Correct; Chrome doesn't do it to prevent the FOUS (Flash of Unstyled Content)
that so many designers toiled so hard with Javascript hacks to work around.

There are several things you can do with varying degrees of effectiveness:

1) data-uri encode your fonts and shove them into your CSS files directly. By
the time your CSS shows up, your fonts are loaded. Downside is that your CSS
grows substantially as a result.

2) Use a CDN (ideally a grown-up CDN that does geo-targeted delivery) and get
your fonts downloading to the client ASAP by declaring them as early as
possible. Use aggressive caching headers.

3) In all cases, consider using font subsetting to reduce the size of the font
package you have to deliver.

4) In all cases, be aware of how browsers load fonts, to ensure that you don't
have to end up downloading, say, a massive .ttf file just to throw it away end
up downloading a .eot file that is a quarter the size.

~~~
Dylan16807
Hahahaha oh god give me a few minutes to stop laughing. The designers are so
stick-in-the-mud about everything being perfect that they make the site
invisible until everything is loaded, and then the user gets to stare at a
blank page for 20 seconds, and it's not an accident, there's even a term for
the situation.

~~~
j_s
jakobe said it best above ( <http://news.ycombinator.com/item?id=5181226> ):

    
    
      > Webdesigners will always find new ways to sacrifice usability.
    

I even see some of them defending the practice in this discussion... 'f the
users -- it looks good/strong branding/etc.'

~~~
Dylan16807
While I agree with the quoted part, custom fonts aren't necessarily
problematic. But you have to make sure it renders well and doesn't delay the
page.

~~~
j_s
I too am all for nice web design that puts the user first. It's definitely
possible and positive for the web; it just takes (sometimes a lot of) extra
work and people are too lazy to test everything.

------
RoryH
I'm a web developer that implementes designs given to me. Most often in modern
times they include custom fonts. I always just ignore this and go with the
closest system-available equivalent font.

Reasons: \- Delayed rendering of text (as per OP's link) \- adds a
considerable extra payload to download before the page is rendered. \- UX and
responsiveness on a site is way more important than the first impression of a
nice font IMO. Yes, I agree fonts can help readability, but the standard fonts
are not that bad.

~~~
infinity
>fonts can help readability

Yes, this is true. But it seems that many custom fonts are not designed for
being rendered in a browser.

Recently, I have seen pages using fonts which look blurred, fuzzy or have a
weird shape. These fonts are used for the main content (copy text). There must
be people who notice that this is hard to read, but nobody seems to say
anything. Some days ago I was told that "it looks expensive".

I am also affected by occasional browser and OS freezing due to webfonts. The
freezing may last for an eternity (subjective) and is accompanied by an
intense feeling that I have lost control. A user experience can't be worse.

~~~
crucialfelix
Often times there is a modern web friendly replacement. I've got an idiot
designer who specified Grotseque MT designed in 1926. It breaks up, doesn't
scale well over pixels. Even the photoshop mockups looked jittery. I've
swapped it for Adelle Sans. He wouldn't even have noticed, they are close
enough.

------
rcyrus2013
The text is hidden on purpose by the frontend programmer because he wants to
avoid a phenomenon called "Flash Of Unstyled Text"(FOUT) that happens with
embedded fonts (@font-face). For more info:
<http://paulirish.com/2009/fighting-the-font-face-fout/>

~~~
bdash
That is incorrect. As the article you link to states:

> Webkit takes a very different approach, and very intentionally. They believe
> it's better to keep the text invisible until the font is ready. This way,
> there is no moment where the text flashes into its newly upgraded self.

Google Chrome, the subject of the original linked post, is built in WebKit and
thus inherits this behavior.

~~~
StavrosK
> That is incorrect.

It looks correct to me, you're both saying the same thing. It's not the
_site's_ frontend developer, it's the _browser's_ , but it's for the same
reason.

------
ck2
It's funny that example site doesn't use one single built-in font

I can understand the desire for a nice menu or heading font but the whole
website?

Here's that page:

<http://portableapps.com/apps/development/notepadpp_portable>

Looks like it uses Ubuntu font-face for everything. It's a nice font but Arial
would have been fine too.

Also looks like the font is hosted on a third party site googleusercontent.com
so I guess they are hoping you've cached it before.

~~~
pbhjpbhj
The font files aren't that big either, and as you note are using
googleapis.com.

The page is 600k and the fonts are ~160k; primed cache page-weight though is
~6k.

I wonder if the use of Ubuntu font really makes any difference to their users,
A-B test would be interesting.

As Ubuntu is free wouldn't it be useful if the browser offered to install the
font locally?

~~~
sgdesign
Having a strong brand is not something you can measure via A/B testing, it's a
long-term commitment.

~~~
pbhjpbhj
Yes.

This wasn't clear.

> _I wonder if the use of Ubuntu font really makes any difference to their
> users_ //

What I meant was I wondered if using Ubuntu had any negative effect.
Personally I think it adds to the site but then I've Ubuntu font installed.

------
jvzr
It is extremely difficult to deal with this issue on the developer's side.

My solution has been to embed the font in the format the most commonly used
directly into the CSS. Then I Gzip it and put it on a CDN. My blog now loads
under 200ms almost anywhere, and there is no flash of unstyled text.

But I realize achieving those load times may be hard for a heavy web
application/site.

~~~
cousin_it
"Give thanks to nature, the bountiful, because it has made necessary things
easy to procure, while things hard to obtain are not necessary."

\-- Epicurus

~~~
huhtenberg
Arguably, things are promoted to being necessary _if_ they are easy to
procure. Otherwise they remain optional.

\-- V.Pupkin :)

~~~
cousin_it
Wow, from an evolutionary point of view that actually makes sense.

~~~
sp332
More like: if you require rare things, you are less likely to live long enough
to reproduce.

------
cantlin
To everyone saying CSS3 webfonts are anathema to good sense and usability:

As engineers, we're sensitized to performance implications[0]; the added value
of not using Arial is a more difficult thing to quantify. Many businesses
perceive that value to be significant - behaving as if it doesn't exist isn't
useful or pragmatic.

Still, on mobile you'd have to be completely insane to incur download time and
latency x2 for the CSS and font files before showing any text. If you need it
that badly, take the hit and force a FOUC ("flash" in this case a misnomer).
When reading HN on the go I frequently wish CSS had never been invented.

Most desktop sites though can happily get away with a bit of bling type. I'd
wager no one would notice if they were more careful with what they show prior
to the font loading (hiding the bullets from lists, for example). In the
battle between web performance and web functionality, the onus is as always on
making intelligent conscious choices that represent the right tradeoffs for
your objectives.

[0] [http://at.cantl.in/nerd-stuff/2012/11/29/fast-page-
start.htm...](http://at.cantl.in/nerd-stuff/2012/11/29/fast-page-start.html)

------
lutusp
Yes, that's on my list too, but the top of my annoyance list are sites that
play an advertisement (audio and/or video) that can't be disabled. The
advertisement always starts before any useful content appears.

------
jevin
There is actually a very simple solution for this : use the Javascript include
method and place the code at the end of the body tag.

This is what happens technically : The CSS will get loaded, and the custom
font will not be found. The browser will then use the fallback font. As the
rest of the page gets loaded, so will the Javascript function. This will
download and include the custom font, therefore changing the fallback font to
the custom font.

The change of font may be quite disturbing, but hey at least people with
slower connections can read meanwhile.

------
yk
Is there a way to block such annoyances? Something like NoScript for CSS ( or
actually for third party connections? Since the problem is not actually CSS
but slow font/ad/whatever servers.)

~~~
J_Darnley
RequestPolicy for Firefox blocks all requests to other domains. I sometimes
think it should do sub-domains too. When you use this you will see just how
many assets websites load from or place elsewhere.

~~~
chokma
Indeed, RequestPolicy, AdBlock+ and NoScript are the essential default
plugins, both from a security and usability perspective.

But sometimes the content will not load at all, because to show an article's
text, the page uses Google's ajax, webfonts, a cdn, and the blog's master site
@ wordpress.com or blogger.com etc. In that case, the content has to be really
interesting for me to allow all those third-party connections.

~~~
kibwen
I adore RequestPolicy in principle, but after a year I just couldn't take it
anymore. NoScript was better, it took me five years until I was fed up with
constantly whitelisting every new site I visited and playing guess-which-
sites-are-essential roulette.

I really, really wish there existed versions of RequestPolicy and NoScript
with large and comprehensive default whitelists. Until that day, Ghostery is
all that I have the patience to put up with.

------
unabridged
horrible bloated javascript frameworks. if your page is not interactive, it
should be done in just css. if you are loading 5 js files just to display a
couple paragraphs of text, there is a problem.

~~~
chestnut-tree
I completely agree. Google's Blogger service is one of the worst offenders.
I've been to so many blogspot.co.uk sites where absolutely nothing loads if
Javascript is disabled. Once you enable Javascript, often a page of text with
no visible interactivity loads. Or the interactive elements are for the
sidebar widgets, not the content of the page.

Javascript is simply being ridicuously overused and few people seem to call
out for it to stop.

------
olegp
I ran into this issue as well when working on <https://starthq.com>

The font file is loaded the first time any text using the font is displayed
and I am using Font Awesome for the icons which are only visible when
selecting a drop down menu. As a result there was a very annoying flicker the
first time the menu was displayed.

The somewhat hackish solution was to include one of the icons that uses the
font as part of the logo in the upper left of the page, which is rendered on
initial page load.

~~~
Trezoid
An equally hackish alternative would be to have a floated div way off screen
using the font to force loading (works for image carousel pre-loading too, but
with a pretty obvious load time hit)

------
dobbsbob
I've always wondered why it takes forever to load most pages. Im running
debian on SSD with 32G ram and a video card that can handle anything yet
Iceweasel, reg FF and Chrome all take forever to load pages like I'm using
1990s internets. Blocking all java scripts and tweaking the guts of FF to load
faster still results in Netscape navigator 33.6kps speed to render text.

------
est
Anyone remember that in old IE days, you have to mouseover to see the image
loading on buttons?

~~~
angry-hacker
You were still able to preoload them before even in "old IE days", it was just
a bad practice :)

------
CodeMage
Why? Because they're too busy deciding what ads to serve you. _ba dum-bump
tish!_

~~~
Florin_Andrei
It certainly looks that way from the user's perspective. You're sitting there,
waiting for the actual text to load, yet the ads are already blinking and
jumping all over the place.

An all too common experience.

------
slurgfest
What's REALLY annoying is websites where lots of layout has loaded, and no
text (or only some of the text) shows pending a font load which could take
seconds. This doesn't look "fast," it looks janky.

~~~
cantlin
Most people would consider this a significant performance improvement on
"nothing shows up for several seconds".

------
thibauts
tl;dr web fonts

