10 ms·

Why don't websites immediately display their text these days?

235 points by laurent123456 14y ago

olegp 14y ago
I ran into this issue as well when working on https://starthq.com 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 14y ago
  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)
dizzystar 14y ago
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 14y ago
  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.
  - wiradikusuma 14y ago
    I also experience that randomly, using Chrome on Win7 and Snow Leopard. The freezing can be up to 30sec that I sometimes think my system hangs.
    - Shish2k 14y ago
      If a web page can freeze your whole OS, I'd think there's something wrong with your OS...
  - dizzystar 14y ago
    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?
    - deanclatworthy 14y ago
      This doesn't happen to me either. Same environment. Unless your can provide a reproducible test-case your comment is baseless.
    - glogla 14y ago
      This happens to me with Chrome on Mac OS.
  - pfisch 14y ago
    I use firefox and chrome. Does this also happen to anyone using ff?
    - 14y ago
- snogglethorpe 14y ago
  The main reason I ever see this sort of thing is because my (modest, but not crazily slow) machine doesn't have enough memory—it only has 1GB, which definitely isn't enough for multiple tabs with typical bloated websites these days. If I've got gmail, youtube, and a few other tabs open, my machine will happily thrash it's little disk-drive out to accomodate them.... >< [This is especially true if you're using chrome, which tends to use more memory per tab than other browsers because of its process-per-tab architecture (which is nice because of the isolation and controllability it gives, but it does make it more difficult to share memory between tabs).] If I were in charge (I'm not because it's a work machine), the first thing I'd do is buy more memory.
  - dizzystar 14y ago
    I'm running an i5 w/ 6 Gig of RAM. I'm pretty obsessed with keeping my machine clean as well, so I'm not entirely sure if it is the slow machine, but idk really.
- fauigerzigerk 14y ago
  It's all about monetization. If you look at the source of a typical media website you'll see that most of what gets downloaded and most of the JavaScript executed on page load is adverts, social crap and analytics stuff. It's just how we pay for those services.
  - pavs 14y ago
    Nowadays most major analytics and ads are served asynchronously.
    - cheald 14y ago
      The hitching frequently happens because adding iframes to a document is damned expensive, and requires the browser to concoct a whole new DOM per iframe. While analytics don't tend to make heavy use of iframes, advertisements absolutely do.
    - fauigerzigerk 14y ago
      Yes, but that doesn't help much against the JavaScriptional (and rendering) bout of hyperactivity that that ensues shortly after the first HTTP response and later on while using the site. The complexity of embedding all that stuff is enormous. Just block it all for a day and see what that does to the perceived speed of the site.
      - pavs 14y ago
        I have found the biggest culprits are the social widgets and fancy js library. Ads and analytics rarely slows down a site (for me). There are exception though like few days ago I bumper in to a site that had 6 different analytics. That's just crazy, also outside widgets can load their own analytics (I think disqus does that). Things can quickly turn dirty.
    - pbhjpbhj 14y ago
      I was working on a page the other day for optimisation - 97/100 score now. The main issues that remain are to do with FB, Google - serve images from a consistent domain, - leverage browser caching, - minify javascript (that's a Google problem, I mean, really?!), - ga.js and plusone causing reflows - script serialisation Doesn't appear there's much to be done about these from an end user perspective but they're not major slow downs as the page is well above the median load speed for similar pages.
- anoncow 14y ago
  Google apps locks up frequently on my atom netbook.
- mattmanser 14y ago
  You're a programmer, surely you must realize this is a Chrome bug? Not specific web page bug? Personally it affects one of my PC's but not the other. I've tried to fix it a couple of times but because it's very infrequent it's hard to test a fix. Google 'Chrome Freeze' to see the frequency with which this happens. This isn't being caused by web pages, it's a bug in Chrome that they can't seem to fix. It used to be caused by having two versions of Flash installed, but who knows what it is now. It gets worse/better over time.
  - dizzystar 14y ago
    You'll thank your lucky stars with the knowledge that I am not a professional programmer and I'm definitely not a front-end or much of a web programmer. Besides, there are others page down who seem to experience this problem, presumably some of them are programmers who aren't aware of this bug? With this information, I am now more mystified at why some sites get burned by this bug while others do not, and, at least with your logic, why a programmer wouldn't be well aware of this bug; if they are, why aren't they exploring options and why aren't these programmers testing their functionality on Chrome (all browsers). Surely, these sites run slow on FF as well even if there is no freezing up like I am describing?
    - rapind 14y ago
      With Chrome I find that all the slow downs / freezes I've noticed have been while flash is running in one or more of my tabs. Flash + Chrome just doesn't seem to be a great combination. BTW, you can disable flash in chrome by going to: chrome:plugins
    - mattmanser 14y ago
      Ah ok, I totally misread your profile. Those sites won't freeze at all in FF. It's something going wrong in the way Chrome calls Flash or something.
  - mindcrime 14y ago
    No, there are plenty of JS heavy pages that can all but bring Firefox to its knees as well, and - if the machine is heavily loaded already - basically freeze the entire machine. I surf using both Chrome and Firefox at different times on different boxes, and I see this behaviour across both.
- Al-Khwarizmi 14y ago
  This happens to me sometimes in Opera, Chrome and Firefox, and it's extremely irritating. I remember the good old days when dual-core processors were just starting to become mainstream, and browsers would just use one core. The browser could crash all it liked, but the system would always be responsive. But now browsers take advantage of all cores, meaning that if they crash, they can block your entire system. I wish there was a way of telling the browser to strictly use only K cores on Windows. I'd instantly switch to a browser offering that feature.
  - ashray 14y ago
    Not a windows user here but I remember that you can do something like this using Task Manager. Just right click on the process and see if you can set the CPU affinity or something similar for your browser.
    - philbarr 14y ago
      Fantastic tip, thanks! Right click the process and "Set Affinity..."
- Mahn 14y ago
  Are you sure it's not just flash (from e.g. ads) acting up? On my win7 laptop the only time I saw pages freeze was due to a plugin conflict where somehow flash managed to install itself twice as a plugin; disabling one of these would usually fix it. Or, you know, just try disabling flash altogether and see if there's a difference.
rcyrus2013 14y ago
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/ http://paulirish.com/2009/fighting-the-font-face-fout/
- bdash 14y ago
  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 14y ago
    > 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 14y ago
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 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 14y ago
  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 14y ago
    Having a strong brand is not something you can measure via A/B testing, it's a long-term commitment.
    - pbhjpbhj 14y ago
      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.
- bhaak 14y ago
  On this system (Win 7, 8 GB RAM) with Firefox 18.0.2 I see that missing text effect even on reload. In Firebug that Google returns a 304 for the Ubuntu font files but the browser is requesting the only about 3 s into loading the page. Really irritating. After installing the font locally, it's gone.
est 14y ago
Anyone remember that in old IE days, you have to mouseover to see the image loading on buttons?
- angry-hacker 14y ago
  You were still able to preoload them before even in "old IE days", it was just a bad practice :)
lutusp 14y ago
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.
RoryH 14y ago
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 14y ago
  >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.
  - bjustin 14y ago
    It could be that the fonts you saw render better on one platform or another. Windows and OS X render text differently enough that it happens sometimes.
  - crucialfelix 14y ago
    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.
Osiris 14y ago
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 14y ago
  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 14y ago
    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 14y ago
      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.
      - cheald 14y ago
DanielBMarkham 14y ago
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.
- pbhjpbhj 14y ago
  It's not only reader engagement (and of course bounce rate which overlaps somewhat) but page speed is a factor in SEO nowadays too: so it's reader acquisition as well.
- joshuacc 14y ago
  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#Styles https://developers.google.com/webfonts/docs/webfont_loader#S...
  - TazeTSchnitzel 14y ago
    That's a really handy little trick, thanks!
  - Groxx 14y ago
    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.
jvzr 14y ago
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 14y ago
  "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 14y ago
    Arguably, things are promoted to being necessary if they are easy to procure. Otherwise they remain optional. -- V.Pupkin :)
    - cousin_it 14y ago
      Wow, from an evolutionary point of view that actually makes sense.
      - sp332 14y ago
        More like: if you require rare things, you are less likely to live long enough to reproduce.
- bjustin 14y ago
  How fast does it load on a cellular connection in the country it is hosted? It would be great if it loaded in <200ms on fast cell networks.
  - jvzr 14y ago
    I'll try that tonight when I have access to my Mac (remote-debugging with dev tools). Until then, I can tell you approximately that the DNS shakeup takes 5 seconds, the server/CDN shakeup takes 1 more and the loading/painting is near-instantaneous. Will post solid numbers tonight.
jakobe 14y ago
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 14y ago
  custom fonts shouldn't be used for body copy? Shouldn't technology be bending to our will? Not our will to technology?
  - cheald 14y ago
    Not currently. Many custom fonts look atrocious in the 10-14pt range in Chrome on Windows due to aliasing issues, and that's such a large slice of any particular market that you can't really do that. It would be nice to get that sorted out, but for the time being, you have to be very careful about your body fonts.
  - papsosouid 14y ago
    >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 14y ago
      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.
deleted 14y ago
[deleted]
nodata 14y ago
The blogger "javascript gears" loading animation from Google is even worse.
- franze 14y ago
  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.
yk 14y ago
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.)
- StavrosK 14y ago
  Ghostery blocks everything third-party, CSS or JS.
- J_Darnley 14y ago
  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 14y ago
    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.
    - J_Darnley 14y ago
      Yes. If a website won't even show basic page text without allowing various things I will leave immediately.
    - kibwen 14y ago
      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.
huhtenberg 14y ago
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 14y ago
  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 https://developers.google.com/webfonts/docs/webfont_loader
- sanat 14y ago
  That's not entirely true - this is what I had to see during the wait http://i.imgur.com/8NVrkLZ.png?1 http://i.imgur.com/8NVrkLZ.png?1
CodeMage 14y ago
Why? Because they're too busy deciding what ads to serve you. ba dum-bump tish!
- Florin_Andrei 14y ago
  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.
thibauts 14y ago
tl;dr web fonts
josteink 14y ago
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.
slurgfest 14y ago
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 14y ago
  Most people would consider this a significant performance improvement on "nothing shows up for several seconds".
cantlin 14y ago
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.html http://at.cantl.in/nerd-stuff/2012/11/29/fast-page-start.htm...
unabridged 14y ago
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 14y ago
  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.
dobbsbob 14y ago
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.
jevin 14y ago
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.

235 points by laurent123456 14y ago

olegp 14y ago

I ran into this issue as well when working on https://starthq.com 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 14y ago
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)

dizzystar 14y ago

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 14y ago
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.
- wiradikusuma 14y ago
  I also experience that randomly, using Chrome on Win7 and Snow Leopard. The freezing can be up to 30sec that I sometimes think my system hangs.
  - Shish2k 14y ago
    If a web page can freeze your whole OS, I'd think there's something wrong with your OS...
- dizzystar 14y ago
  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?
  - deanclatworthy 14y ago
    This doesn't happen to me either. Same environment. Unless your can provide a reproducible test-case your comment is baseless.
  - glogla 14y ago
    This happens to me with Chrome on Mac OS.
- pfisch 14y ago
  I use firefox and chrome. Does this also happen to anyone using ff?
  - 14y ago
snogglethorpe 14y ago
The main reason I ever see this sort of thing is because my (modest, but not crazily slow) machine doesn't have enough memory—it only has 1GB, which definitely isn't enough for multiple tabs with typical bloated websites these days. If I've got gmail, youtube, and a few other tabs open, my machine will happily thrash it's little disk-drive out to accomodate them.... >< [This is especially true if you're using chrome, which tends to use more memory per tab than other browsers because of its process-per-tab architecture (which is nice because of the isolation and controllability it gives, but it does make it more difficult to share memory between tabs).] If I were in charge (I'm not because it's a work machine), the first thing I'd do is buy more memory.
- dizzystar 14y ago
  I'm running an i5 w/ 6 Gig of RAM. I'm pretty obsessed with keeping my machine clean as well, so I'm not entirely sure if it is the slow machine, but idk really.
fauigerzigerk 14y ago
It's all about monetization. If you look at the source of a typical media website you'll see that most of what gets downloaded and most of the JavaScript executed on page load is adverts, social crap and analytics stuff. It's just how we pay for those services.
- pavs 14y ago
  Nowadays most major analytics and ads are served asynchronously.
  - cheald 14y ago
    The hitching frequently happens because adding iframes to a document is damned expensive, and requires the browser to concoct a whole new DOM per iframe. While analytics don't tend to make heavy use of iframes, advertisements absolutely do.
  - fauigerzigerk 14y ago
    Yes, but that doesn't help much against the JavaScriptional (and rendering) bout of hyperactivity that that ensues shortly after the first HTTP response and later on while using the site. The complexity of embedding all that stuff is enormous. Just block it all for a day and see what that does to the perceived speed of the site.
    - pavs 14y ago
      I have found the biggest culprits are the social widgets and fancy js library. Ads and analytics rarely slows down a site (for me). There are exception though like few days ago I bumper in to a site that had 6 different analytics. That's just crazy, also outside widgets can load their own analytics (I think disqus does that). Things can quickly turn dirty.
  - pbhjpbhj 14y ago
    I was working on a page the other day for optimisation - 97/100 score now. The main issues that remain are to do with FB, Google - serve images from a consistent domain, - leverage browser caching, - minify javascript (that's a Google problem, I mean, really?!), - ga.js and plusone causing reflows - script serialisation Doesn't appear there's much to be done about these from an end user perspective but they're not major slow downs as the page is well above the median load speed for similar pages.
anoncow 14y ago
Google apps locks up frequently on my atom netbook.
mattmanser 14y ago
You're a programmer, surely you must realize this is a Chrome bug? Not specific web page bug? Personally it affects one of my PC's but not the other. I've tried to fix it a couple of times but because it's very infrequent it's hard to test a fix. Google 'Chrome Freeze' to see the frequency with which this happens. This isn't being caused by web pages, it's a bug in Chrome that they can't seem to fix. It used to be caused by having two versions of Flash installed, but who knows what it is now. It gets worse/better over time.
- dizzystar 14y ago
  You'll thank your lucky stars with the knowledge that I am not a professional programmer and I'm definitely not a front-end or much of a web programmer. Besides, there are others page down who seem to experience this problem, presumably some of them are programmers who aren't aware of this bug? With this information, I am now more mystified at why some sites get burned by this bug while others do not, and, at least with your logic, why a programmer wouldn't be well aware of this bug; if they are, why aren't they exploring options and why aren't these programmers testing their functionality on Chrome (all browsers). Surely, these sites run slow on FF as well even if there is no freezing up like I am describing?
  - rapind 14y ago
    With Chrome I find that all the slow downs / freezes I've noticed have been while flash is running in one or more of my tabs. Flash + Chrome just doesn't seem to be a great combination. BTW, you can disable flash in chrome by going to: chrome:plugins
  - mattmanser 14y ago
    Ah ok, I totally misread your profile. Those sites won't freeze at all in FF. It's something going wrong in the way Chrome calls Flash or something.
- mindcrime 14y ago
  No, there are plenty of JS heavy pages that can all but bring Firefox to its knees as well, and - if the machine is heavily loaded already - basically freeze the entire machine. I surf using both Chrome and Firefox at different times on different boxes, and I see this behaviour across both.
Al-Khwarizmi 14y ago
This happens to me sometimes in Opera, Chrome and Firefox, and it's extremely irritating. I remember the good old days when dual-core processors were just starting to become mainstream, and browsers would just use one core. The browser could crash all it liked, but the system would always be responsive. But now browsers take advantage of all cores, meaning that if they crash, they can block your entire system. I wish there was a way of telling the browser to strictly use only K cores on Windows. I'd instantly switch to a browser offering that feature.
- ashray 14y ago
  Not a windows user here but I remember that you can do something like this using Task Manager. Just right click on the process and see if you can set the CPU affinity or something similar for your browser.
  - philbarr 14y ago
    Fantastic tip, thanks! Right click the process and "Set Affinity..."
Mahn 14y ago
Are you sure it's not just flash (from e.g. ads) acting up? On my win7 laptop the only time I saw pages freeze was due to a plugin conflict where somehow flash managed to install itself twice as a plugin; disabling one of these would usually fix it. Or, you know, just try disabling flash altogether and see if there's a difference.

rcyrus2013 14y ago

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/ http://paulirish.com/2009/fighting-the-font-face-fout/

bdash 14y ago
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 14y ago
  > 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 14y ago

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 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 14y ago
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 14y ago
  Having a strong brand is not something you can measure via A/B testing, it's a long-term commitment.
  - pbhjpbhj 14y ago
    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.
bhaak 14y ago
On this system (Win 7, 8 GB RAM) with Firefox 18.0.2 I see that missing text effect even on reload. In Firebug that Google returns a 304 for the Ubuntu font files but the browser is requesting the only about 3 s into loading the page. Really irritating. After installing the font locally, it's gone.

est 14y ago

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

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

lutusp 14y ago

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.

RoryH 14y ago

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 14y ago
>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.
- bjustin 14y ago
  It could be that the fonts you saw render better on one platform or another. Windows and OS X render text differently enough that it happens sometimes.
- crucialfelix 14y ago
  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.

Osiris 14y ago

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 14y ago
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 14y ago
  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 14y ago
    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.
    - cheald 14y ago

DanielBMarkham 14y ago

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.

pbhjpbhj 14y ago
It's not only reader engagement (and of course bounce rate which overlaps somewhat) but page speed is a factor in SEO nowadays too: so it's reader acquisition as well.
joshuacc 14y ago
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#Styles https://developers.google.com/webfonts/docs/webfont_loader#S...
- TazeTSchnitzel 14y ago
  That's a really handy little trick, thanks!
- Groxx 14y ago
  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.

jvzr 14y ago

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 14y ago
"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 14y ago
  Arguably, things are promoted to being necessary if they are easy to procure. Otherwise they remain optional. -- V.Pupkin :)
  - cousin_it 14y ago
    Wow, from an evolutionary point of view that actually makes sense.
    - sp332 14y ago
      More like: if you require rare things, you are less likely to live long enough to reproduce.
bjustin 14y ago
How fast does it load on a cellular connection in the country it is hosted? It would be great if it loaded in <200ms on fast cell networks.
- jvzr 14y ago
  I'll try that tonight when I have access to my Mac (remote-debugging with dev tools). Until then, I can tell you approximately that the DNS shakeup takes 5 seconds, the server/CDN shakeup takes 1 more and the loading/painting is near-instantaneous. Will post solid numbers tonight.

jakobe 14y ago

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 14y ago
custom fonts shouldn't be used for body copy? Shouldn't technology be bending to our will? Not our will to technology?
- cheald 14y ago
  Not currently. Many custom fonts look atrocious in the 10-14pt range in Chrome on Windows due to aliasing issues, and that's such a large slice of any particular market that you can't really do that. It would be nice to get that sorted out, but for the time being, you have to be very careful about your body fonts.
- papsosouid 14y ago
  >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 14y ago
    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.

deleted 14y ago

[deleted]

nodata 14y ago

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

franze 14y ago
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.

yk 14y ago

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.)

StavrosK 14y ago
Ghostery blocks everything third-party, CSS or JS.
J_Darnley 14y ago
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 14y ago
  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.
  - J_Darnley 14y ago
    Yes. If a website won't even show basic page text without allowing various things I will leave immediately.
  - kibwen 14y ago
    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.

huhtenberg 14y ago

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 14y ago
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 https://developers.google.com/webfonts/docs/webfont_loader
sanat 14y ago
That's not entirely true - this is what I had to see during the wait http://i.imgur.com/8NVrkLZ.png?1 http://i.imgur.com/8NVrkLZ.png?1

CodeMage 14y ago

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

Florin_Andrei 14y ago
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.

thibauts 14y ago

tl;dr web fonts

josteink 14y ago

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.

slurgfest 14y ago

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 14y ago
Most people would consider this a significant performance improvement on "nothing shows up for several seconds".

cantlin 14y ago

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.html http://at.cantl.in/nerd-stuff/2012/11/29/fast-page-start.htm...

unabridged 14y ago

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 14y ago
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.

dobbsbob 14y ago

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.

jevin 14y ago

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.