So, Firefox 3.6 is finally here, and on average it’s 20% faster than 3.5. It’s actually a really noticeable improvement for both rendering and scrolling around pages; I’d say it’s more or less on a par with Safari on most pages. I hear from Windows using friends that it’s similarly quicker on that platform too, approaching the speed of Chrome, in places. All of which makes this a little odd.
I noticed, not long after the upgrade that my blog (this page, unless you’re reading a syndicated copy,) was scrolling really, really slowly in Firefox, which it had never done before I upgraded. I checked it in Safari to reassure myself that it wasn’t something wrong with the site, and everything was fine; scrolling was smooth and responsive just like it has always been. I checked Firefox 3.5 on my macbook; same thing. I disabled all my firefox addons and tried again on the desktop: still painfully slow. So I re-enabled some of them and started messing around with firebug, disabling various style elements to see if I could figure out where the slowdown was coming from.
It didn’t take me long to find the culprit: shadows. I try to avoid using images in my pages as much as possible to improve page load speed, so I use box-shadows to give a bit of depth to the widget box-outs; they look even more flat and drab without them. I also find that a subtle text-shadow is a great way to increase text contrast without making the page harder on the eyes, which is a big deal for any light-on-dark display (at least until someone introduces a decent super-light websafe font,) so I make heavy use of that too. None of this has ever had any noticeable performance impact before, but here we are; with the new, optimised, gecko engine it renders like arse.
I thought perhaps there was something else about my CSS that was confusing the rendering engine — it’s hardly the most minimal or elegant set of style definitions in the world — so I knocked together this abuse of text-shadow to prove that it’s the problem. As expected, it renders fine in Safari and older Firefoxes, but incredibly slowly in Firefox 3.6, so it’s definitely something to do with the new browser.
Next check was to see if it affects FF3.6 on other platforms, so I fired up my Wintendo, upgraded Firefox and tried the page. No slowdown. I don’t know how representative that is though; that box is a quad-core 3GHz Nehalem with 6GB of RAM and a GTX295 in it; it’s got about twice the graphics oomph of my Mac (which is a 3GHz Core2 Duo with an 8800GS), and I don’t have a slower windows box to test on. So this is a bit inconclusive; I can’t really detmine whether the issue is confined to the Mac version of Firefox, or to Firefox on machines that can’t run Crysis at 60fps. But, honestly, I don’t think it matters.
Long story short; my site renders really slowly on the latest, greatest version of Firefox, which is an issue. I make no bones about the fact that I don’t give a monkey’s how it renders in IE, but I do like to make sure it gives a good experience in decent browsers, which by my definition means anything webkit or gecko based. Firefox is by far the most popular browser in that category, so I can’t just ignore this. The question is what to do?
I can sit around and hope that 3.61 fixes the problem, but that is basically just ignoring it, taking no responsibility, and means that my site sucks until someone else fixes their browser, which might never happen.
Or I can reskin the whole site such that it looks OK (or at least as OK as it looks now) without relying on shadows. The problem is, I’m not a web designer, so that’ll take me ages, and I only just got the place looking how I want with this design. It’ll also, inevitably, mean moving back towards the bad old way of doing things, using background PNGs to try to give the site any sense depth or character, and I really don’t want to do that; I want to be able to use stylesheets to define the style of my page, not rely on image-based workarounds. Admitting that I need those workarounds feels like giving up. Maybe the state of browser technology just isn’t up to that outlook yet.
Basically, I see no entirely satisfactory way out of this situation; I’m just going to have to decide which solution is the least unsatisfactory. I’m going to have to give it some thought.