The missing articles: how to optimize your website for Firefox?

There are a lot of Web performance tips online, and a lot of “how to speed up your Firefox install” tipps, but one aspect I cannot find is “how to build a website such that it is fast in Firefox”. Even though there actually are huge differences in speed depending on the feature used — as arewefastyet.com: the Firefox Performance Dashboard shows. I cannot give you a complete guide yet, except for the things I see in arewefastyet, but maybe this is already a start:

PDF (drucken)

• Assorted DOM takes 16ms in FF yet 900ms in Chromium and 600ms in Chrome¹. But its wiki entry is a TODO. Why would they not document a test very visibly where they totally blow Chrome out of the water? It is available in perf-automation/benchmarks/assorted-dom and includes getElementById which is almost instantaneous on Firefox. See test-contents.js.
• MotionMark Animometer has a 10% higher score, especially Canvas Arcs and Paths have 3x the score than Chrome. Images however are slower. So on Canvas avoid images, use arcs and paths.
• MotionMark HtmlSuite has 30% higher score, because most CSS transitions are faster, especially CSS bouncing SVG images (factor 2) and DOM particles, SVG masks (factor 4!)
• StyleBench has a 3x higher score. Many of those tests show Firefox factor 5 faster than Chromium and Firefox finishes most in a 60 FPS frame budget (about 16ms), while Chromium often takes 80-150ms.
• WebAudio is factor 2 faster.

These are partially documented in perfdocs/raptor.html.

So you get vastly different performance depending on the features you use to implement your site.

And this is the most important takeaway: never test only on Chrome and then expect your site to work well in other browsers. You have to test widely — including performance of CSS.

Rules of thumb are hard to come by, but I’d start with: build on CSS (including transitions), SVGs, and accessing the DOM directly via getElementById instead of querySelector. But most of all, profile your website in Firefox and Chromium, and when you find something that takes much more time in Firefox, check whether you can implement it in a way that’s faster in FF.

And if you do anything with audio, make sure it works in FF.