11 June 2009
Cufón speed test
We’re planning on using Cufón to a larger extent than we have before on our build for Gregory, which has to be localized in a number of languages. Using a text replacer for the designed text will allow us to localize text without rendering out new gifs and pngs for every language and whenever copy changes. Not knowing how fast Cufón could render when given a lot of text, I put a test together. PHP renders out a bunch of random text in blocks ranging from 10 characters to 1,000,000 characters. Then Cufón goes to task on each, in sequence. JS tells you how long it takes. Try it out here, but be advised it can crash your browser.
Here are the results of my very non-scientific test:
At 100,000 characters, FF3 threw “A script is running slow, blah blah” messages. IE7 just crashed. Safari 4 hung in there till 1,000,000 but then it gave up. It looks like Apple’s claims about Safari 4’s speed have some truth. I didn’t test any of the past generation of browsers, I may go back and add them later.
It looks like Cufón works perfectly fine on a page where it’s converting a thousand characters or less. But it shouldn’t be used to convert the majority of the body copy of a page. That’s perfectly acceptable to me.
Comments
Cufon renders each word in a canvas element nested within a span element. The original word is also rendered inside an additional span element within the same parent span element as the canvas. This is an acceptable solution for headings, but you need to have your head examined if you are using it for body copy.
thanks for this testing page! cufon just like sifr is meant for headings, nav and other short text, definitely not for copy text. text selection is limited anyway.
Ha. A client asked if we could use a script font for the body text. Even though I didn’t want to take the time to figure out just why it would be a bad idea (not including that it would destroy the UI) I’m glad I can now reference these tests as an excuse of why their site shouldn’t look like a friggin’ love letter.
Thanks!
You’re test does not work in opera (10). As in, in does not show any replaced text, as it does in safari.
@Woest. It did for me. after a bit. It was white at first but then rendered the text. This is on a Mac. It chilled on the white for a long time though.
I don’t talk to many people who use Opera, is that your preferred browser?
How does Opera perform in this test?
It would be cool to include it in the tests.
Wow. Your test really ripped up Firefox 3.0.12. I lost all the text on my menus.
Can we all make a pact to never use it for strings of text longer than 10 words. Only for nav, headers. Maybe Confucius quotes, maybe.
@Nick: I see this all the time in Fx 3.0.x.x when using Cufon for lots of local development… even with all add-ons disabled. All menu text (and some other text as well) turns into a few underscores / underlines.
Interestingly enough, the problem doesn’t seem to appear in Fx 3.5.x.
Wow, glad I came across this. Now I feel like a noob at advanced UI stuff. I had recently implemented Cufon for not only headings but body text as well. It worked fine if you didnt switch from page to page rather quickly, but as soon as you tried switching pages fast (not allowing it to finishing loading) Firefox 3.5.5 would crash. It worked fine in Chrome, Safari, Opera and believe it or not IE. I posted a comment in the Cufon support group… no one warned me of the danger of trying to use for all copy text. Until now, I was unable to find a way to show someone an example besides my own where firefox crashes. For a while there, I thought I had a problem with my overall implementation. Thanks for this post and enlightening me!